Tweaks and load theme form function

Author: alvarlagerlof

Diff for: .prettierrc

@@ -5,5 +5,5 @@
     "bracketSpacing": true,
     "jsxBracketSameLine": false,
     "arrowParens": "avoid",
-    "printWidth": 120
+    "printWidth": 100
 }

Diff for: components/Form.js

@@ -20,10 +20,6 @@ export default function Form({ formID }) {
     font: "serif",
   };
 
-  // const theme = {
-  //   colorTheme: "dark",
-  // };
-
   if (isLoading) {
     return (
       <Wrapper>
@@ -44,7 +40,7 @@ export default function Form({ formID }) {
   }
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={formData.theme}>
       <Wrapper>
         <Navbar />
 

Diff for: components/Tag.js

@@ -1,9 +1,10 @@
 import styled from "styled-components";
+import { getTagBackground, getTextColor } from "./styles/themeValues";
 
 const Tag = styled.p`
   display: inline-block;
-  background: ${props => (props.theme.colorTheme == "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)")};
-  color: ${props => (props.theme.colorTheme == "dark" ? "white" : "black")};
+  background: ${props => getTagBackground(props)};
+  color: ${props => getTextColor(props)};
   padding: 2px 6px;
   border-radius: 4px;
 `;

Diff for: components/styles/themeValues.js

@@ -62,4 +62,21 @@ function getInputColors(props) {
   }
 }
 
-export { getTextColor, getBackgroundColor, getBorderColor, getFontFamily, getBoldFontWeight, getInputColors };
+function getTagBackground({ theme: { colorTheme } }) {
+  switch (colorTheme) {
+    case "light":
+      return "rgba(0, 0, 0, 0.1)";
+    case "dark":
+      return "rgba(255, 255, 255, 0.1)";
+  }
+}
+
+export {
+  getTextColor,
+  getBackgroundColor,
+  getBorderColor,
+  getFontFamily,
+  getBoldFontWeight,
+  getInputColors,
+  getTagBackground,
+};