refactor: clean up settings

apps/web/src/components/accent-item/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Flex } from "rebass";
+import * as Icon from "../icons";
+import { useStore as useThemeStore } from "../../stores/theme-store";
+
+function AccentItem(props) {
+  const { code, label } = props;
+  const setAccent = useThemeStore(store => store.setAccent);
+  const accent = useThemeStore(store => store.accent);
+
+  return (
+    <Flex
+      variant="rowCenter"
+      sx={{ position: "relative" }}
+      onClick={() => setAccent(code)}
+      key={label}
+    >
+      {code === accent && (
+        <Icon.Checkmark
+          sx={{
+            position: "absolute",
+            zIndex: 1,
+            cursor: "pointer"
+          }}
+          color="static"
+          size={20}
+        />
+      )}
+      <Icon.Circle size={40} sx={{ cursor: "pointer" }} color={code} />
+    </Flex>
+  );
+}
+export default AccentItem;

apps/web/src/theme/accents.js

@@ -0,0 +1,13 @@
+const accents = [
+  { label: "red", code: "#ed2d37" },
+  { label: "orange", code: "#ec6e05" },
+  { label: "yellow", code: "yellow" },
+  { label: "green", code: "green" },
+  { label: "blue", code: "blue" },
+  { label: "purple", code: "purple" },
+  { label: "gray", code: "gray" },
+  { label: "lightblue", code: "#46F0F0" },
+  { label: "indigo", code: "#F032E6" },
+  { label: "lightpink", code: "#FABEBE" }
+];
+export default accents;

apps/web/src/theme/variants/button.js

@@ -62,6 +62,7 @@ class List {
       variant: "buttons.tertiary",
       border: "0px solid",
       borderBottom: "1px solid",
+      borderBottomColor: "border",
       borderRadius: 0,
       p: 2
     };

apps/web/src/theme/variants/text.js

@@ -5,6 +5,7 @@ class TextFactory {
       heading: new Heading(),
       title: new Title(),
       body: new Body(),
+      subBody: new SubBody(),
       error: new Error()
     };
   }
@@ -46,6 +47,12 @@ class Body {
   }
 }
 
+class SubBody {
+  constructor() {
+    return { variant: "text.default", fontSize: "subBody" };
+  }
+}
+
 class Error {
   constructor() {
     return { variant: "text.default", fontSize: "subBody", color: "error" };

apps/web/src/views/Settings.js

@@ -1,23 +1,21 @@
 import React, { useEffect } from "react";
 import { Box, Button, Flex, Text } from "rebass";
 import * as Icon from "../components/icons";
-import "../app.css";
 import { useStore as useUserStore } from "../stores/user-store";
 import { useStore as useThemeStore } from "../stores/theme-store";
+import AccentItem from "../components/accent-item";
+import accents from "../theme/accents";
 
 function Settings(props) {
   const theme = useThemeStore(store => store.theme);
-  const accent = useThemeStore(store => store.accent);
   const toggleNightMode = useThemeStore(store => store.toggleNightMode);
-  const setAccent = useThemeStore(store => store.theme);
   const user = useUserStore(store => store.user);
   const isLoggedIn = useUserStore(store => store.isLoggedIn);
 
   return (
-    <Flex variant="columnFill">
+    <Flex variant="columnFill" mx={2}>
       <Flex
         bg="shade"
-        mx={2}
         p={2}
         sx={{ borderRadius: "default", cursor: "pointer" }}
         onClick={() => props.navigator.navigate("account")}
@@ -26,149 +24,78 @@ function Settings(props) {
           variant="columnCenter"
           bg="primary"
           mr={2}
+          size={40}
           sx={{
-            width: 40,
-            height: 40,
             borderRadius: 80
           }}
         >
           <Icon.User color="static" />
         </Flex>
-        <Flex variant="columnCenter">
+        <Flex variant="columnCenter" alignItems="flex-start">
           {isLoggedIn ? (
             <>
               <Text variant="title">{user.username}</Text>
-              <Text fontSize="subBody">{user.email}</Text>
+              <Text variant="subBody">{user.email}</Text>
             </>
           ) : (
             <>
-              <Text fontSize="subBody" color="gray">
-                You are not logged in
-              </Text>
-              <Text fontSize="body" color="primary">
+              <Text variant="subBody">You are not logged in</Text>
+              <Text variant="body" color="primary">
                 Login to sync notes.
               </Text>
             </>
           )}
         </Flex>
       </Flex>
-      <Box
-        px={2}
-        mt={2}
-        fontSize="subtitle"
-        fontFamily="heading"
-        fontWeight="bold"
-        color="primary"
-      >
+      <Text my={2} variant="title" color="primary">
         Appearance
-      </Box>
+      </Text>
       <Box
         sx={{
           borderBottom: "1px Solid",
           borderColor: "border",
-          "&:hover": { borderColor: "primary" }
+          ":hover": { borderColor: "primary" }
         }}
-        py={2}
       >
         <Flex
           flexWrap="wrap"
+          justifyContent="left"
+          mb={2}
+          p={1}
+          bg="shade"
           sx={{
-            marginBottom: 2,
             borderRadius: "default"
           }}
-          justifyContent="left"
-          mx={2}
-          bg="shade"
-          p={1}
         >
-          {[
-            { label: "red", code: "#ed2d37" },
-            { label: "orange", code: "#ec6e05" },
-            { label: "yellow", code: "yellow" },
-            { label: "green", code: "green" },
-            { label: "blue", code: "blue" },
-            { label: "purple", code: "purple" },
-            { label: "gray", code: "gray" },
-            { label: "lightblue", code: "#46F0F0" },
-            { label: "indigo", code: "#F032E6" },
-            { label: "lightpink", code: "#FABEBE" }
-          ].map(color => (
-            <Flex
-              variant="rowCenter"
-              sx={{ position: "relative" }}
-              onClick={() => {
-                setAccent(color.code);
-              }}
-            >
-              {color.code === accent && (
-                <Icon.Checkmark
-                  sx={{
-                    position: "absolute",
-                    cursor: "pointer"
-                  }}
-                  color="static"
-                  size={20}
-                />
-              )}
-              <Icon.Circle
-                size={40}
-                sx={{ cursor: "pointer" }}
-                color={color.code}
-              />
-            </Flex>
+          {accents.map(color => (
+            <AccentItem code={color.code} label={color.label} />
           ))}
         </Flex>
         <Flex
-          flexDirection="row"
-          px={2}
           justifyContent="space-between"
           alignItems="center"
           onClick={() => toggleNightMode()}
+          py={2}
         >
           <Text fontSize="body">Dark Mode</Text>
           {theme === "dark" ? <Icon.Check /> : <Icon.CircleEmpty />}
         </Flex>
       </Box>
-      <Box
-        px={2}
-        mt={2}
-        fontSize="subtitle"
-        fontFamily="heading"
-        fontWeight="bold"
-        color="primary"
-      >
+      <Text my={2} variant="title" color="primary">
         Other
-      </Box>
-      <Button
-        variant="setting"
-        onClick={() => {
-          props.navigator.navigate("TOS", {
-            title: Titles.TOS
-          });
-        }}
-      >
-        {Titles.TOS}
-      </Button>
-      <Button
-        variant="setting"
-        onClick={() => {
-          props.navigator.navigate("privacy", {
-            title: Titles.privacy
-          });
-        }}
-      >
-        {Titles.privacy}
-      </Button>
-      <Button
-        variant="setting"
-        onClick={() => {
-          props.navigator.navigate("about", {
-            title: Titles.about
-          });
-        }}
-      >
-        {Titles.about}
-      </Button>
+      </Text>
+      {["Terms of Service", "Privacy Policy", "About"].map(title => (
+        <Button
+          variant="list"
+          onClick={() =>
+            props.navigator.navigate("TOS", {
+              title
+            })
+          }
+        >
+          {title}
+        </Button>
+      ))}
     </Flex>
   );
 }
@@ -184,13 +111,4 @@ function SettingsContainer() {
   return <Flex variant="columnFill" className="SettingsNavigator" />;
 }
 
-const Titles = {
-  general: "General",
-  account: "Account",
-  accent: "Accent Color",
-  TOS: "Terms of Service",
-  privacy: "Privacy Policy",
-  about: "About"
-};
-
 export { Settings, SettingsContainer };