polishing: Add consistent background colors matching ethereum.org

mohamedmansour · Jul 24, 2021 · cecfb20 · cecfb20
1 parent acb24a8
commit cecfb20
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 12 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -39,6 +39,9 @@
       *:focus {
         box-shadow: none !important;
       }
+      #root {
+        background: inherit
+      }
     </style>
     </style>
   </head>

diff --git a/frontend/src/organisms/Header.tsx b/frontend/src/organisms/Header.tsx
@@ -19,7 +19,7 @@ export function Note() {
   }
 
   return (
-  <Alert status="info" onClick={hideNote}>
+  <Alert status="info" onClick={hideNote} mt={4}>
     <AlertIcon />
     This crawler only has a partial view of the Ethereum network. This is not a full count of every node on the network.
     <Spacer /><Button variant="ghost" iconSpacing={0} size="sm" leftIcon={<VscClose />} title="Remove note" />

diff --git a/frontend/src/organisms/Loader.tsx b/frontend/src/organisms/Loader.tsx
@@ -8,7 +8,7 @@ interface LoaderProps {
 
 export function Loader(props: LoaderProps) {
   return (
-    <Center position="fixed" top={0} left={0} right={0} bottom={0} color="brand.primaryText">
+    <Center position="fixed" top={0} left={0} right={0} bottom={0} color="brand.primaryText" bg="inherit">
       <VStack>
         <Logo width={100} height={100}/>
         <Text>{props.children}</Text>

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -92,7 +92,7 @@ function Home() {
   }, [history, location])
 
   if (!data) {
-    return <Loader>Processing data</Loader>
+    return <Loader>Loading data...</Loader>
   }
 
   const renderLabelContent: React.FunctionComponent = (props: any) => {

diff --git a/frontend/src/pages/London.tsx b/frontend/src/pages/London.tsx
@@ -83,7 +83,7 @@ export function London() {
   }, [])
 
   if (!data) {
-    return <Loader>Processing data</Loader>
+    return <Loader>Loading data...</Loader>
   }
 
   const renderLabelContent = (props: any): any => {

diff --git a/frontend/src/templates/Layout.tsx b/frontend/src/templates/Layout.tsx
@@ -9,9 +9,9 @@ interface LayoutProps {
 
 export function Layout(props: LayoutProps) {
   return (
-    <VStack minH="100vh" align="flex-start" justify="flex-start">
+    <VStack minH="100vh" align="flex-start" justify="flex-start" bg="inherit">
       <Header />
-      <VStack spacing={LayoutEightPadding} pl={LayoutEightPadding} pr={LayoutEightPadding} pb={LayoutEightPadding} width="100%">
+      <VStack spacing={LayoutEightPadding} pl={LayoutEightPadding} pr={LayoutEightPadding} pb={LayoutEightPadding} width="100%" bg="inherit">
         {props.children}
       </VStack>
       <Footer />

diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
@@ -3,10 +3,12 @@ import { extendTheme } from "@chakra-ui/react"
 
 
 export const theme = extendTheme({
-  global: (props: any) => ({
-    body: {
-      bg: mode('gray-800', 'blue')(props),
-      color: mode('gray.100', '#141214')(props)
-    }
-  })
+  styles: {
+    global: (props: any) => ({
+      body: {
+        bg: mode('white', 'rgb(34, 34, 34)')(props),
+        color: mode('rgb(51, 51, 51)', 'rgb(242, 242, 242)')(props)
+      }
+    })
+  }
 });