Fix: Adjust fontSize, some colors / change the font-family, some svg (#…

…20)
gluwa · Nov 28, 2023 · c5c48e3 · c5c48e3
1 parent 30b940f
commit c5c48e3
Show file tree

Hide file tree

Showing 60 changed files with 5,474 additions and 124 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -7,6 +7,10 @@
 *.md
 *.ico
 *.ttf
+*.woff
+*.woff2
+*.eot
+*.otf
 *.xml
 *.txt
 *.html

diff --git a/src/asset/font/Mondwest-Bold.eot b/src/asset/font/Mondwest-Bold.eot
diff --git a/src/asset/font/Mondwest-Bold.otf b/src/asset/font/Mondwest-Bold.otf
diff --git a/src/asset/font/Mondwest-Bold.ttf b/src/asset/font/Mondwest-Bold.ttf
diff --git a/src/asset/font/Mondwest-Bold.woff b/src/asset/font/Mondwest-Bold.woff
diff --git a/src/asset/font/Mondwest-Bold.woff2 b/src/asset/font/Mondwest-Bold.woff2
diff --git a/src/asset/font/Mondwest-Regular.eot b/src/asset/font/Mondwest-Regular.eot
diff --git a/src/asset/font/Mondwest-Regular.otf b/src/asset/font/Mondwest-Regular.otf
diff --git a/src/asset/font/Mondwest-Regular.ttf b/src/asset/font/Mondwest-Regular.ttf
diff --git a/src/asset/font/Mondwest-Regular.woff b/src/asset/font/Mondwest-Regular.woff
diff --git a/src/asset/font/Mondwest-Regular.woff2 b/src/asset/font/Mondwest-Regular.woff2
diff --git a/src/asset/font/NeueBit-Bold.eot b/src/asset/font/NeueBit-Bold.eot
diff --git a/src/asset/font/NeueBit-Bold.otf b/src/asset/font/NeueBit-Bold.otf
diff --git a/src/asset/font/NeueBit-Bold.ttf b/src/asset/font/NeueBit-Bold.ttf
diff --git a/src/asset/font/NeueBit-Bold.woff b/src/asset/font/NeueBit-Bold.woff
diff --git a/src/asset/font/NeueBit-Bold.woff2 b/src/asset/font/NeueBit-Bold.woff2
diff --git a/src/asset/font/NeueBit-Regular.eot b/src/asset/font/NeueBit-Regular.eot
diff --git a/src/asset/font/NeueBit-Regular.otf b/src/asset/font/NeueBit-Regular.otf
diff --git a/src/asset/font/NeueBit-Regular.ttf b/src/asset/font/NeueBit-Regular.ttf
diff --git a/src/asset/font/NeueBit-Regular.woff b/src/asset/font/NeueBit-Regular.woff
diff --git a/src/asset/font/NeueBit-Regular.woff2 b/src/asset/font/NeueBit-Regular.woff2
diff --git a/src/asset/font/SF-Pro-Text-Medium.eot b/src/asset/font/SF-Pro-Text-Medium.eot
diff --git a/src/asset/font/SF-Pro-Text-Medium.otf b/src/asset/font/SF-Pro-Text-Medium.otf
diff --git a/src/asset/font/SF-Pro-Text-Medium.ttf b/src/asset/font/SF-Pro-Text-Medium.ttf
diff --git a/src/asset/font/SF-Pro-Text-Medium.woff b/src/asset/font/SF-Pro-Text-Medium.woff
diff --git a/src/asset/font/SF-Pro-Text-Medium.woff2 b/src/asset/font/SF-Pro-Text-Medium.woff2
diff --git a/src/asset/font/SF-Pro-Text-Regular.eot b/src/asset/font/SF-Pro-Text-Regular.eot
diff --git a/src/asset/font/SF-Pro-Text-Regular.otf b/src/asset/font/SF-Pro-Text-Regular.otf
diff --git a/src/asset/font/SF-Pro-Text-Regular.ttf b/src/asset/font/SF-Pro-Text-Regular.ttf
diff --git a/src/asset/font/SF-Pro-Text-Regular.woff b/src/asset/font/SF-Pro-Text-Regular.woff
diff --git a/src/asset/font/SF-Pro-Text-Regular.woff2 b/src/asset/font/SF-Pro-Text-Regular.woff2
diff --git a/src/asset/font/SF-Pro-Text-SemiBold.eot b/src/asset/font/SF-Pro-Text-SemiBold.eot
diff --git a/src/asset/font/SF-Pro-Text-SemiBold.otf b/src/asset/font/SF-Pro-Text-SemiBold.otf
diff --git a/src/asset/font/SF-Pro-Text-SemiBold.ttf b/src/asset/font/SF-Pro-Text-SemiBold.ttf
diff --git a/src/asset/font/SF-Pro-Text-SemiBold.woff b/src/asset/font/SF-Pro-Text-SemiBold.woff
diff --git a/src/asset/font/SF-Pro-Text-SemiBold.woff2 b/src/asset/font/SF-Pro-Text-SemiBold.woff2
diff --git a/src/config/pages.tsx b/src/config/pages.tsx
@@ -36,7 +36,7 @@ export const PagesConfig: PagesConfigItems = [
     uri: `${BASE_URL}`,
     hash: '/overview',
     Entry: Overview,
-    icon: () => <OverviewIcon height="20" width="auto" />,
+    icon: () => <OverviewIcon width="13.5" height="11.7" />,
   },
   // Removed temporarily until there is a demand pools
   // {
@@ -45,38 +45,38 @@ export const PagesConfig: PagesConfigItems = [
   // uri: `${BASE_URL}pools`,
   // hash: '/pools',
   // Entry: Pools,
-  // icon: () => (<PoolsIcon height={'20'} width={'auto'}/>)
+  // icon: () => (<PoolsIcon height={'12.6'} width={'12.6'}/>)
   // },
   {
     category: 2,
     key: 'nominate',
     uri: `${BASE_URL}nominate`,
     hash: '/nominate',
     Entry: Nominate,
-    icon: () => <NominateIcon height="20" width="auto" />,
+    icon: () => <NominateIcon width="12.6" height="7.2" />,
   },
   {
     category: 2,
     key: 'payouts',
     uri: `${BASE_URL}payouts`,
     hash: '/payouts',
     Entry: Payouts,
-    icon: () => <PayoutsIcon height="20" width="auto" />,
+    icon: () => <PayoutsIcon width="12.6" height="10.8" />,
   },
   {
     category: 3,
     key: 'validators',
     uri: `${BASE_URL}validators`,
     hash: '/validators',
     Entry: Validators,
-    icon: () => <ValidatorsIcon height="20" width="auto" />,
+    icon: () => <ValidatorsIcon width="12.6" height="12.6" />,
   },
   {
     category: 3,
     key: 'community',
     uri: `${BASE_URL}community`,
     hash: '/community',
     Entry: Community,
-    icon: () => <CommunityIcon height="20" width="auto" />,
+    icon: () => <CommunityIcon width="12.6" height="11.7" />,
   },
 ];
diff --git a/src/config/validators/Creditcoin.tsx b/src/config/validators/Creditcoin.tsx
@@ -1,63 +1,19 @@
 const Creditcoin = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    xmlSpace="preserve"
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+    fill="none"
   >
-    <path d="M120.107 78.0021H108.107V90.0021H120.107V78.0021Z" fill="white" />
-    <path d="M132.003 78.0021H120.003V90.0021H132.003V78.0021Z" fill="white" />
-    <path d="M144.001 78.0021H132.001V90.0021H144.001V78.0021Z" fill="white" />
-    <path d="M156.005 78.0021H144.005V90.0021H156.005V78.0021Z" fill="white" />
-    <path d="M168.003 78.0021H156.003V90.0021H168.003V78.0021Z" fill="white" />
-    <path d="M108.109 78.0021H96.1093V90.0021H108.109V78.0021Z" fill="white" />
-    <path d="M69.0005 70.4979V100.498H99.0006V70.4979H69.0005Z" fill="white" />
-    <path d="M72.005 0H60.005V12H72.005V0Z" fill="white" />
-    <path d="M84.0025 0H72.0025V12H84.0025V0Z" fill="white" />
-    <path d="M96 0H84V12H96V0Z" fill="white" />
-    <path d="M108.001 0H96.001V12H108.001V0Z" fill="white" />
     <path
-      d="M4.57764e-05 96.002L4.57764e-05 108.002H12V96.002H4.57764e-05Z"
+      d="M423.115 350.219C388.501 409.877 323.948 450 250.002 450C139.553 450 50.0003 360.448 50.0003 250C50.0003 139.552 139.553 50 250.002 50C324.014 50 388.633 90.2107 423.225 149.956L466.509 124.89C423.247 50.2414 342.496 0 250.002 0C111.941 0 0 111.94 0 250C0 388.082 111.941 500 250.002 500C342.452 500 423.159 449.824 466.421 375.219L423.115 350.219Z"
       fill="white"
     />
     <path
-      d="M4.57764e-05 84.001L4.57764e-05 96.001H12V84.001H4.57764e-05Z"
+      d="M500.001 225H293.261C284.613 210.075 268.502 200 249.999 200C222.387 200 199.999 222.388 199.999 250C199.999 277.612 222.387 300 249.999 300C268.502 300 284.613 289.925 293.261 275H500.001V225Z"
       fill="white"
     />
-    <path d="M4.57764e-05 72L4.57764e-05 84H12V72H4.57764e-05Z" fill="white" />
-    <path
-      d="M4.57764e-05 59.999L4.57764e-05 71.999H12V59.999H4.57764e-05Z"
-      fill="white"
-    />
-    <path d="M120.006 12.001H108.006V24.001H120.006V12.001Z" fill="white" />
-    <path d="M132.003 12.001H120.003V24.001H132.003V12.001Z" fill="white" />
-    <path d="M48.003 12.001H36.003V24.001H48.003V12.001Z" fill="white" />
-    <path d="M36.0055 24.0024H24.0055V36.0024H36.0055V24.0024Z" fill="white" />
-    <path d="M24.001 36.0021H12.001V48.0021H24.001V36.0021Z" fill="white" />
-    <path d="M24.001 47.9979H12.001V59.9979H24.001V47.9979Z" fill="white" />
-    <path d="M156.005 36.0021H144.005V48.0021H156.005V36.0021Z" fill="white" />
-    <path d="M156.005 47.9979H144.005V59.9979H156.005V47.9979Z" fill="white" />
-    <path d="M144.001 24.0024H132.001V36.0024H144.001V24.0024Z" fill="white" />
-    <path d="M60.0005 12.001H48.0005V24.001H60.0005V12.001Z" fill="white" />
-    <path d="M96.0055 168H108.006V156H96.0055V168Z" fill="white" />
-    <path d="M84.001 168H96.001V156H84.001V168Z" fill="white" />
-    <path d="M72 168H84V156H72V168Z" fill="white" />
-    <path d="M60.0025 168H72.0025V156H60.0025V168Z" fill="white" />
-    <path d="M48.005 155.999H60.005V143.999H48.005V155.999Z" fill="white" />
-    <path d="M36.0005 155.999H48.0005V143.999H36.0005V155.999Z" fill="white" />
-    <path d="M120.001 155.999H132.001V143.999H120.001V155.999Z" fill="white" />
-    <path d="M132.005 143.998H144.005V131.998H132.005V143.998Z" fill="white" />
-    <path d="M144.003 131.998H156.003V119.998H144.003V131.998Z" fill="white" />
-    <path d="M144.003 120.002H156.003V108.002H144.003V120.002Z" fill="white" />
-    <path
-      d="M12.0055 131.998H24.0055V119.998H12.0055L12.0055 131.998Z"
-      fill="white"
-    />
-    <path
-      d="M12.0055 120.002H24.0055V108.002H12.0055L12.0055 120.002Z"
-      fill="white"
-    />
-    <path d="M24.003 143.998H36.003V131.998H24.003V143.998Z" fill="white" />
-    <path d="M108.003 155.999H120.003V143.999H108.003V155.999Z" fill="white" />
   </svg>
 );
 

diff --git a/src/consts.ts b/src/consts.ts
@@ -20,7 +20,7 @@ export const EmptyH256 = new Uint8Array(32);
 export const ModPrefix = stringToU8a('modl');
 export const U32Opts = { bitLength: 32, isLe: true };
 
-export const SideMenuMaximisedWidth = 200;
+export const SideMenuMaximisedWidth = 185;
 export const SideMenuMinimisedWidth = 75;
 export const SideMenuStickyThreshold = 1150;
 export const SectionFullWidthThreshold = 1000;

diff --git a/src/library/BarChart/Wrappers.ts b/src/library/BarChart/Wrappers.ts
@@ -60,7 +60,7 @@ export const Legend = styled.div`
   }
 
   > h4 {
-    font-family: InterSemiBold, sans-serif;
+    font-family: 'SF-Pro-SB', sans-serif;
     display: flex;
     align-items: center;
     font-size: 1.1rem;
@@ -95,7 +95,7 @@ export const Bar = styled.div`
     transition: width 1.5s cubic-bezier(0, 1, 0, 1);
 
     > span {
-      font-family: InterBold, sans-serif;
+      font-family: 'SF-Pro-SB', sans-serif;
       position: absolute;
       left: 0;
       text-overflow: ellipsis;

diff --git a/src/library/Card/Wrappers.ts b/src/library/Card/Wrappers.ts
@@ -72,7 +72,6 @@ export const CardHeaderWrapper = styled.div<CardHeaderWrapperProps>`
  * Used to separate the main modules throughout the app.
  */
 export const CardWrapper = styled.div<CardWrapperProps>`
-  box-shadow: var(--card-shadow);
   background: var(--background-primary);
   border-radius: 1.1rem;
   display: flex;

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: 'NeueBit-R';
     margin-bottom: 1rem;
   }
 

diff --git a/src/library/ListItem/Wrappers.ts b/src/library/ListItem/Wrappers.ts
@@ -237,7 +237,7 @@ export const ValidatorStatusWrapper = styled.div<{
   h5 {
     color: ${(props) =>
       props.$status === 'active'
-        ? 'var(--status-success-color)'
+        ? '#9CFFAA'
         : 'var(--text-color-secondary)'};
     opacity: ${(props) => (props.$status === 'active' ? 0.8 : 0.5)};
     display: flex;

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: 'NeueBit-R', 'sans-serif', sans-serif;
+        font-size: 2.3rem;
         margin: 0;
 
         > button {
@@ -42,6 +42,7 @@ export const TitleWrapper = styled.div<{ $fixed: boolean }>`
       }
       > svg {
         margin-right: 0.9rem;
+        margin-top: -0.3rem;
       }
     }
 

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

diff --git a/src/library/SideMenu/Main.tsx b/src/library/SideMenu/Main.tsx
@@ -142,21 +142,11 @@ export const Main = () => {
         $minimised={sideMenuMinimised}
         onClick={() => window.open(CreditcoinUrl, '_blank')}
       >
-        {sideMenuMinimised ? (
-          <networkData.brand.icon
-            style={{ maxHeight: '100%', width: '2rem' }}
-          />
-        ) : (
-          <>
-            <networkData.brand.logo.svg
-              style={{
-                maxHeight: '100%',
-                height: '100%',
-                width: networkData.brand.logo.width,
-              }}
-            />
-          </>
-        )}
+        <img
+          src="data:image/png;base64,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"
+          alt="Creditcoin"
+          style={{ width: 106, height: 24 }}
+        />
       </LogoWrapper>
 
       {pageConfig.categories.map(

diff --git a/src/library/SideMenu/Primary/Wrappers.ts b/src/library/SideMenu/Primary/Wrappers.ts
@@ -35,19 +35,18 @@ export const Wrapper = styled(motion.div)`
     color: var(--text-color-primary);
     margin-left: 0.25rem;
     margin-right: 0.65rem;
-    width: 1.35rem;
-    height: 1.35rem;
-    &.minimised {
-      margin: 0;
-      width: 1.5rem;
-      height: 1.5rem;
-    }
+    width: 18px;
+    height: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
   .name {
-    font-family: InterSemiBold, sans-serif;
+    font-family: 'SF-Pro-M';
     margin: 0;
     padding: 0;
     line-height: 1.35rem;
+    color: #fff;
   }
   .action {
     color: var(--status-success-color);

diff --git a/src/library/SideMenu/Secondary/Wrappers.ts b/src/library/SideMenu/Secondary/Wrappers.ts
@@ -95,6 +95,9 @@ export const MinimisedWrapper = styled(motion.button)`
 export const IconWrapper = styled.div<{ $minimised: boolean }>`
   margin-left: ${(props) => (props.$minimised ? 0 : '0.25rem')};
   margin-right: ${(props) => (props.$minimised ? 0 : '0.65rem')};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   svg {
     .primary {

diff --git a/src/library/SideMenu/index.tsx b/src/library/SideMenu/index.tsx
@@ -83,7 +83,7 @@ export const SideMenu = () => {
           minimised={sideMenuMinimised}
           icon={{
             Svg: ResourcesSVG,
-            size: sideMenuMinimised ? '1.4em' : '1.2em',
+            size: sideMenuMinimised ? '11.55' : '11.55',
           }}
         />
         <Secondary
@@ -92,7 +92,7 @@ export const SideMenu = () => {
           minimised={sideMenuMinimised}
           icon={{
             Svg: FeedbackSVG,
-            size: sideMenuMinimised ? '1.4em' : '1.2em',
+            size: sideMenuMinimised ? '12.6' : '12.6',
           }}
         />
         <Separator />
@@ -103,7 +103,7 @@ export const SideMenu = () => {
           onClick={() => openModal({ key: 'Networks' })}
           icon={{
             Svg: CreditcoinSVG,
-            size: networkData.brand.inline.size,
+            size: '12.6',
           }}
           minimised={sideMenuMinimised}
           action={

diff --git a/src/library/Stat/Wrapper.ts b/src/library/Stat/Wrapper.ts
@@ -43,7 +43,7 @@ export const Wrapper = styled.div<{ $isAddress?: boolean }>`
 
     .text {
       padding-left: ${(props) => (props.$isAddress ? '3rem' : 0)};
-      font-family: InterBold, sans-serif;
+      font-family: 'SF-Pro-SB', sans-serif;
       color: var(--text-color-primary);
       padding-top: 0.25rem;
       position: absolute;

diff --git a/src/library/StatBoxList/Wrapper.ts b/src/library/StatBoxList/Wrapper.ts
@@ -45,11 +45,7 @@ export const StatBoxWrapper = styled(motion.div)`
 
   .content {
     background: var(--background-primary);
-    box-shadow: var(--card-shadow-secondary);
 
-    @media (max-width: 799px) {
-      box-shadow: var(--card-shadow);
-    }
     display: flex;
     border-radius: 0.95rem;
     margin-right: 1.25rem;
@@ -149,7 +145,7 @@ export const TextTitleWrapper = styled.div<{ $primary?: boolean }>`
     props.$primary === true
       ? 'var(--accent-color-primary)'
       : 'var(--text-color-primary)'};
-  font-family: InterBold, sans-serif;
+  font-family: 'SF-Pro-SB', sans-serif;
   display: flex;
   flex-flow: row wrap;
   margin-bottom: 0.35rem;
@@ -178,7 +174,7 @@ export const TimeLeftWrapper = styled.div<{ primary?: boolean }>`
     props.primary === true
       ? 'var(--accent-color-primary)'
       : 'var(--text-color-primary)'};
-  font-family: InterBold, sans-serif;
+  font-family: 'SF-Pro-SB', sans-serif;
   display: flex;
   flex-flow: row wrap;
   font-size: 1.2rem;
@@ -190,7 +186,7 @@ export const TimeLeftWrapper = styled.div<{ primary?: boolean }>`
 
   span {
     color: var(--text-color-primary);
-    font-family: InterSemiBold, sans-serif;
+    font-family: 'SF-Pro-SB', sans-serif;
     font-size: 0.95rem;
     margin-left: 0.3rem;
     margin-top: 0.1rem;

diff --git a/src/modals/Accounts/Wrappers.ts b/src/modals/Accounts/Wrappers.ts
@@ -21,7 +21,7 @@ export const AccountWrapper = styled.div`
   > div {
     background: var(--button-primary-background);
     color: var(--text-color-primary);
-    font-family: InterSemiBold, sans-serif;
+    font-family: 'SF-Pro-SB', sans-serif;
     border: 1px solid transparent;
     display: flex;
     align-items: flex-start;
@@ -76,6 +76,7 @@ export const AccountWrapper = styled.div`
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            color: #fff;
 
             > span {
               opacity: 0.7;

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