feat: Logo and font update (#2269)

polkadot-cloud · Oct 6, 2024 · 96b952f · 96b952f
1 parent 99d5dbb
commit 96b952f
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 31 deletions.
diff --git a/src/img/logo.svg b/src/img/logo.svg
diff --git a/src/kits/Overlay/index.scss b/src/kits/Overlay/index.scss
@@ -119,12 +119,12 @@
     margin: 1rem 0;
 
     &.unbounded {
-      font-family: Unbounded, sans-serif;
+      font-family: Poppins700, sans-serif;
       font-weight: 700;
     }
 
     &.title {
-      font-size: 1.35rem;
+      font-size: 1.5rem;
       margin: 1.25rem 0 0;
     }
   }
@@ -238,7 +238,7 @@
   }
 
   h1 {
-    font-family: Unbounded, sans-serif;
+    font-family: Poppins700, sans-serif;
     margin-bottom: 1.75rem;
   }
 
@@ -264,7 +264,7 @@
       h1 {
         color: var(--text-color-primary);
         font-size: 1.4rem;
-        font-family: Unbounded, sans-serif;
+        font-family: Poppins700, sans-serif;
         font-weight: 700;
         padding: 0 0.5rem;
         display: flex;

diff --git a/src/kits/Structure/PageTitle/Wrappers.ts b/src/kits/Structure/PageTitle/Wrappers.ts
@@ -25,7 +25,7 @@ export const PageTitleWrapper = styled.header`
   justify-content: flex-end;
   position: sticky;
   margin-top: 5rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
   padding-top: 0.5rem;
   padding-bottom: 0;
   top: 0;
@@ -37,13 +37,19 @@ export const PageTitleWrapper = styled.header`
     top: 4rem;
     padding-top: 0.75rem;
     padding-bottom: 0.5rem;
+    margin-bottom: 0;
   }
 
   .title {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     width: 100%;
+    margin-bottom: 0.5rem;
+
+    @media (max-width: ${PageWidthMediumThreshold}px) {
+      margin-bottom: 0.5rem;
+    }
 
     > .right {
       padding-left: 1rem;
@@ -53,15 +59,15 @@ export const PageTitleWrapper = styled.header`
 
   h1 {
     font-size: 2rem;
-    font-family: Unbounded, sans-serif;
+    font-family: Poppins700, sans-serif;
     font-weight: 700;
     position: relative;
     transform: scale(1);
     left: 0;
 
     @media (max-width: ${PageWidthMediumThreshold}px) {
-      left: -1rem;
-      transform: scale(0.85);
+      left: 0rem;
+      transform: scale(0.9);
     }
 
     transition: all var(--transition-duration);
@@ -71,13 +77,14 @@ export const PageTitleWrapper = styled.header`
   &.sticky {
     padding-top: 1.5rem;
     padding-bottom: 0.25rem;
+    margin-bottom: 0.25rem;
 
     .title {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.5rem;
 
       h1 {
-        transform: scale(0.75);
-        left: -1.25rem;
+        transform: scale(0.85);
+        left: -0.75rem;
       }
     }
   }

diff --git a/src/library/Import/Wrappers.ts b/src/library/Import/Wrappers.ts
@@ -113,7 +113,7 @@ export const QRViewerWrapper = styled.div`
 
   .title {
     color: var(--accent-color-primary);
-    font-family: 'Unbounded';
+    font-family: 'Poppins700';
     margin-bottom: 1rem;
   }
 

diff --git a/src/library/Modal/Wrappers.ts b/src/library/Modal/Wrappers.ts
@@ -32,8 +32,8 @@ export const TitleWrapper = styled.div<{ $fixed: boolean }>`
       > h2 {
         display: flex;
         align-items: center;
-        font-family: 'Unbounded', 'sans-serif', sans-serif;
-        font-size: 1.3rem;
+        font-family: 'Poppins700', 'sans-serif', sans-serif;
+        font-size: 1.5rem;
         margin: 0;
 
         > button {

diff --git a/src/library/Prompt/Wrappers.ts b/src/library/Prompt/Wrappers.ts
@@ -103,8 +103,8 @@ export const TitleWrapper = styled.div`
       > h2 {
         display: flex;
         align-items: center;
-        font-family: 'Unbounded', 'sans-serif', sans-serif;
-        font-size: 1.3rem;
+        font-family: 'Poppins700', 'sans-serif', sans-serif;
+        font-size: 1.5rem;
 
         > button {
           margin-left: 0.85rem;

diff --git a/src/library/SideMenu/Main.tsx b/src/library/SideMenu/Main.tsx
@@ -21,6 +21,7 @@ import { LogoWrapper } from './Wrapper';
 import { useBalances } from 'contexts/Balances';
 import { useSyncing } from 'hooks/useSyncing';
 import type { AnyJson } from '@w3ux/types';
+import LogoSVG from 'img/logo.svg?react';
 
 export const Main = () => {
   const { t, i18n } = useTranslation('base');
@@ -31,12 +32,12 @@ export const Main = () => {
   const { accounts } = useImportedAccounts();
   const { getPoolMembership } = useBalances();
   const { activeAccount } = useActiveAccounts();
-  const { inSetup: inNominatorSetup, addressDifferentToStash } = useStaking();
   const {
     getPoolSetupPercent,
     getNominatorSetupPercent,
   }: SetupContextInterface = useSetup();
   const { sideMenuMinimised }: UIContextInterface = useUi();
+  const { inSetup: inNominatorSetup, addressDifferentToStash } = useStaking();
 
   const membership = getPoolMembership(activeAccount);
   const controller = getBondedAccount(activeAccount);
@@ -141,7 +142,9 @@ export const Main = () => {
               }}
             />
 
-            <span>Staking Dashboard</span>
+            <span>
+              <LogoSVG className="logo" />
+            </span>
           </>
         )}
       </LogoWrapper>

diff --git a/src/library/SideMenu/Wrapper.ts b/src/library/SideMenu/Wrapper.ts
@@ -91,11 +91,21 @@ export const LogoWrapper = styled.div<MinimisedProps>`
   }
 
   > span {
-    font-family: InterSemiBold, sans-serif;
     color: var(--accent-color-primary);
-    margin-left: 0.55rem;
-    font-size: 1.1rem;
+    margin-top: 0.25rem;
+    margin-left: 0.75rem;
     background-clip: text;
+    display: flex;
+    align-items: center;
+
+    .logo {
+      width: auto;
+      height: 1.4rem;
+
+      path {
+        fill: var(--accent-color-primary);
+      }
+    }
   }
 `;
 

diff --git a/src/library/SideMenu/index.tsx b/src/library/SideMenu/index.tsx
@@ -31,20 +31,20 @@ import { Side } from 'kits/Structure/Side';
 
 export const SideMenu = () => {
   const { t } = useTranslation('base');
+  const { openHelp } = useHelp();
   const { apiStatus } = useApi();
-  const { networkData, network } = useNetwork();
-  const { mode, toggleTheme } = useTheme();
-  const { openModal } = useOverlay().modal;
   const {
     setSideMenu,
     sideMenuOpen,
     sideMenuMinimised,
     userSideMenuMinimised,
     setUserSideMenuMinimised,
   }: UIContextInterface = useUi();
-  const { openHelp } = useHelp();
+  const { mode, toggleTheme } = useTheme();
+  const { openModal } = useOverlay().modal;
+  const { networkData, network } = useNetwork();
 
-  // listen to window resize to hide SideMenu
+  // listen to window resize to automatically hide the side menu on window resize.
   useEffect(() => {
     window.addEventListener('resize', windowThrottle);
     return () => {

diff --git a/src/modals/Connect/Vault.tsx b/src/modals/Connect/Vault.tsx
@@ -38,7 +38,7 @@ export const Vault = (): ReactElement => {
               style={{
                 opacity: 1,
                 color: 'var(--accent-color-primary)',
-                fontFamily: 'Unbounded',
+                fontFamily: 'Poppins700',
               }}
             />
           </div>

diff --git a/src/pages/Overview/AccountControls/Wrappers.ts b/src/pages/Overview/AccountControls/Wrappers.ts
@@ -10,7 +10,12 @@ export const ActiveAccounsWrapper = styled.div`
 
   > div {
     border-bottom: 1px solid var(--border-primary-color);
-    padding: 0.65rem 0;
+    padding: 0.5rem 0;
+
+    &:first-child {
+      border: 1px solid;
+      padding-top: 0;
+    }
 
     &:last-child {
       border: none;

diff --git a/src/theme/fonts.scss b/src/theme/fonts.scss
@@ -23,8 +23,8 @@
 }
 
 @font-face {
-  font-family: Unbounded;
+  font-family: Poppins700;
   font-style: normal;
-  font-weight: 800;
-  src: url('./fonts/Unbounded.woff2') format('woff2');
+  font-weight: 700;
+  src: url('./fonts/Poppins700.woff2') format('woff2');
 }
diff --git a/src/theme/fonts/Poppins700.woff2 b/src/theme/fonts/Poppins700.woff2
diff --git a/src/theme/fonts/Unbounded.woff2 b/src/theme/fonts/Unbounded.woff2