fix: mode list

ricardocasares · Oct 31, 2020 · 3eda767 · 3eda767
1 parent ba1d675
commit 3eda767
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
@@ -1,10 +1,14 @@
 import styled from "@emotion/styled";
 
 export const GhostButton = styled.button`
+  text-align: left;
   border: none;
   background: transparent;
-  appearance: none;
+  color: var(--foreground);
   padding: 0;
   margin: 0;
   line-height: 0;
+  display: block;
+  width: 100%;
+  font-size: var(--sz4);
 `;
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -29,12 +29,11 @@ export const Settings = () => {
       >
         {["dark", "light", "system"].map((mode) => (
           <li key={mode}>
-            <ToggleItem>
-              {mode}
-              <GhostButton onClick={() => setTheme(mode)}>
-                <RightLeftToggle active={theme === mode} />
-              </GhostButton>
-            </ToggleItem>
+            <GhostButton onClick={() => setTheme(mode)}>
+              <ToggleItem>
+                {mode} <RightLeftToggle active={theme === mode} />
+              </ToggleItem>
+            </GhostButton>
           </li>
         ))}
       </Stack>