fix(UI and screenshots)

Author: Ajit Kumar

client/assets.js

@@ -10,13 +10,6 @@ import 'res/animated_icons/reviews.gif';
 import 'res/logo-512.png';
 import 'res/manifest.json';
 import 'res/og-image.png';
-import 'res/alert.png';
-import 'res/confirm.png';
-import 'res/prompt.png';
-import 'res/loader.png';
-import 'res/select.png';
-import 'res/selectionMenu.png';
-import 'res/toast.png';
 import 'res/fonts/CascadiaCode.ttf';
 import 'res/fonts/CourierNew-Regular.woff2';
 import 'res/fonts/JetBrainsMono-Bold.ttf';

client/components/docs/style.scss

@@ -7,7 +7,7 @@
   display: flex;
   max-width: unset;
 
-  #doc-nav:checked ~ .side-nav {
+  #doc-nav:checked~.side-nav {
     display: flex !important;
   }
 
@@ -17,7 +17,6 @@
     padding: 10px 0;
     display: flex;
     align-items: center;
-    background-color: var(--bg-color);
     margin-left: -10px;
 
     .icon {
@@ -82,7 +81,7 @@
           background-color: rgba($color: #000000, $alpha: 0.4);
         }
 
-        > * {
+        >* {
           text-decoration: none !important;
           display: flex;
           padding: 10px;
@@ -155,18 +154,19 @@
   @media screen and (min-width: 1000px) {
     .doc-header {
       padding-left: 10px;
+
       label.icon.menu {
         display: none;
       }
     }
   }
 
   @media screen and (max-width: 1000px) {
-    #doc-nav:checked ~ .side-nav {
+    #doc-nav:checked~.side-nav {
       transform: translateX(0);
     }
 
-    #doc-nav:checked ~ .mask {
+    #doc-nav:checked~.mask {
       opacity: 0.5;
       pointer-events: all;
     }
@@ -201,7 +201,10 @@
   .hljs-meta,
   .hljs-comment {
     color: #565f89;
-  } /* Red */ /*INFO: This
+  }
+
+  /* Red */
+  /*INFO: This
   keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
   .hljs-tag,
   .hljs-doctag,
@@ -214,7 +217,10 @@
   .hljs-variable.language_,
   .hljs-deletion {
     color: #f7768e;
-  } /*Orange */ /*INFO: Number and Boolean constants, Language
+  }
+
+  /*Orange */
+  /*INFO: Number and Boolean constants, Language
   support constants */
   .hljs-variable,
   .hljs-template-variable,
@@ -224,15 +230,24 @@
   .hljs-params,
   .hljs-link {
     color: #ff9e64;
-  } /* Yellow */ /* INFO: Function parameters, Regex character
+  }
+
+  /* Yellow */
+  /* INFO: Function parameters, Regex character
   sets, Terminal Yellow */
   .hljs-built_in,
   .hljs-attribute {
     color: #e0af68;
-  } /* cyan */ /* INFO: Language support functions, CSS HTML elements */
+  }
+
+  /* cyan */
+  /* INFO: Language support functions, CSS HTML elements */
   .hljs-selector-tag {
     color: #2ac3de;
-  } /* light blue */ /* INFO: Object
+  }
+
+  /* light blue */
+  /* INFO: Object
   properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan,
   Markdown code, Import/export keywords */
   .hljs-keyword,
@@ -243,25 +258,37 @@
   .hljs-subst,
   .hljs-property {
     color: #7dcfff;
-  } /*Green*/ /* INFO: Object literal keys, Markdown links, Terminal
+  }
+
+  /*Green*/
+  /* INFO: Object literal keys, Markdown links, Terminal
   Green */
   .hljs-selector-tag {
     color: #73daca;
-  } /*Green(er) */ /* INFO:
+  }
+
+  /*Green(er) */
+  /* INFO:
   Strings, CSS class names */
   .hljs-quote,
   .hljs-string,
   .hljs-symbol,
   .hljs-bullet,
   .hljs-addition {
     color: #9ece6a;
-  } /* Blue */ /* INFO:
+  }
+
+  /* Blue */
+  /* INFO:
   Function names, CSS property names, Terminal Blue */
   .hljs-code,
   .hljs-formula,
   .hljs-section {
     color: #7aa2f7;
-  } /* Magenta */ /*INFO:
+  }
+
+  /* Magenta */
+  /*INFO:
   Control Keywords, Storage Types, Regex symbols and operators, HTML
   Attributes, Terminal Magenta */
   .hljs-name,
@@ -271,19 +298,25 @@
   .hljs-char.escape_,
   .hljs-attr {
     color: #bb9af7;
-  } /*
-  white*/ /* INFO: Variables, Class names, Terminal White */
+  }
+
+  /*
+  white*/
+  /* INFO: Variables, Class names, Terminal White */
   .hljs-punctuation {
     color: #c0caf5;
   }
+
   .hljs {
     background: #1a1b26;
     color: #9aa5ce;
   }
+
   .hljs-emphasis {
     font-style: italic;
   }
+
   .hljs-strong {
     font-weight: bold;
   }
-}
+}

client/components/plugins/style.scss

@@ -35,7 +35,7 @@
     }
 
     &:hover {
-      box-shadow: -2px 2px 12px 2px rgba($color: #000000, $alpha: 0.9);
+      box-shadow: -2px 2px 12px 2px rgba($color: #000000, $alpha: 0.4);
     }
 
     .plugin-icon {
@@ -53,7 +53,7 @@
     justify-content: center;
     cursor: default;
 
-    > *:not(:last-child)::after {
+    >*:not(:last-child)::after {
       content: '•';
       font-weight: bolder;
       margin: 0 5px;
@@ -77,4 +77,4 @@
   .rejected {
     color: #f33;
   }
-}
+}

client/main.js

@@ -25,11 +25,24 @@ window.onload = async () => {
         { href: '/faqs', text: 'FAQs' },
         { href: 'https://docs.acode.app', text: 'Plugin Docs' },
         { href: '/plugins', text: 'Plugins' },
-        { href: '/user', text: $loginText, icon: 'person' },
       ]}
     />
   );
 
+  app.addEventListener('scroll', (e) => {
+    app.get('#main-header').style.cssText = `
+      background-color: rgba(0, 0, 0, ${Math.min(e.target.scrollTop / 100, 0.5)});
+      backdrop-filter: blur(${Math.min(e.target.scrollTop / 10, 10)}px);
+      box-shadow: 0 2px 5px rgba(0, 0, 0, ${Math.min(e.target.scrollTop / 100, 0.2)});
+      transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
+    `;
+    if (e.target.scrollTop > 0) {
+      app.classList.add('scrolled');
+    } else {
+      app.classList.remove('scrolled');
+    }
+  });
+
   const user = await getLoggedInUser();
   if (user) {
     $loginText.value = user.name;

client/main.scss

@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 
 :root {
-  font-family: 'Nunito', sans-serif;
+  font-family: 'Lato', sans-serif;
 }
 
 body,
@@ -10,7 +10,7 @@ html {
   width: 100%;
   overflow: hidden;
   margin: 0;
-  background: linear-gradient(to bottom,
+  background: linear-gradient(to bottom right,
       var(--secondary-color),
       var(--primary-color),
       var(--primary-color),
@@ -29,44 +29,13 @@ html {
   &::-webkit-scrollbar {
     display: none;
   }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-align: center;
-  margin: 0;
-}
 
-h1 {
-  font-size: 2rem !important;
-}
-
-h2 {
-  font-size: 1.5rem !important;
-}
-
-h3 {
-  font-size: 1.2rem !important;
-}
-
-h4 {
-  font-size: 1rem !important;
-}
-
-h5 {
-  font-size: 0.8rem !important;
-}
-
-h6 {
-  font-size: 0.6rem !important;
-}
-
-h1 {
-  font-size: 2rem;
+  &.scrolled {
+    header {
+      background-color: rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(20px);
+    }
+  }
 }
 
 body.loading {
@@ -101,12 +70,12 @@ body.loading {
 }
 
 header {
+  top: 0;
+  z-index: 10;
   display: flex;
-  align-items: center;
-  background-color: var(--bg-color);
-  box-shadow: 0px 1px 2px #000;
   position: sticky;
-  top: 0;
+  align-items: center;
+  transition: all 1s ease-in-out;
 
   >.icon {
     height: 60px;
@@ -125,10 +94,6 @@ header {
     }
   }
 
-  &#main-header {
-    z-index: 100;
-  }
-
   label[for='menu-toggler'] {
     display: none;
   }
@@ -202,6 +167,7 @@ header {
       height: 30px;
       padding: 0 10px;
       align-items: center;
+      z-index: 1;
 
       .icon {
         height: fit-content;
@@ -242,7 +208,6 @@ header {
 
 main {
   width: 100%;
-  background-color: var(--bg-color);
 
   &:empty {
     position: relative;
@@ -459,6 +424,8 @@ code {
 }
 
 footer {
+  background-color: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(20px);
   position: relative;
   z-index: 100;
 }

client/main.view.js

@@ -1,3 +1,4 @@
+import $loginText from 'components/loginText';
 import './main.scss';
 import digitalOceanLogo from 'res/digitalocean-icon.svg';
 import logo from 'res/logo.svg';
@@ -22,15 +23,9 @@ export default ({ routes }) => (
         ))}
       </nav>
       <nav>
-        <a
-          className='play-button'
-          href='https://play.google.com/store/apps/details?id=com.foxdebug.acodefree&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'
-        >
-          <img
-            style={{ width: '150px' }}
-            alt='Get it on Google Play'
-            src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'
-          />
+        <a href='/user'>
+          <span className='icon person' />
+          {$loginText}
         </a>
       </nav>
     </header>