New UI

docusaurus.config.ts

@@ -104,9 +104,9 @@ const config: Config = {
           position: 'right',
           value: `
             <button   
-              class="bg-fancy-ocean" 
+              class="bg-white" 
               onclick="window.open('https://app.stakewise.io', '_blank')"
-              style="padding: 10px 20px; color: white; border: none; border-radius: 5px; cursor: pointer;"  
+              style="padding: 10px 20px; color: #00060f; border: none; border-radius: 5px; cursor: pointer;"  
             >  
               Open App 
             </button>

src/components/BrandAssets/BrandAssets.tsx

@@ -7,7 +7,7 @@ const BrandAssets: React.FC = () => (
       href="/stakewise-brand-assets.zip"
       download
     >
-      <div className="text-t16m text-lilac underline">
+      <div className="text-t16m text-coral underline">
         Download StakeWise brand assets
       </div>
     </a>

src/components/DocsSections/Blocks/Block/Block.module.css

@@ -4,12 +4,6 @@
   cursor: pointer;
 }
 
-.container:hover {
-  transform: scale(1.05);
-  text-decoration: none;
-  background-color: rgba(var(--moon-rgb), .1) !important;
-}
-
 .icon {
   width: 24px;
   height: 24px;

src/components/DocsSections/Blocks/Block/Block.tsx

@@ -19,7 +19,7 @@ const Block: React.FC<BlockProps> = (props) => {
 
   return (
     <Link
-      className={cx(s.container, 'rounded-8 mx-16 px-12 py-16 bg-moon/5 relative max-[960px]:mt-16')}
+      className={cx(s.container, 'rounded-8 mx-16 px-12 py-16 crystal-button-block relative max-[960px]:mt-16')}
       to={href}
     >
       <div className="flex items-center justify-start">

src/components/DocsSections/DocsSections.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 
 import Blocks from './Blocks/Blocks'
@@ -7,21 +7,9 @@ import Blocks from './Blocks/Blocks'
 const DocsSections: React.FC = () => {
   const { siteConfig } = useDocusaurusContext()
 
-  useEffect(() => {
-    // Something prevents adding a class, apparently a little later
-    // calls for another modification of the element
-    setTimeout(() => {
-      document.body.classList.add('bg-gradient')
-    })
-
-    return () => {
-      document.body.classList.remove('bg-gradient')
-    }
-  }, [])
-
   return (
     <div className="pt-40 flex flex-col items-center w-full">
-      <h1 className="text-lilac! text-center">{siteConfig.title}</h1>
+      <h1 className="text-coral! text-center">{siteConfig.title}</h1>
       <h3 className="text-center">{siteConfig.tagline}</h3>
       <Blocks />
     </div>

src/components/FAQ/Question/Question.tsx

@@ -54,7 +54,7 @@ const Question: React.FC<QuestionProps> = (props) => {
         </div>
       </DisclosureButton>
       <div
-        className="flex p-8 mx-auto bg-moon/5 rounded-8"
+        className="flex p-8 mx-auto crystal-bg rounded-8"
         style={{
           overflow: 'hidden',
           maxWidth: '600px',
@@ -67,7 +67,7 @@ const Question: React.FC<QuestionProps> = (props) => {
           static
           ref={panelRef}
         >
-          <div className="text-center w-full text-moon text-t14 opacity-80 whitespace-pre-wrap">
+          <div className="text-center w-full text-moon text-t14 whitespace-pre-wrap">
             {text}
           </div>
         </DisclosurePanel>

src/components/GitHub/GitHub.module.css

@@ -0,0 +1,7 @@
+:global(html[data-theme='dark']) .box {
+  background-color: rgba(39, 40, 42, .2);
+}
+
+:global(html[data-theme='light']) .box {
+  background-color: rgba(255, 255, 255, .3);
+}

src/components/GitHub/GitHub.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
+import cx from 'classnames'
 
 import Item from './Item/Item'
 
+import s from './GitHub.module.css'
+
 
 const items = [
   {
@@ -27,7 +30,7 @@ const items = [
 ] as const
 
 const GitHub: React.FC = () => (
-  <div className="mt-40 mx-auto max-w-[966px] flex items-center justify-center bg-moon/5 rounded-12 max-[960px]:flex-wrap">
+  <div className={cx(s.box, 'mt-40 mx-auto max-w-[966px] flex items-center justify-center rounded-12 max-[960px]:flex-wrap')}>
     <div className="text-center text-t18b w-[220px] max-[960px]:flex-1 max-[960px]:pt-24">Developer Links</div>
     <div className="py-12 flex items-center justify-between flex-wrap min-[961px]:flex-1">
       {

src/components/GitHub/Item/Item.module.css

@@ -3,9 +3,3 @@
   transition: .2s;
   cursor: pointer;
 }
-
-.container:hover {
-  transform: scale(1.05);
-  text-decoration: none;
-  background-color: rgba(var(--moon-rgb), .1) !important;
-}

src/components/GitHub/Item/Item.tsx

@@ -16,7 +16,7 @@ const Item: React.FC<ItemProps> = (props) => {
 
   return (
     <a
-      className={cx(s.container, 'flex items-center justify-between bg-moon/5 rounded-8 m-12 px-12 py-16')}
+      className={cx(s.container, 'flex items-center justify-between crystal-button-block rounded-8 m-12 px-12 py-16')}
       target="_blank"
       href={href}
     >

src/components/Links/Block/Block.module.css

@@ -4,12 +4,6 @@
   cursor: pointer;
 }
 
-.container:hover {
-  transform: scale(1.05);
-  text-decoration: none;
-  background-color: rgba(var(--moon-rgb), .1) !important;
-}
-
 .icon {
   width: 24px;
   height: 24px;

src/components/Links/Block/Block.tsx

@@ -17,13 +17,13 @@ const Block: React.FC<BlockProps> = (props) => {
 
   return (
     <a
-      className={cx(s.container, 'rounded-8 mx-16 px-12 py-16 bg-moon/5 relative max-[960px]:mt-16')}
+      className={cx(s.container, 'rounded-8 mx-16 px-12 py-16 crystal-button-block relative max-[960px]:mt-16')}
       target="_blank"
       href={href}
     >
       <div className="flex items-center justify-start">
-        <Svg className={cx(s.icon, 'opacity-50')} />
-        <div className="ml-8 text-t18m opacity-50">
+        <Svg className={cx(s.icon, 'opacity-80')} />
+        <div className="ml-8 text-t16">
           {title}
         </div>
       </div>

src/css/custom.css

@@ -1,24 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600,700&display=swap');
 
-.bg-gradient {
-  background-image: radial-gradient(50% 50% at 50% 40%, rgb(139 0 255 / 13%) 0%, rgb(255 255 255 / 0%) 100%);
-}
-
-.footer__link-item svg,
-.navbar__link svg {
-  display: none;
-}
-
-::-moz-selection {
-  color: #47347e;
-  background: #c8bfe3;
-}
-
-::selection {
-  color: #47347e;
-  background: #c8bfe3;
-}
-
 html {
   scroll-behavior: smooth;
   font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
@@ -29,13 +10,25 @@ html {
   font-weight: 400;
 }
 
-html[data-theme='dark'] {
-  --ifm-toc-border-color: #ffffff0d;
-  --ifm-footer-background-color: #ffffff0d;
-  --ifm-navbar-background-color: #ffffff0d;
-  --ifm-global-shadow-md: 0 5px 4px rgba(255, 255, 255, 0.448);
+body::before {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -20;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: 100% 1500px;
+  content: '';
+}
+
+html[data-theme='dark'] body::before {
+  background-image: linear-gradient(171.89deg, #2e4145 2.92%, #4b605a 54.05%, #23414b 85.21%);
+}
 
-  background-color: #181618;
+html[data-theme='light'] body::before {
+  background-image: linear-gradient(171.89deg, #c4ddd2 2.92%, #f2e5c4 55.54%, #d0ccb1 87.6%);
 }
 
 html[data-theme='dark'] .alert--success {
@@ -51,16 +44,8 @@ html[data-theme='dark'] .alert--warning {
   --ifm-alert-background-color: #9490596b;
 }
 
-html[data-theme='light'] {
-  --ifm-toc-border-color: #00060f0d;
-  --ifm-footer-background-color: #00060f0d;
-  --ifm-navbar-background-color: #00060f0d;
-
-  background-color: #f1f2fd;
-}
-
 .markdown a {
-  color: #3578e5;
+  color: var(--coral);
 }
 
 p {
@@ -120,6 +105,77 @@ a:hover {
   margin-left: auto;
 }
 
+html[data-theme='light'] .navbar {
+  background: rgba(26, 29, 28, .05);
+}
+
+html[data-theme='dark'] .navbar {
+  background: rgba(26, 29, 28, .2);
+}
+
+html[data-theme='light'] .menu {
+  background: rgba(26, 29, 28, .05);
+}
+
+html[data-theme='dark'] .menu {
+  background: rgba(26, 29, 28, .2);
+}
+
+html[data-theme='light'] .footer {
+  background: rgba(26, 29, 28, .05);
+}
+
+html[data-theme='dark'] .footer {
+  background: rgba(26, 29, 28, .3);
+}
+
+html[data-theme='light'] .crystal-button-block {
+  box-shadow: 0 7px 12px 0 rgba(39, 40, 42, .15);
+  background: rgba(255, 255, 255, .4);
+  border: solid 1px rgba(255, 255, 255, .2);
+}
+
+html[data-theme='light'] .crystal-button-block:hover {
+  transform: scale(1.05);
+  text-decoration: none;
+  background: rgba(255, 255, 255, .8);
+  border: solid 1px rgba(255, 255, 255, 1);
+}
+
+html[data-theme='dark'] .crystal-button-block {
+  box-shadow: 0 7px 12px 0 rgba(39, 40, 42, .35);
+  background: rgba(39, 40, 42, .5);
+  border: solid 1px rgba(39, 40, 42, .5);
+}
+
+html[data-theme='dark'] .crystal-button-block:hover {
+  transform: scale(1.05);
+  text-decoration: none;
+  background: rgba(39, 40, 42, .8);
+  border: solid 1px rgba(39, 40, 42, .8);
+}
+
+html[data-theme='light'] .crystal-bg {
+  box-shadow: 0 7px 12px 0 rgba(39, 40, 42, .15);
+  background: rgba(255, 255, 255, .4);
+  border: solid 1px rgba(255, 255, 255, .2);
+}
+
+html[data-theme='dark'] .crystal-bg {
+  box-shadow: 0 7px 12px 0 rgba(39, 40, 42, .35);
+  background: rgba(39, 40, 42, .5);
+  border: solid 1px rgba(39, 40, 42, .5);
+}
+
+.footer__link-item svg,
+.navbar__link svg {
+  display: none;
+}
+
+.alert a {
+  text-decoration-color: var(--color-coral) !important;
+}
+
 @media (max-width: 960px) {
   .navbar__toggle {
     margin-left: 16px;
@@ -137,6 +193,14 @@ a:hover {
     background-color: #00060f;
   }
 
+  html[data-theme='light'] .navbar-sidebar{
+    background-color: #f1f2fd;
+  }
+
+  html[data-theme='dark'] .navbar-sidebar {
+    background-color: #00060f;
+  }
+
   .navbar-sidebar__items ul.menu__list {
     padding-left: 24px;
   }

src/css/tailwind/layers/base.css

@@ -11,15 +11,41 @@
   :root[data-theme='light'] {
     --moon: #00060f;
     --moon-rgb: 0, 6, 15;
-    --lilac: #846ab2;
-    --lilac-rgb: 132, 106, 178;
+    --coral-rgb: 1, 137, 112;
+    --coral: rgb(1, 137, 112);
+
+    --ifm-navbar-link-hover-color: rgb(1, 137, 112) !important;
+    --ifm-breadcrumb-color-active: rgb(1, 137, 112) !important;
+    --ifm-tabs-color-active-border: rgb(1, 137, 112) !important;
+    --ifm-menu-color-active: rgb(1, 137, 112) !important;
+    --ifm-tabs-color-active: rgb(1, 137, 112) !important;
+    --ifm-color-primary: rgb(1, 137, 112) !important;
+
+    --ifm-color-emphasis-200: transparent !important;
+
+    --ifm-card-background-color: rgba(26, 29, 28, .05) !important;
+    --ifm-menu-color-background-hover: rgba(26, 29, 28, .05) !important;
+    --ifm-menu-color-background-active: rgba(26, 29, 28, .05) !important;
   }
 
   :root[data-theme='dark'] {
     --moon: #ffffff;
     --moon-rgb: 255, 255, 255;
-    --lilac: #b68dff;
-    --lilac-rgb: 182, 141, 255;
+    --coral-rgb: 64, 233, 222;
+    --coral: rgb(64, 233, 222);
+
+    --ifm-navbar-link-hover-color: rgb(64, 233, 222) !important;
+    --ifm-breadcrumb-color-active: rgb(64, 233, 222) !important;
+    --ifm-tabs-color-active-border: rgb(64, 233, 222) !important;
+    --ifm-menu-color-active: rgb(64, 233, 222) !important;
+    --ifm-tabs-color-active: rgb(64, 233, 222) !important;
+    --ifm-color-primary: rgb(64, 233, 222) !important;
+
+    --ifm-color-emphasis-200: transparent !important;
+
+    --ifm-card-background-color: rgba(26, 29, 28, .2) !important;
+    --ifm-menu-color-background-hover:rgba(26, 29, 28, .2) !important;
+    --ifm-menu-color-background-active: rgba(26, 29, 28, .2) !important;
   }
 
   ::-moz-selection {
@@ -43,7 +69,6 @@
 
   body {
     position: relative;
-    background-color: var(--mirror);
     -webkit-overflow-scrolling: touch;
   }