Update AIMMO UI Colors (#924)

* Update AIMMO UI Colors * update snapshot and version number * Merge branch 'development' into run_code_loading_button # Conflicts: # version.txt
ocadotechnology · Dec 11, 2018 · 02318c9 · 02318c9
1 parent 526d182
commit 02318c9
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 111 deletions.
diff --git a/game_frontend/src/components/Code/__snapshots__/index.test.js.snap b/game_frontend/src/components/Code/__snapshots__/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<Code /> renders correctly 1`] = `
 .c0 {
   font-family: 'Source Code Pro',monospace;
-  color: #FFFFFF;
+  color: #606060;
 }
 
 <p

diff --git a/game_frontend/src/components/IDEEditor/__snapshots__/index.test.js.snap b/game_frontend/src/components/IDEEditor/__snapshots__/index.test.js.snap
@@ -49,6 +49,7 @@ exports[`<IDEEditor /> matches snapshot 1`] = `
   />
   <Styled(WithStyles(Button))
     aria-label="Run Code"
+    color="secondary"
     id="post-code-button"
     onClick={[MockFunction]}
     variant="extendedFab"
@@ -176,16 +177,16 @@ exports[`<MarginedPlayIcon /> matches snapshot 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(255, 255, 255, 0.5)",
@@ -231,9 +232,6 @@ exports[`<MarginedPlayIcon /> matches snapshot 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {
@@ -467,16 +465,16 @@ exports[`<RunCodeButton /> matches snapshot 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(255, 255, 255, 0.5)",
@@ -522,9 +520,6 @@ exports[`<RunCodeButton /> matches snapshot 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {

diff --git a/game_frontend/src/components/IDEEditor/index.js b/game_frontend/src/components/IDEEditor/index.js
@@ -54,6 +54,7 @@ export class IDEEditor extends PureComponent {
             fontFamily: this.props.theme.additionalVariables.typography.code.fontFamily
           }} />
         <RunCodeButton
+          color='secondary'
           aria-label='Run Code'
           variant='extendedFab'
           id='post-code-button'

diff --git a/game_frontend/src/components/NavigationBar/__snapshots__/index.test.js.snap b/game_frontend/src/components/NavigationBar/__snapshots__/index.test.js.snap
@@ -3,7 +3,6 @@
 exports[`<NavigationBar /> renders correctly 1`] = `
 <styled.nav>
   <WithStyles(AppBar)
-    color="secondary"
     position="sticky"
   >
     <Styled(WithStyles(Toolbar))>

diff --git a/game_frontend/src/components/NavigationBar/index.js b/game_frontend/src/components/NavigationBar/index.js
@@ -18,7 +18,6 @@ export default class NavigationBar extends Component {
     return (
       <NavigationBarLayout>
         <AppBar
-          color='secondary'
           position='sticky'>
           <CloseToolbar>
             <IconButton

diff --git a/game_frontend/src/components/Snackbar/__snapshots__/index.test.js.snap b/game_frontend/src/components/Snackbar/__snapshots__/index.test.js.snap
@@ -111,16 +111,16 @@ exports[`<Snackbar /> renders correctly with type=error 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
@@ -165,9 +165,6 @@ exports[`<Snackbar /> renders correctly with type=error 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {
@@ -413,16 +410,16 @@ exports[`<Snackbar /> renders correctly with type=info 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
@@ -467,9 +464,6 @@ exports[`<Snackbar /> renders correctly with type=info 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {
@@ -715,16 +709,16 @@ exports[`<Snackbar /> renders correctly with type=success 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
@@ -769,9 +763,6 @@ exports[`<Snackbar /> renders correctly with type=success 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {
@@ -1012,16 +1003,16 @@ exports[`<Snackbar /> renders correctly with type=warning 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
@@ -1066,9 +1057,6 @@ exports[`<Snackbar /> renders correctly with type=warning 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {
@@ -1329,16 +1317,16 @@ exports[`<StyledSnackbarContent /> renders correctly 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
@@ -1383,9 +1371,6 @@ exports[`<StyledSnackbarContent /> renders correctly 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {

diff --git a/game_frontend/src/containers/IDE/__snapshots__/index.test.js.snap b/game_frontend/src/containers/IDE/__snapshots__/index.test.js.snap
@@ -101,16 +101,16 @@ exports[`<IDE /> renders correctly 1`] = `
           "A700": "#616161",
         },
         "primary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(178, 178, 178)",
-          "light": "rgb(255, 255, 255)",
-          "main": "#FFFFFF",
+          "contrastText": "#fff",
+          "dark": "rgb(67, 67, 67)",
+          "light": "rgb(127, 127, 127)",
+          "main": "#606060",
         },
         "secondary": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "rgb(144, 143, 137)",
-          "light": "rgb(216, 215, 208)",
-          "main": "#CFCDC5",
+          "contrastText": "#fff",
+          "dark": "rgb(156, 65, 162)",
+          "light": "rgb(229, 126, 236)",
+          "main": "#DF5EE8",
         },
         "text": Object {
           "disabled": "rgba(255, 255, 255, 0.5)",
@@ -156,9 +156,6 @@ exports[`<IDE /> renders correctly 1`] = `
       "spacing": Object {
         "unit": 8,
       },
-      "text": Object {
-        "secondary": "#FFFFFF",
-      },
       "transitions": Object {
         "create": [Function],
         "duration": Object {
@@ -381,16 +378,16 @@ exports[`<IDE /> renders correctly 1`] = `
             "A700": "#616161",
           },
           "primary": Object {
-            "contrastText": "rgba(0, 0, 0, 0.87)",
-            "dark": "rgb(178, 178, 178)",
-            "light": "rgb(255, 255, 255)",
-            "main": "#FFFFFF",
+            "contrastText": "#fff",
+            "dark": "rgb(67, 67, 67)",
+            "light": "rgb(127, 127, 127)",
+            "main": "#606060",
           },
           "secondary": Object {
-            "contrastText": "rgba(0, 0, 0, 0.87)",
-            "dark": "rgb(144, 143, 137)",
-            "light": "rgb(216, 215, 208)",
-            "main": "#CFCDC5",
+            "contrastText": "#fff",
+            "dark": "rgb(156, 65, 162)",
+            "light": "rgb(229, 126, 236)",
+            "main": "#DF5EE8",
           },
           "text": Object {
             "disabled": "rgba(255, 255, 255, 0.5)",
@@ -436,9 +433,6 @@ exports[`<IDE /> renders correctly 1`] = `
         "spacing": Object {
           "unit": 8,
         },
-        "text": Object {
-          "secondary": "#FFFFFF",
-        },
         "transitions": Object {
           "create": [Function],
           "duration": Object {

diff --git a/game_frontend/src/index.js b/game_frontend/src/index.js
@@ -4,7 +4,7 @@ import { render } from 'react-dom'
 
 import { MuiThemeProvider } from '@material-ui/core/styles'
 import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components'
-import { lightTheme } from 'theme'
+import { darkTheme } from 'theme'
 import { Provider } from 'react-redux'
 
 import GamePage from './components/GamePage'
@@ -43,8 +43,8 @@ function getGameIDFromURL () {
 const reduxStore = configureStore(initialState)
 
 const RootJSX = () => (
-  <StyledComponentsThemeProvider theme={lightTheme}>
-    <MuiThemeProvider theme={lightTheme}>
+  <StyledComponentsThemeProvider theme={darkTheme}>
+    <MuiThemeProvider theme={darkTheme}>
       <Provider store={reduxStore}>
         <GamePage />
       </Provider>

diff --git a/game_frontend/src/theme.js b/game_frontend/src/theme.js
@@ -2,10 +2,10 @@ import { createMuiTheme } from '@material-ui/core/styles'
 
 const palette = {
   primary: {
-    main: '#FFFFFF'
+    main: '#606060'
   },
   secondary: {
-    main: '#CFCDC5'
+    main: '#DF5EE8'
   }
 }
 
@@ -39,9 +39,6 @@ const theme = {
   additionalVariables,
   shape,
   overrides,
-  text: {
-    secondary: '#FFFFFF'
-  },
   typography: {
     fontFamily: [
       'museo-sans',