Material ui theme injection

allsouza · Jan 25, 2021 · f6920d7 · f6920d7
1 parent 72b671e
commit f6920d7
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 48 deletions.
diff --git a/frontend/components/App.jsx b/frontend/components/App.jsx
@@ -12,6 +12,7 @@ import DarkThemeProvider from './DarkThemeProvider';
 import styled from 'styled-components';
 import { backgroundColor, textColor } from './DarkThemeProvider';
 
+
 const Container = styled.div`
     display: flex;
     flex-direction: column;
@@ -49,8 +50,6 @@ export default function App() {
         </Component>
         <Footer />
       </Container>
-    </DarkThemeProvider>  
-
-
+    </DarkThemeProvider>
   );
 }
diff --git a/frontend/components/DarkThemeProvider.js b/frontend/components/DarkThemeProvider.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { ThemeProvider } from "styled-components";
+import { MuiThemeProvider, StylesProvider, createMuiTheme } from "@material-ui/core/styles";
 import theme from 'styled-theming';
 
 
@@ -24,12 +25,45 @@ export const footerColor = theme("theme", {
     dark: "#22303C"
 });
 
+export const cardColor = theme("theme", {
+    light: "#000000",
+    dark: "#22303c"
+});
+
+const dark = createMuiTheme({
+    palette: {
+        backgroundColor: "#15202B",
+        textColor: "#ffffff",
+        buttonColor: "#d3d3d3",
+        footerColor: "#22303c",
+        cardColor: "#22303C"
+    },
+});
+
+const light = createMuiTheme({
+    palette: {
+        backgroundColor: "#fef9f8",
+        textColor: "#000000",
+        buttonColor: "#A9A9A9",
+        footerColor: "#404040",
+        cardColor: "#ffffff"
+    }
+});
+
+
 const DarkThemeProvider = ({ children }) => {
     const darkThemeEnabled = useSelector((state) => state.theme.darkThemeEnabled);
+    const themeSelected = darkThemeEnabled ? "dark" : "light";
+    const muiTheme = darkThemeEnabled ? dark : light;
+
     return (
-        <ThemeProvider theme={{ theme: darkThemeEnabled ? "dark" : "light" }}>
-            {children}
-        </ThemeProvider>
+        <StylesProvider injectFirst>
+            <MuiThemeProvider theme={ muiTheme  } >
+                <ThemeProvider theme={{ theme: themeSelected }}>
+                    {children}
+                </ThemeProvider>
+            </MuiThemeProvider>
+        </StylesProvider>
     );
 };
 

diff --git a/frontend/components/reviews/ShopSearch.jsx b/frontend/components/reviews/ShopSearch.jsx
@@ -2,64 +2,69 @@ import { Button, Paper, FormControl, InputLabel, MenuItem, Select, TextField } f
 import React, { useEffect, useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { fetchAllReviews } from '../../actions/review_actions';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { cardColor } from '../DarkThemeProvider';
 import { useMediaPredicate } from 'react-media-hook';
 
-const useStyles = makeStyles({
-    root: {
-        height: "20vw",
-        margin: "0 auto",
-        padding: 32,
-        position: 'relative',
-        top: '10vh'
-    },
-
-    header: {
-        fontSize: 24,
-        padding: 24
-    },
-
-    input: {
-        paddingRight: 24
-    },
-
-    formInputs: {
-        display: 'flex',
-        justifyContent: 'space-around',
-        margin: '0 auto',
-        maxWidth: 500
-    },
-
-    searchButton: {
-        marginTop: 24
-    },
-
-    stateDropdown: {
-        width: 55
-    },
-
-    errors: {
-        color: 'red',
-        paddingTop: 12,
-    }
-
-});
-
 const STATES = ['--','AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA',
                 'HI','ID','IL','IN','IA','KS','KY','LA','ME','MD',
                 'MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ',
                 'NM','NY','NC','ND','OH','OK','OR','PA','RI','SC',
                 'SD','TN','TX','UT','VT','VA','WA','WV','WI','WY', 'D.C.'];
 
 export default function ShopSearch({setReady}) {
+    const theme = useTheme();
+    const useStyles = makeStyles({
+        root: {
+            height: "20vw",
+            margin: "0 auto",
+            padding: 32,
+            position: 'relative',
+            top: '10vh',
+            backgroundColor: theme.palette.cardColor,
+            color: theme.palette.textColor
+        },
+
+        header: {
+            fontSize: 24,
+            padding: 24
+        },
+
+        input: {
+            paddingRight: 24
+        },
+
+        formInputs: {
+            display: 'flex',
+            justifyContent: 'space-around',
+            margin: '0 auto',
+            maxWidth: 500
+        },
+
+        searchButton: {
+            marginTop: 24
+        },
+
+        stateDropdown: {
+            width: 55
+        },
+
+        errors: {
+            color: 'red',
+            paddingTop: 12,
+        }
+
+    });
+
     const classes = useStyles();
     const dispatch = useDispatch();
     const [name, setName] = useState('');
     const [city, setCity] = useState('');
     const [state, setState] = useState('');
     const [errors, setErrors] = useState('');
     const [searching, setSearching] = useState(false)
-    const mobile = useMediaPredicate('(max-width: 768px)')
+    const mobile = useMediaPredicate('(max-width: 768px)');
+
 
     async function search(e) {
         setSearching(true)