Create theme

package.json

@@ -87,6 +87,7 @@
   "dependencies": {
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/styles": "^4.9.10",
     "@sentry/browser": "^5.15.4",
     "axios": "^0.19.2",
     "brace": "^0.11.1",

src/components/ProgramList.js

@@ -191,8 +191,14 @@ class ProgramList extends Component {
 
     return (
       <>
-        <Button variant="contained" color="primary" href="/mission-control" style={{ marginLeft: '10%' }}>
-          <Add />
+        <Button
+          variant="contained"
+          color="primary"
+          size="large"
+          startIcon={<Add />}
+          href="/mission-control"
+          style={{ marginLeft: '10%' }}
+        >
           <FormattedMessage
             id="app.program_list.new"
             description="Button label to create new program"

src/components/__tests__/__snapshots__/ProgramList.test.js.snap

@@ -5,14 +5,15 @@ exports[`The ProgramList component renders on the page with no errors 1`] = `
   <WithStyles(ForwardRef(Button))
     color="primary"
     href="/mission-control"
+    size="large"
+    startIcon={<Memo(AddIcon) />}
     style={
       Object {
         "marginLeft": "10%",
       }
     }
     variant="contained"
   >
-    <AddIcon />
     <FormattedMessage
       defaultMessage="New Program"
       id="app.program_list.new"

src/index.js

@@ -1,4 +1,5 @@
 import 'semantic-ui-css/semantic.min.css';
+import { ThemeProvider, responsiveFontSizes } from '@material-ui/core/styles';
 
 import React from 'react';
 import { render } from 'react-dom';
@@ -16,13 +17,13 @@ import appReducers from './reducers/index';
 import { USER_LOGOUT } from './actions/auth';
 import AuthApi from './utils/auth-api';
 
-
 import NotFound from './containers/Global/NotFound';
 import ProgramList from './containers/ProgramList';
 import Accounts from './containers/Accounts/Base';
 import MissionControl from './containers/MissionControl';
 import UserSetting from './containers/UserSetting';
 import ProtectedRoute from './components/ProtectedRoute';
+import { light } from './themes';
 
 import enMessages from './translations/locales/en.json';
 import esMessages from './translations/locales/es.json';
@@ -85,14 +86,16 @@ render(
     <ReduxProvider store={store}>
       <BrowserRouter>
         <CookiesProvider>
-          <Switch>
-            <Route path="/accounts" component={Accounts} />
-            <ProtectedRoute exact path="/" component={ProgramList} />
-            <ProtectedRoute exact path="/programs" component={ProgramList} />
-            <ProtectedRoute exact path="/mission-control" component={MissionControl} />
-            <ProtectedRoute exact path="/user/settings" component={UserSetting} />
-            <Route component={NotFound} />
-          </Switch>
+          <ThemeProvider theme={responsiveFontSizes(light)}>
+            <Switch>
+              <Route path="/accounts" component={Accounts} />
+              <ProtectedRoute exact path="/" component={ProgramList} />
+              <ProtectedRoute exact path="/programs" component={ProgramList} />
+              <ProtectedRoute exact path="/mission-control" component={MissionControl} />
+              <ProtectedRoute exact path="/user/settings" component={UserSetting} />
+              <Route component={NotFound} />
+            </Switch>
+          </ThemeProvider>
         </CookiesProvider>
       </BrowserRouter>
     </ReduxProvider>

src/themes/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as light } from './light';

src/themes/light.js

@@ -0,0 +1,33 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+export default createMuiTheme({
+  palette: {
+    primary: {
+      main: '#114BFD', /* blue */
+    },
+    secondary: {
+      main: '#FF0459', /* magenta */
+    },
+    warning: {
+      main: '#FEAD11', /* yellow */
+    },
+    info: {
+      main: '#00FDA3', /* lime green, cyan */
+    },
+    success: {
+      main: '#21BA45', /* green */
+    },
+    /* Keep default error red */
+    contrastThreshold: 3,
+    tonalOffset: 0.2,
+  },
+  typography: {
+    fontFamily: [
+      'Lato', 'sans-serif',
+    ].join(','),
+    button: {
+      fontWeight: 'bold',
+      textTransform: 'none',
+    },
+  },
+});