Rename to hi-contrast mode; keep network colors

5afe · Jan 10, 2022 · a646499 · a646499
1 parent 8acf01e
commit a646499
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/src/components/AppLayout/Header/components/NetworkLabel.tsx b/src/components/AppLayout/Header/components/NetworkLabel.tsx
@@ -41,7 +41,7 @@ const NetworkLabel = ({
 
   return (
     <StyledCol middle="xs" start="xs" onClick={onClick}>
-      <StyledParagraph size="xs" $theme={chain.theme}>
+      <StyledParagraph size="xs" $theme={chain.theme} className="networkLabel">
         {chain.chainName}
       </StyledParagraph>
     </StyledCol>

diff --git a/src/components/Root/index.module.scss b/src/components/Root/index.module.scss
@@ -47,7 +47,14 @@ body > div:first-child {
 }
 
 html[class="darkMode"],
+html[class="darkMode"] iframe,
 html[class="darkMode"] div[style*="background-image"],
-html[class="darkMode"] img:not([id="safe-logo"]) {
+html[class="darkMode"] svg[color],
+html[class="darkMode"] img:not([id="safe-logo"]),
+html[class="darkMode"] [class*="networkLabel"] {
   filter: invert(1) hue-rotate(180deg);
 }
+
+html[class="darkMode"] [class*="networkLabel"] {
+  outline: 1px solid #333;
+}
diff --git a/src/components/SafeListSidebar/SafeList/index.tsx b/src/components/SafeListSidebar/SafeList/index.tsx
@@ -102,7 +102,7 @@ export const SafeList = ({ onSafeClick }: Props): ReactElement => {
         return (
           <Fragment key={chainId}>
             <ListItem selected>
-              <StyledDot {...theme} />
+              <StyledDot {...theme} className="networkLabel" />
               {chainName}
             </ListItem>
             <MuiList>

diff --git a/src/routes/safe/components/Settings/Appearance/index.tsx b/src/routes/safe/components/Settings/Appearance/index.tsx
@@ -68,11 +68,11 @@ const Appearance = (): ReactElement => {
       </Container>
 
       <Container>
-        <Heading tag="h2">Dark mode (experimental)</Heading>
+        <Heading tag="h2">Theme (experimental)</Heading>
         <FormGroup>
           <FormControlLabel
             control={<Checkbox checked={darkMode} onChange={() => setDarkMode(!darkMode)} name="showShortName" />}
-            label="Dark mode"
+            label="High contrast mode"
           />
         </FormGroup>
       </Container>