diff --git a/web/i18n/translater.js b/web/i18n/translater.js
index e7b13a592..98f2fced0 100644
--- a/web/i18n/translater.js
+++ b/web/i18n/translater.js
@@ -1,7 +1,23 @@
const i18n = {};
+const languageDefault = 'en';
+
+/**
+ *
+ * @param {String} language
+ * @returns {boolean}
+ */
+function isValidUserLanguage(language) {
+ if (language == null || language == undefined) {
+ return false;
+ }
+ return true;
+}
function getUserLanguage() {
console.info(`[Twake Mail] Current Language: `, navigator.language);
+ if (isValidUserLanguage(navigator.language)) {
+ return languageDefault;
+ }
return navigator.language.split('-')[0];
}
diff --git a/web/index.html b/web/index.html
index d143d2bf0..c804b48f0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,5 +1,5 @@
-
+
diff --git a/web/worker_service/img/ic-close-1x.png b/web/worker_service/img/ic-close-1x.png
new file mode 100644
index 000000000..e1fdacd6f
Binary files /dev/null and b/web/worker_service/img/ic-close-1x.png differ
diff --git a/web/worker_service/img/ic-close-2x.png b/web/worker_service/img/ic-close-2x.png
new file mode 100644
index 000000000..6688dc302
Binary files /dev/null and b/web/worker_service/img/ic-close-2x.png differ
diff --git a/web/worker_service/img/ic-close-3x.png b/web/worker_service/img/ic-close-3x.png
new file mode 100644
index 000000000..f98818980
Binary files /dev/null and b/web/worker_service/img/ic-close-3x.png differ
diff --git a/web/worker_service/img/ic-close-4x.png b/web/worker_service/img/ic-close-4x.png
new file mode 100644
index 000000000..fbd5ade82
Binary files /dev/null and b/web/worker_service/img/ic-close-4x.png differ
diff --git a/web/worker_service/img/tmail-1x.png b/web/worker_service/img/tmail-1x.png
new file mode 100644
index 000000000..950a926b0
Binary files /dev/null and b/web/worker_service/img/tmail-1x.png differ
diff --git a/web/worker_service/img/tmail-2x.png b/web/worker_service/img/tmail-2x.png
new file mode 100644
index 000000000..62d9fe416
Binary files /dev/null and b/web/worker_service/img/tmail-2x.png differ
diff --git a/web/worker_service/img/tmail-3x.png b/web/worker_service/img/tmail-3x.png
new file mode 100644
index 000000000..1057c2640
Binary files /dev/null and b/web/worker_service/img/tmail-3x.png differ
diff --git a/web/worker_service/img/tmail-4x.png b/web/worker_service/img/tmail-4x.png
new file mode 100644
index 000000000..8bfeeda1f
Binary files /dev/null and b/web/worker_service/img/tmail-4x.png differ
diff --git a/web/worker_service/style.css b/web/worker_service/style.css
index d7a282ea6..5733e4807 100644
--- a/web/worker_service/style.css
+++ b/web/worker_service/style.css
@@ -1,53 +1,24 @@
-.bottom-sheet {
+.smart-banner {
display: none;
position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- background-color: #fff;
- border-top-left-radius: 20px;
- border-top-right-radius: 20px;
- box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.2);
- overflow: hidden;
-}
-
-.sheet-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px 20px;
- color: #fff;
-}
-
-.sheet-content {
- padding: 20px;
+ left: 14px;
+ right: 14px;
+ border-radius: 10px;
+ background: linear-gradient(0deg, #FFFBFE 0%, #FFFBFE 100%), linear-gradient(0deg, rgba(122.19, 184.06, 255, 0.09) 0%, rgba(122.19, 184.06, 255, 0.09) 100%);
+ box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.16);
}
-.open_on_mobile_title {
- height: 48px;
- line-height: 48px;
- display: inline-block;
- font-weight: bold;
- font-size: 16px;
- border-bottom: 1px solid #eee;
- text-align: center;
- width: 100%;
- margin-bottom: 16px;
- color: #000;
-}
-
-.open_on_mobile_actions {
- width: 100%;
+.banner-content {
+ padding-bottom: 18px;
display: block;
- height: 48px;
display: flex;
justify-content: left;
align-items: center;
+}
- & > span {
- margin-left: 8px;
- font-weight: bold;
- }
+.twake-mail-icon {
+ margin-left: 12px;
+ margin-right: 16px;
}
.button {
@@ -55,21 +26,43 @@
text-align: center;
text-decoration: none;
display: inline-block;
- font-size: 16px;
margin: 4px 2px;
cursor: pointer;
- border-radius: 5px;
- font-weight: bold;
+ background-color: transparent;
}
-.openApp {
- color: white;
- background-color: #002DDF;
- padding: 10px 20px;
+.close-icon {
+ position: absolute;
+ top: 8px;
+ right: 8px;
}
-.continueWeb {
- color: #002DDF;
- background-color: white;
- padding: 10px 8px;
+.open-button {
+ color: #007AFF;
+ font-size: 17px;
+ font-family: Inter;
+ font-weight: 500;
+ line-height: 24px;
+ word-wrap: break-word;
+ margin-right: 24px;
+ margin-left: 16px;
+}
+
+.banner-title {
+ font-family: Inter;
+ word-wrap: break-word;
+ color: black;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 20px;
+ margin-bottom: 10px;
+}
+
+.banner-description {
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 16px;
+ font-family: Inter;
+ word-wrap: break-word;
+ color: black;
}
\ No newline at end of file
diff --git a/web/worker_service/worker_service.js b/web/worker_service/worker_service.js
index d2a784145..eabbda0a4 100644
--- a/web/worker_service/worker_service.js
+++ b/web/worker_service/worker_service.js
@@ -77,7 +77,7 @@ function fetchServiceWorker() {
function handleContinueTwakeMailOnWeb() {
console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.');
- closeBottomSheet();
+ closeSmartBanner();
fetchServiceWorker();
}
@@ -118,22 +118,22 @@ function initialWorkerService() {
console.info('[TwakeMail] initialWorkerService(): Login callback');
handleContinueTwakeMailOnWeb();
} else {
- openBottomSheet();
+ openSmartBanner();
}
}
-function openBottomSheet() {
- console.info('[TwakeMail] openBottomSheet(): Open the bottom sheet.');
- const bottomSheet = document.querySelector(".bottom-sheet");
- bottomSheet.style.display = "block";
+function openSmartBanner() {
+ console.info('[TwakeMail] openSmartBanner(): Open the smart banner.');
+ const smartBanner = document.querySelector(".smart-banner");
+ smartBanner.style.display = "block";
document.body.style.overflow = "hidden";
- bottomSheet.style.bottom = "0";
+ smartBanner.style.top = "16px";
}
-function closeBottomSheet() {
- console.info('[TwakeMail] closeBottomSheet(): Closing the bottom sheet.');
- const bottomSheet = document.querySelector(".bottom-sheet");
- bottomSheet.style.display = "none";
+function closeSmartBanner() {
+ console.info('[TwakeMail] closeSmartBanner(): Closing the smart banner.');
+ const smartBanner = document.querySelector(".smart-banner");
+ smartBanner.style.display = "none";
document.body.style.overflow = "auto";
- bottomSheet.style.bottom = "-100%";
+ smartBanner.style.top = 0;
}
\ No newline at end of file