feat: Misc styling (#2157)

polkadot-cloud · Jun 17, 2024 · e5f2537 · e5f2537
1 parent 38b279f
commit e5f2537
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 13 deletions.
diff --git a/src/kits/Overlay/index.scss b/src/kits/Overlay/index.scss
@@ -243,7 +243,7 @@
   }
 
   h3 {
-    font-family: InterBold, sans-serif;
+    font-family: InterSemiBold, sans-serif;
     margin: 2rem 0.5rem 1rem;
   }
 }

diff --git a/src/kits/Structure/PageTitle/Wrappers.ts b/src/kits/Structure/PageTitle/Wrappers.ts
@@ -52,7 +52,7 @@ export const PageTitleWrapper = styled.header`
   }
 
   h1 {
-    font-size: 1.75rem;
+    font-size: 2rem;
     font-family: Unbounded, sans-serif;
     font-weight: 700;
     position: relative;
@@ -61,7 +61,7 @@ export const PageTitleWrapper = styled.header`
 
     @media (max-width: ${PageWidthMediumThreshold}px) {
       left: -1rem;
-      transform: scale(0.75);
+      transform: scale(0.85);
     }
 
     transition: all var(--transition-duration);

diff --git a/src/library/Graphs/PayoutBar.tsx b/src/library/Graphs/PayoutBar.tsx
@@ -88,6 +88,9 @@ export const PayoutBar = ({
     ? colors.transparent[mode]
     : colors.secondary[mode];
 
+  // Bar border radius
+  const borderRadius = 4;
+
   const data = {
     labels: graphPayouts.map((item: AnySubscan) => {
       const dateObj = format(fromUnixTime(item.block_timestamp), 'do MMM', {
@@ -104,7 +107,7 @@ export const PayoutBar = ({
         borderColor: colorPayouts,
         backgroundColor: colorPayouts,
         pointRadius: 0,
-        borderRadius: 3,
+        borderRadius,
       },
       {
         order: 2,
@@ -113,7 +116,7 @@ export const PayoutBar = ({
         borderColor: colorPoolClaims,
         backgroundColor: colorPoolClaims,
         pointRadius: 0,
-        borderRadius: 3,
+        borderRadius,
       },
       {
         order: 3,
@@ -122,16 +125,16 @@ export const PayoutBar = ({
         borderColor: colorPayouts,
         backgroundColor: colors.pending[mode],
         pointRadius: 0,
-        borderRadius: 3,
+        borderRadius,
       },
     ],
   };
 
   const options = {
     responsive: true,
     maintainAspectRatio: false,
-    barPercentage: 0.4,
-    maxBarThickness: 13,
+    barPercentage: 0.5,
+    maxBarThickness: 15,
     scales: {
       x: {
         stacked: true,

diff --git a/src/library/StatBoxList/Wrapper.ts b/src/library/StatBoxList/Wrapper.ts
@@ -51,7 +51,7 @@ export const StatBoxWrapper = styled(motion.div)`
       box-shadow: var(--card-shadow);
     }
     display: flex;
-    border-radius: 0.95rem;
+    border-radius: 0.6rem;
     margin-right: 1.25rem;
     padding: 0.9rem 0rem;
     max-height: 5.25rem;
@@ -63,7 +63,8 @@ export const StatBoxWrapper = styled(motion.div)`
     }
 
     h4 {
-      font-family: Inter, sans-serif;
+      color: var(--text-color-secondary);
+      font-family: InterSemiBold, sans-serif;
       flex: 1;
       display: flex;
       flex-flow: row wrap;

diff --git a/src/theme/fonts.scss b/src/theme/fonts.scss
@@ -18,13 +18,13 @@
 @font-face {
   font-family: InterBold;
   font-style: normal;
-  font-weight: 800;
-  src: url('./fonts/Inter800.woff2') format('woff2');
+  font-weight: 900;
+  src: url('./fonts/Inter900.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Unbounded;
   font-style: normal;
-  font-weight: 800;
+  font-weight: 900;
   src: url('./fonts/Unbounded.woff2') format('woff2');
 }
diff --git a/src/theme/fonts/Inter900.woff2 b/src/theme/fonts/Inter900.woff2