feat: update header logo (#2161)

polkadot-cloud · Jun 21, 2024 · e640d21 · e640d21
1 parent 26085ed
commit e640d21
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 89 deletions.
diff --git a/src/config/networks.ts b/src/config/networks.ts
@@ -3,13 +3,10 @@
 
 import KusamaIconSVG from 'img/kusama_icon.svg?react';
 import KusamaInlineSVG from 'img/kusama_inline.svg?react';
-import KusamaLogoSVG from 'img/kusama_logo.svg?react';
 import PolkadotIconSVG from 'img/polkadot_icon.svg?react';
 import PolkadotInlineSVG from 'img/polkadot_inline.svg?react';
-import PolkadotLogoSVG from 'img/polkadot_logo.svg?react';
 import WestendIconSVG from 'img/westend_icon.svg?react';
 import WestendInlineSVG from 'img/westend_inline.svg?react';
-import WestendLogoSVG from 'img/westend_logo.svg?react';
 import PolkadotTokenSVG from 'config/tokens/svg/DOT.svg?react';
 import KusamaTokenSVG from 'config/tokens/svg/KSM.svg?react';
 import WestendTokenSVG from 'config/tokens/svg/WND.svg?react';
@@ -78,10 +75,6 @@ export const NetworkList: Networks = {
     brand: {
       icon: PolkadotIconSVG,
       token: PolkadotTokenSVG,
-      logo: {
-        svg: PolkadotLogoSVG,
-        width: '7.2em',
-      },
       inline: {
         svg: PolkadotInlineSVG,
         size: '1.05em',
@@ -139,10 +132,6 @@ export const NetworkList: Networks = {
     brand: {
       icon: KusamaIconSVG,
       token: KusamaTokenSVG,
-      logo: {
-        svg: KusamaLogoSVG,
-        width: '7.2em',
-      },
       inline: {
         svg: KusamaInlineSVG,
         size: '1.35em',
@@ -199,10 +188,6 @@ export const NetworkList: Networks = {
     brand: {
       icon: WestendIconSVG,
       token: WestendTokenSVG,
-      logo: {
-        svg: WestendLogoSVG,
-        width: '7.1em',
-      },
       inline: {
         svg: WestendInlineSVG,
         size: '0.96em',

diff --git a/src/consts.ts b/src/consts.ts
@@ -7,7 +7,6 @@ import { stringToU8a } from '@polkadot/util';
  * Global Constants
  */
 export const DappName = 'Polkadot Staking Dashboard';
-export const PolkadotUrl = 'https://polkadot.network/features/staking/';
 export const ManualSigners = ['ledger', 'vault'];
 
 /*
@@ -22,7 +21,7 @@ export const U32Opts = { bitLength: 32, isLe: true };
  */
 
 export const MaxPageWidth = 1450;
-export const SideMenuMaximisedWidth = 185;
+export const SideMenuMaximisedWidth = 195;
 export const SideMenuMinimisedWidth = 75;
 export const SectionFullWidthThreshold = 1000;
 export const PageWidthSmallThreshold = 825;

diff --git a/src/img/kusama_logo.svg b/src/img/kusama_logo.svg
diff --git a/src/img/polkadot_logo.svg b/src/img/polkadot_logo.svg
diff --git a/src/img/westend_logo.svg b/src/img/westend_logo.svg
diff --git a/src/library/Headers/Wrappers.ts b/src/library/Headers/Wrappers.ts
@@ -14,9 +14,9 @@ export const Wrapper = styled.div`
   justify-content: flex-end;
   align-items: center;
   align-content: center;
-  padding: 0 1.25rem;
+  padding: 0 1.05rem;
   transition: all var(--transition-duration);
-  margin: 0.5rem 0;
+  margin: 0.3rem 0;
   height: 4rem;
   z-index: 6;
 

diff --git a/src/library/SideMenu/Main.tsx b/src/library/SideMenu/Main.tsx
@@ -5,7 +5,6 @@ import { Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { PageCategories, PagesConfig } from 'config/pages';
-import { PolkadotUrl } from 'consts';
 import { useBonded } from 'contexts/Bonded';
 import { useSetup } from 'contexts/Setup';
 import type { SetupContextInterface } from 'contexts/Setup/types';
@@ -127,28 +126,29 @@ export const Main = () => {
 
   return (
     <>
-      <LogoWrapper
-        $minimised={sideMenuMinimised}
-        onClick={() => window.open(PolkadotUrl, '_blank')}
-      >
+      <LogoWrapper $minimised={sideMenuMinimised}>
         {sideMenuMinimised ? (
           <networkData.brand.icon
-            style={{ maxHeight: '100%', width: '2rem' }}
+            style={{ maxHeight: '100%', width: '1.8rem' }}
           />
         ) : (
-          <networkData.brand.logo.svg
-            style={{
-              maxHeight: '100%',
-              height: '100%',
-              width: networkData.brand.logo.width,
-            }}
-          />
+          <>
+            <networkData.brand.icon
+              style={{
+                maxHeight: '100%',
+                height: '100%',
+                width: '1.5rem',
+              }}
+            />
+
+            <span>Staking Dashboard</span>
+          </>
         )}
       </LogoWrapper>
 
       {pageConfig.categories.map(
         ({ id: categoryId, key: categoryKey }: PageCategory) => (
-          <Fragment key={`sidemenu_category_${categoryId}`}>
+          <div className="inner" key={`sidemenu_category_${categoryId}`}>
             {/* display heading if not `default` (used for top links) */}
             {categoryKey !== 'default' && (
               <Heading title={t(categoryKey)} minimised={sideMenuMinimised} />
@@ -171,7 +171,7 @@ export const Main = () => {
                 </Fragment>
               )
             )}
-          </Fragment>
+          </div>
         )
       )}
     </>

diff --git a/src/library/SideMenu/Secondary/Wrappers.ts b/src/library/SideMenu/Secondary/Wrappers.ts
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import type { MinimisedProps } from '../types';
 
 export const Wrapper = styled(motion.button)<MinimisedProps>`
-  border: 1px solid var(--border-primary-color);
+  border: 1px solid var(--border-secondary-color);
   border-radius: 0.7rem;
   height: 3.2rem;
   display: flex;
@@ -18,7 +18,7 @@ export const Wrapper = styled(motion.button)<MinimisedProps>`
   width: 100%;
 
   .name {
-    color: var(--text-color-primary);
+    color: var(--text-color-secondary);
     font-family: InterSemiBold, sans-serif;
     font-size: 1.1rem;
   }

diff --git a/src/library/SideMenu/Wrapper.ts b/src/library/SideMenu/Wrapper.ts
@@ -12,17 +12,19 @@ import type { MinimisedProps } from './types';
 export const Wrapper = styled.div<MinimisedProps>`
   border-radius: ${(props) => (props.$minimised ? '0.7rem' : 0)};
   background: none;
-  padding: 1rem 1rem 1rem 1.25rem;
+  padding: 0.5rem 1rem 0.5rem 1.25rem;
   overflow: auto;
   flex-grow: 1;
-  margin: 0.75rem 0 3.35rem 0rem;
   display: flex;
   flex-flow: column nowrap;
   backdrop-filter: blur(4px);
   width: ${(props) =>
     props.$minimised
       ? `${SideMenuMinimisedWidth}px`
       : `${SideMenuMaximisedWidth}px`};
+  padding: ${(props) =>
+    props.$minimised ? `0.5rem 1rem 0.5rem 1rem` : `0rem 1rem 1rem 1rem`};
+  margin: 0.75rem 0 3.35rem 0rem;
 
   &::-webkit-scrollbar {
     display: none;
@@ -46,6 +48,7 @@ export const Wrapper = styled.div<MinimisedProps>`
       flex-flow: ${(props) => (props.$minimised ? 'column wrap' : 'row wrap')};
       align-items: center;
       padding-top: 0.5rem;
+      padding-left: ${(props) => (props.$minimised ? 0 : '0.25rem')};
 
       button {
         color: var(--text-color-secondary);
@@ -64,22 +67,36 @@ export const Wrapper = styled.div<MinimisedProps>`
         }
       }
     }
+
+    > .inner {
+      padding-left: ${(props) => (props.$minimised ? '0.1rem' : '0.25rem')};
+    }
   }
 `;
 
-export const LogoWrapper = styled.button<MinimisedProps>`
+export const LogoWrapper = styled.div<MinimisedProps>`
   display: flex;
   flex-flow: row wrap;
   justify-content: ${(props) => (props.$minimised ? 'center' : 'flex-start')};
+  align-items: center;
   width: 100%;
   height: 2.8rem;
-  padding: ${(props) => (props.$minimised ? '0' : '0.4rem 0.5rem')};
-  margin-bottom: ${(props) => (props.$minimised ? '1.5rem' : '1rem')};
+  padding: ${(props) => (props.$minimised ? '0' : '0.4rem 0 0.4rem 0.5rem')};
+  margin-bottom: ${(props) => (props.$minimised ? '1.5rem' : '1.25rem')};
   position: relative;
+  text-transform: uppercase;
 
   ellipse {
     fill: var(--accent-color-primary);
   }
+
+  > span {
+    font-family: InterSemiBold, sans-serif;
+    color: var(--accent-color-primary);
+    margin-left: 0.55rem;
+    font-size: 1.1rem;
+    background-clip: text;
+  }
 `;
 
 export const Separator = styled.div`

diff --git a/src/library/SideMenu/index.tsx b/src/library/SideMenu/index.tsx
@@ -83,45 +83,48 @@ export const SideMenu = () => {
       <Wrapper ref={ref} $minimised={sideMenuMinimised}>
         <section>
           <Main />
-          <Heading title={t('support')} minimised={sideMenuMinimised} />
-          <Secondary
-            onClick={() => {
-              openHelp(null);
-            }}
-            name={t('resources')}
-            minimised={sideMenuMinimised}
-            icon={{
-              Svg: InfoSVG,
-              size: sideMenuMinimised ? '1.4em' : '1.2em',
-            }}
-          />
-          <Secondary
-            onClick={() => openModal({ key: 'GoToFeedback' })}
-            name={t('support')}
-            minimised={sideMenuMinimised}
-            icon={{
-              Svg: ForumSVG,
-              size: sideMenuMinimised ? '1.4em' : '1.2em',
-            }}
-          />
-          <Separator />
-          <Heading title={t('network')} minimised={sideMenuMinimised} />
-          <Secondary
-            classes={[apiStatusClass]}
-            name={capitalizeFirstLetter(network)}
-            onClick={() => openModal({ key: 'Networks' })}
-            icon={{
-              Svg: networkData.brand.inline.svg,
-              size: networkData.brand.inline.size,
-            }}
-            minimised={sideMenuMinimised}
-            action={
-              <ConnectionSymbol
-                className={apiStatusClass}
-                style={{ opacity: 0.7 }}
-              />
-            }
-          />
+          <div className="inner">
+            <Heading title={t('support')} minimised={sideMenuMinimised} />
+            <Secondary
+              onClick={() => {
+                openHelp(null);
+              }}
+              name={t('resources')}
+              minimised={sideMenuMinimised}
+              icon={{
+                Svg: InfoSVG,
+                size: sideMenuMinimised ? '1.4em' : '1.2em',
+              }}
+            />
+            <Secondary
+              onClick={() => openModal({ key: 'GoToFeedback' })}
+              name={t('support')}
+              minimised={sideMenuMinimised}
+              icon={{
+                Svg: ForumSVG,
+                size: sideMenuMinimised ? '1.4em' : '1.2em',
+              }}
+            />
+
+            <Separator />
+            <Heading title={t('network')} minimised={sideMenuMinimised} />
+            <Secondary
+              classes={[apiStatusClass]}
+              name={capitalizeFirstLetter(network)}
+              onClick={() => openModal({ key: 'Networks' })}
+              icon={{
+                Svg: networkData.brand.inline.svg,
+                size: networkData.brand.inline.size,
+              }}
+              minimised={sideMenuMinimised}
+              action={
+                <ConnectionSymbol
+                  className={apiStatusClass}
+                  style={{ opacity: 0.7 }}
+                />
+              }
+            />
+          </div>
         </section>
 
         <section>

diff --git a/src/types.ts b/src/types.ts
@@ -77,12 +77,6 @@ export interface Network {
     token: FunctionComponent<
       SVGProps<SVGSVGElement> & { title?: string | undefined }
     >;
-    logo: {
-      svg: FunctionComponent<
-        SVGProps<SVGSVGElement> & { title?: string | undefined }
-      >;
-      width: string;
-    };
     inline: {
       svg: FunctionComponent<
         SVGProps<SVGSVGElement> & { title?: string | undefined }