diff --git a/src/kits/Overlay/index.scss b/src/kits/Overlay/index.scss index 6044188463..4084345996 100644 --- 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 index 7a4a6238fa..e77fb47347 100644 --- 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 index 9aba66c76c..1cbca86b6a 100644 --- 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,7 +125,7 @@ export const PayoutBar = ({ borderColor: colorPayouts, backgroundColor: colors.pending[mode], pointRadius: 0, - borderRadius: 3, + borderRadius, }, ], }; @@ -130,8 +133,8 @@ export const PayoutBar = ({ 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 index d8345f3a80..8db4060326 100644 --- 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 index 566433b38f..c3685bbdf7 100644 --- 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 new file mode 100644 index 0000000000..0d1f71863f Binary files /dev/null and b/src/theme/fonts/Inter900.woff2 differ