Merge pull request #60 from BoostV/bug/missing_dropzone_icon_style

The dropzone SVG icon does not apply style in production #35

components/theme-selector.tsx

@@ -2,21 +2,17 @@
 import { Box, Button } from "@material-ui/core";
 import { useGlobal } from "../context/global-context";
 import useStyles from "../styles/theme-selector.style";
+import { themes } from "../theme/theme";
 
 export default function ThemeSelector() {
   const classes = useStyles()
   const { dispatch } = useGlobal()
 
   return (
     <Box className={classes.themeContainer}>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'blueGreenTheme' })}>BlueGreen</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'tealTheme' })}>Teal</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'cyanTheme' })}>Cyan</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'beeTheme' })}>Bee</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'beeLightTheme' })}>BeeLight</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'woodTheme' })}>Wood</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'honeyTheme' })}>Honey</Button>
-      <Button size="small" onClick={() => dispatch({ type: 'setTheme', payload: 'earthTheme' })}>Earth</Button>
+      {themes.map((t, i) => 
+        <Button key={i} size="small" onClick={() => dispatch({ type: 'setTheme', payload: t.name })}>{t.name}</Button>
+      )}
     </Box>
   )
 } 

context/global-context.tsx

@@ -3,35 +3,17 @@ import * as React from 'react'
 import ThemeSelector from "../components/theme-selector"
 import { useLocalStorageReducer } from '../hooks/useLocalStorageReducer'
 import { State, Dispatch, initialState, reducer } from '../reducers/global-reducer'
-import { beeLightTheme, beeTheme, blueGreenTheme, cyanTheme, earthTheme, honeyTheme, tealTheme, woodTheme } from '../theme/theme'
+import { theme, themes, CustomTheme } from "../theme/theme";
 
 const GlobalContext = React.createContext<{state: State, dispatch: Dispatch} | undefined>(undefined)
 
 function GlobalStateProvider({children}) {
     const [state, dispatch] = useLocalStorageReducer(reducer, initialState, 'global')
 
     const loadTheme = (): Theme => {
-        switch(state.theme) {
-            case "blueGreenTheme":
-                return {...blueGreenTheme}
-            case "tealTheme":
-                return {...tealTheme}
-            case "cyanTheme":
-                return {...cyanTheme}
-            case "beeTheme":
-                return {...beeTheme}
-            case "beeLightTheme":
-                return {...beeLightTheme}
-            case "woodTheme":
-                return {...woodTheme}
-            case "honeyTheme":
-                return {...honeyTheme}
-            case "earthTheme":
-                return {...earthTheme}
-            default:
-                return {...blueGreenTheme}
-        }
-      }
+        const themeToLoad: CustomTheme | undefined = themes.find(t => t.name === state.theme)
+        return themeToLoad ? {...themeToLoad.theme} : {...theme}
+    }
 
     return ( 
         <GlobalContext.Provider value={{state, dispatch}}>

reducers/global-reducer.test.ts

@@ -5,7 +5,7 @@ const initState: State = {
   debug: false,
   useLocalStorage: true,
   experimentsInLocalStorage: [],
-  theme: 'blueGreenTheme'
+  theme: 'BlueGreen'
 }
 
 describe("storeExperimentId", () => {
@@ -37,7 +37,7 @@ describe("deleteExperimentId", () => {
 
 describe("setTheme", () => {
   it("should set theme", async () => {
-    const payload: ThemeName = 'beeTheme'
+    const payload: ThemeName = 'Bee'
     expect(
       reducer(initState, { type: 'setTheme', payload }))
       .toEqual({...initState, theme: payload})

reducers/global-reducer.ts

@@ -34,7 +34,7 @@ export const initialState: State = {
     useLocalStorage: true,
     debug: false,
     experimentsInLocalStorage: [],
-    theme: "blueGreenTheme"
+    theme: "BlueGreen"
 }
 
 export const reducer = (state: State, action: Action) => {

reducers/reducers.test.ts

@@ -8,6 +8,7 @@ describe("experiment reducer", () => {
     experiment:{
       id: "1234",
       info: {
+        swVersion: "",
         name: "Cake",
         description: "Yummy",
       },
@@ -43,6 +44,7 @@ describe("experiment reducer", () => {
     const payload: ExperimentType = {
       id: "5678",
       info: {
+        swVersion: "",
         name: "Not cake",
         description: "Not yummy",
       },

styles/home.style.tsx

@@ -27,7 +27,7 @@ export const useStyles = makeStyles(theme => ({
   },
   uploadIcon: {
     position: 'absolute',
-    fontSize: '13rem',
+    fontSize: '13rem !important',
     opacity: .35
   }
 }));

theme/theme.ts

@@ -208,23 +208,28 @@ const earth: CustomColours = {
 }
 
 export type ThemeName =
-    'tealTheme'
-  | 'cyanTheme'
-  | 'beeTheme'
-  | 'beeLightTheme'
-  | 'woodTheme'
-  | 'blueGreenTheme'
-  | 'honeyTheme'
-  | 'earthTheme'
-
-export const tealTheme: Theme = createCustomTheme(teals)
-export const cyanTheme: Theme = createCustomTheme(cyans)
-export const beeTheme: Theme = createCustomTheme(bee)
-export const beeLightTheme: Theme = createCustomTheme(beeLight)
-export const woodTheme: Theme = createCustomTheme(wood)
-export const blueGreenTheme: Theme = createCustomTheme(blueGreen)
-export const honeyTheme: Theme = createCustomTheme(honey)
-export const earthTheme: Theme = createCustomTheme(earth)
-
-export const theme: Theme = blueGreenTheme
+    'Teal'
+  | 'Cyan'
+  | 'Bee'
+  | 'BeeLight'
+  | 'Wood'
+  | 'BlueGreen'
+  | 'Honey'
+  | 'Earth'
+
+export type CustomTheme = {
+  name: ThemeName
+  theme: Theme
+}
 
+export const themes: CustomTheme[] = [
+  { name: 'Teal', theme: createCustomTheme(teals) },
+  { name: 'Cyan', theme: createCustomTheme(cyans) },
+  { name: 'Bee', theme: createCustomTheme(bee) },
+  { name: 'BeeLight', theme: createCustomTheme(beeLight) },
+  { name: 'BlueGreen', theme: createCustomTheme(blueGreen) },
+  { name: 'Honey', theme: createCustomTheme(honey) },
+  { name: 'Earth', theme: createCustomTheme(earth) },
+]
+
+export const theme: Theme = createCustomTheme(blueGreen)