From d504f047ab3a011991f92b473d71719bd238148b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Tue, 29 Nov 2022 09:44:53 -0300 Subject: [PATCH] fix: dark mode body colors (#61) * chore: update textStyles * markdown text color styles Co-authored-by: Corwin Smith --- src/components/UI/downloads/DownloadsHero.tsx | 3 +- src/components/UI/homepage/HomeHero.tsx | 2 +- src/pages/index.tsx | 23 ++++++------- src/theme/foundations/textStyles.ts | 33 ++++++++++++------- 4 files changed, 35 insertions(+), 26 deletions(-) diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 4d53876c27..8a00452cc2 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -54,11 +54,12 @@ export const DownloadsHero: FC = ({ fontFamily='"JetBrains Mono", monospace' lineHeight='21px' mb={{ base: '4 !important', md: '8 !important' }} + color='body' > {currentBuild} - + You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you're looking to install Geth and/or associated tools diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx index cb1ca0d666..d3df7fa563 100644 --- a/src/components/UI/homepage/HomeHero.tsx +++ b/src/components/UI/homepage/HomeHero.tsx @@ -54,7 +54,7 @@ export const HomeHero: FC = () => { - + Read our documentation diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d1b710a248..1ca4bb54fd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -26,10 +26,7 @@ import { const HomePage: NextPage = ({}) => { return ( <> - +
@@ -45,7 +42,7 @@ const HomePage: NextPage = ({}) => { Svg={GopherHomeFront} ariaLabel='Gopher greeting' > - + Geth (go-ethereum) is a{' '} Go @@ -57,13 +54,13 @@ const HomePage: NextPage = ({}) => { - a gateway into the decentralized web. - + Geth has been a core part of Etheruem since the very beginning. Geth was one of the original Ethereum implementations making it the most battle-hardened and tested client. - + Geth is an Ethereum{' '} execution client @@ -76,7 +73,7 @@ const HomePage: NextPage = ({}) => { . - + Running Geth alongside a consensus client turns a computer into an Ethereum node. @@ -85,7 +82,7 @@ const HomePage: NextPage = ({}) => { {/* SECTION: What is Ethereum (has different styles than the other sections so it uses a different component) */} - + Ethereum is a technology for building apps and organizations, holding assets, transacting and communicating without being controlled by a central authority. It is the base of a new, decentralized internet. @@ -96,13 +93,13 @@ const HomePage: NextPage = ({}) => { {/* SECTION: Why run a node (has different styles than the other sections so it uses a different component) */} - + Running your own node enables you to use Ethereum in a truly private, self-sufficient and trustless manner. You don't need to trust information you receive because you can verify the data yourself using your Geth instance. - + “Don't trust, verify” @@ -117,7 +114,7 @@ const HomePage: NextPage = ({}) => { linkLabel='Read our contribution guidelines' buttonHref={CONTRIBUTING_PAGE} > - + We welcome contributions from anyone on the internet, and are grateful for even the smallest of fixes! If you'd like to contribute to the Geth source code, please fork the{' '} @@ -137,7 +134,7 @@ const HomePage: NextPage = ({}) => { linkLabel='Read more about the Ethereum Foundation' buttonHref={ETHEREUM_FOUNDATION_URL} > - + The Geth team comprises 10 developers distributed across the world. The Geth team is funded exclusively by The Ethereum Foundation. diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index 817d6c92e2..fb95731677 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -20,49 +20,57 @@ export const textStyles = { fontWeight: 700, fontSize: { base: '1.875rem', md: '2.125rem' }, letterSpacing: '0.04em', - lineHeight: 'normal' + lineHeight: 'normal', + color: 'body' }, header2: { fontFamily: 'heading', fontSize: { base: '1.5rem', md: '1.75rem' }, letterSpacing: '0.04em', - lineHeight: 'normal' + lineHeight: 'normal', + color: 'body' }, header3: { fontFamily: 'heading', fontSize: { base: '1.25rem', md: '1.375rem' }, letterSpacing: '0.04em', - lineHeight: 'normal' + lineHeight: 'normal', + color: 'body' }, header4: { fontFamily: 'heading', fontSize: '1.125rem', letterSpacing: '0.04em', - lineHeight: 'normal' + lineHeight: 'normal', + color: 'body' }, header5: { fontFamily: 'heading', fontSize: '1rem', letterSpacing: '0.02em', - lineHeight: 'normal' + lineHeight: 'normal', + color: 'body' }, header6: { fontFamily: 'heading', fontSize: '0.875rem', letterSpacing: '0.02em', - lineHeight: 'normal' + lineHeight: 'normal', + color: 'body' }, 'header-font': { fontFamily: 'heading', fontWeight: 700, - fontSize: { base: '0.86rem', sm: '1rem' } + fontSize: { base: '0.86rem', sm: '1rem' }, + color: 'body' }, 'homepage-description': { fontFamily: 'heading', fontWeight: 700, lineHeight: '21px', letterSpacing: '0.05em', - textAlign: { base: 'center', md: 'left' } + textAlign: { base: 'center', md: 'left' }, + color: 'body' }, 'homepage-primary-label': { fontFamily: 'heading', @@ -79,7 +87,8 @@ export const textStyles = { }, 'quick-link-text': { fontFamily: 'body', - lineHeight: '26px' + lineHeight: '26px', + color: 'body' }, 'quick-link-label': { fontFamily: 'heading', @@ -93,7 +102,8 @@ export const textStyles = { }, 'hero-text-small': { fontSize: '13px', - fontFamily: 'body' + fontFamily: 'body', + color: 'body' }, 'footer-link-label': { fontFamily: '"JetBrains Mono", monospace', @@ -106,7 +116,8 @@ export const textStyles = { fontFamily: 'body', lineHeight: '22px', fontWeight: 400, - fontSize: '12px' + fontSize: '12px', + color: 'body' }, 'downloads-button-label': { fontFamily: 'heading',