[UI] Update startup screen

Koniverse · Jun 5, 2024 · 3842775 · 3842775
1 parent 45e2afd
commit 3842775
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 3 deletions.
diff --git a/packages/extension-koni-ui/src/contexts/ThemeContext.tsx b/packages/extension-koni-ui/src/contexts/ThemeContext.tsx
@@ -32,6 +32,10 @@ const GlobalStyle = createGlobalStyle<ThemeProps>(({ theme }) => {
   applyPreloadStyle(extendToken.bodyBackgroundColor);
 
   return ({
+    '.startup-screen': {
+      background: extendToken.colorBgGradient || token.colorPrimary
+    },
+
     body: {
       fontFamily: token.fontFamily,
       color: token.colorText,

diff --git a/packages/webapp/public/assets/reset.css b/packages/webapp/public/assets/reset.css
@@ -19,7 +19,7 @@ input::-ms-clear, input::-ms-reveal {
 }
 
 html {
-    font-family: sans-serif;
+    font-family: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
@@ -363,6 +363,66 @@ textarea {
     color: inherit;
 }
 
+.startup-screen {
+  overflow: hidden;
+}
+
+.startup-screen-title {
+  font-size: 36px;
+  line-height: 47px;
+  color: #000;
+  font-weight: 700;
+  max-width: 220px;
+  position: relative;
+  z-index: 10;
+  margin-top: 44px;
+  margin-left: 28px;
+}
+
+.startup-screen-mockup-1 {
+  position: absolute;
+  width: 252px;
+  height: auto;
+  top: 37px;
+  right: -77px;
+  z-index: 5;
+}
+
+.startup-screen-mockup-2 {
+  position: absolute;
+  width: 71px;
+  height: auto;
+  top: 217px;
+  right: 162px;
+  z-index: 5;
+}
+
+.startup-screen-mockup-3 {
+  position: absolute;
+  width: 148px;
+  height: auto;
+  top: 292px;
+  right: 4px;
+  z-index: 5;
+}
+
+.startup-screen-mockup-4 {
+  opacity: 0.75;
+  width: 477px;
+  height: auto;
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  right: -53px;
+}
+
+@media screen and (max-height: 739px) {
+  .startup-screen-mockup-4 {
+    bottom: auto;
+    top: 378px
+  }
+}
+
 .kn-sui-dropdown-base .menu {
     display: none;
     user-select: none;

diff --git a/packages/webapp/public/images/startup-screen/bottom-background-image.png b/packages/webapp/public/images/startup-screen/bottom-background-image.png
diff --git a/packages/webapp/public/images/startup-screen/token-1.png b/packages/webapp/public/images/startup-screen/token-1.png
diff --git a/packages/webapp/public/images/startup-screen/token-2.png b/packages/webapp/public/images/startup-screen/token-2.png
diff --git a/packages/webapp/public/images/startup-screen/token-3.png b/packages/webapp/public/images/startup-screen/token-3.png
diff --git a/packages/webapp/public/index.html b/packages/webapp/public/index.html
@@ -79,8 +79,50 @@
 
 <body style="background-color: #F0F7F8;">
   <div id="root"></div>
-  <div id="loading-placeholder" style="background-color: #FFFFFF; position:fixed; top: 0; left: 0; right: 0; bottom: 0">
-    <img src="/images/loading.svg" style="width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); left: calc(50% - 50px)" alt="Loading">
+  <div id="loading-placeholder" class="startup-screen" style="position:fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000">
+    <div class="startup-screen-title">
+      Welcome to Playnation Telegram’s app
+    </div>
+
+    <img class="startup-screen-mockup-1" src="/images/startup-screen/token-1.png" alt="mockup-1">
+    <img class="startup-screen-mockup-2" src="/images/startup-screen/token-2.png" alt="mockup-2">
+    <img class="startup-screen-mockup-3" src="/images/startup-screen/token-3.png" alt="mockup-3">
+    <img class="startup-screen-mockup-4" src="/images/startup-screen/bottom-background-image.png" alt="mockup-4">
   </div>
+
+  <script>
+    const settings = localStorage.getItem('Settings');
+    let currentTheme;
+
+    try {
+      currentTheme = JSON.parse(settings).theme;
+    } catch (e) {
+      currentTheme = 'default'
+    }
+
+    let backGroundStyle;
+
+    if (currentTheme === 'sky') {
+      backGroundStyle = '#C7F0FF';
+    } else if (currentTheme === 'morning_sunny') {
+      backGroundStyle = '#FFF8C4';
+    } else if (currentTheme === 'spring') {
+      backGroundStyle = '#7EEC79';
+    } else if (currentTheme === 'lavender') {
+      backGroundStyle = '#BB9EFF';
+    } else if (currentTheme === 'sunny') {
+      backGroundStyle = '#FBCE01';
+    } else if (currentTheme === 'begie') {
+      backGroundStyle = '#EBD7C9';
+    } else if (currentTheme === 'clove') {
+      backGroundStyle = 'linear-gradient(117deg, #A2F6C1 9.05%, #CBF147 91.43%)';
+    } else if (currentTheme === 'aurora') {
+      backGroundStyle = 'linear-gradient(117deg, #A2F6C1 9.05%, #9FE3FF 91.43%)';
+    } else {
+      backGroundStyle = '#CBF147';
+    }
+
+    document.getElementById("loading-placeholder").style.background = backGroundStyle;
+  </script>
 </body>
 </html>