first template, material ui, navigation

src/themes/overrides/MuiAlert.js

@@ -0,0 +1,37 @@
+const MuiAlert = {
+  root: {
+    fontSize: '16px',
+    borderRadius: 0,
+  },
+  standardError: {
+    color: '#A72121',
+    fontWeight: 300,
+    backgroundColor: '#FFA9A9',
+  },
+  standardWarning: {
+    color: 'rgba(0, 0, 0, 0.5)',
+    fontWeight: 300,
+    backgroundColor: '#FFDDA9',
+  },
+  standardInfo: {
+    color: '#2176A7',
+    fontWeight: 300,
+    backgroundColor: '#A9E5FF',
+  },
+  standardSuccess: {
+    color: '#059346',
+    fontWeight: 300,
+    backgroundColor: '#BFFFA9',
+  },
+  icon: {
+    display: 'flex',
+    opacity: 1,
+    fontsize: '16px',
+    marginLeft: '3rem',
+    marginRight: '1rem',
+  },
+  message: {
+    padding: '16px 0 8px 0',
+  },
+};
+export default MuiAlert;

src/themes/overrides/MuiInputBase.js

@@ -0,0 +1,13 @@
+import Cultured from '../Theme';
+import Charcoal from '../Theme';
+
+const MuiInputBase = {
+  input: {
+    height: '1.3rem',
+    '&:disabled': {
+      background: Cultured,
+      color: Charcoal,
+    },
+  },
+};
+export default MuiInputBase;

src/themes/overrides/MuiMenuItem.js

@@ -0,0 +1,12 @@
+import Celadon from '../Theme';
+const MuiMenuItem = {
+  root: {
+    fontFamily: 'Poppins',
+    fontSize: '14px',
+    lineHeight: '19px',
+    textAlign: 'left',
+    color: Celadon,
+    padding: '.5rem',
+  },
+};
+export default MuiMenuItem;

src/themes/overrides/MuiOutlinedInput.js

@@ -0,0 +1,56 @@
+import Celadon from '../Theme'
+import Cultured from '../Theme'
+import Charcoal from '../Theme'
+const MuiOutlinedInput = {
+  root: {
+    position: 'relative',
+    '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+      border: `1px solid ${Celadon}`,
+
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        borderColor: Celadon,
+      },
+    },
+    // border focused
+    '&$focused $notchedOutline': {
+      borderColor: Celadon,
+    },
+    '&$disabled $notchedOutline': {
+      background: Cultured,
+      borderColor: '#E5E5E5',
+      opacity: 0.8,
+      color: Charcoal,
+    
+    },
+  },
+  //border before
+  notchedOutline: {
+    borderColor: Cultured,
+  },
+  input: {
+    background: '#FFFFFF',
+    padding: '.5rem',
+    borderRadius: '3px',
+    fontFamily: 'Poppins',
+    fontSize: ' 14px',
+    lineHeight: '19px',
+    color: Charcoal,
+
+    '&:disabled': {
+      background: Cultured,
+      opacity: 0.8,
+      color: Charcoal,
+    },
+    notchedOutline: {
+      border: 'transparent',
+    },
+  },
+
+  multiline: {
+    padding: '.5rem !important',
+    border: '0px',
+    margin: 0,
+  },
+};
+export default MuiOutlinedInput;

src/themes/overrides/MuiSelect.js

@@ -0,0 +1,66 @@
+import BlueGreen from '../Theme';
+import Celadon from '../Theme';
+import Cultured from '../Theme';
+import Charcoal from '../Theme';
+
+const MuiSelect = {
+  root: {
+    background: '#FFFFFF',
+    padding: '.5rem',
+    borderRadius: '3px',
+    fontFamily: 'Poppins',
+    fontSize: '14px',
+    lineHeight: '19px',
+    textAlign: 'left',
+    color: Charcoal,
+    border: `1px solid ${Cultured}`,
+    '&:focus': {
+      borderRadius: '3px',
+      borderColor: 'transparent',
+      background: '#FFFFFF',
+    },
+  },
+  select: {
+    minWidth: '5.5rem',
+    borderRadius: '3px',
+    border: `1px solid ${Celadon}`,
+    fontSize: '16px',
+    lineHeight: '19px',
+    '&:focus': {
+      borderRadius: '3px',
+      borderColor: Celadon,
+      background: '#FFFFFF',
+    },
+  },
+
+  selectMenu: {
+    background: '#FFFFFF',
+    color: Celadon,
+    '&:notchedOutline': {
+      borderColor: 'transparent !important',
+    },
+  },
+
+  outlined: {
+    color: `${Charcoal} !important`,
+    borderColor: 'transparent',
+    fontSize: '14px',
+    lineHeight: '19px',
+    '&:hover ': {
+      borderColor: 'transparent',
+      outline: 'none',
+    },
+    '&:focus': {
+      background: '#FFFFFF',
+      borderColor: 'transparent',
+    },
+  },
+  iconOutlined: {
+    color: BlueGreen,
+  },
+  icon: {
+    color: Celadon,
+  },
+};
+
+export default MuiSelect;

src/themes/overrides/MuiSwitch.js

@@ -0,0 +1,35 @@
+import BlueGreen from '../Theme'
+import Cultured from '../Theme'
+import Charcoal from '../Theme'
+const MuiSwitch = {
+  root: {
+    overflow: 'visible',
+    width: '4rem',
+  },
+  switchBase: {
+    background: 'transparent',
+    '&$checked': {
+      transform: 'translateX(26px)',
+      '&$checked + $track': {
+        backgroundColor: Cultured,
+        border: 'none',
+        boxShadow: 'none',
+        width: 36,
+      },
+      '& $thumb': {
+        backgroundColor: BlueGreen,
+        boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
+      },
+    },
+  },
+
+  thumb: {
+    backgroundColor: Charcoal,
+    boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
+    width: 20,
+    height: 20,
+  },
+  track: { backgroundColor: Cultured, width: 36 },
+  checked: {},
+};
+export default MuiSwitch;

src/themes/overrides/index.js

@@ -0,0 +1,15 @@
+import MuiAlert from './MuiAlert';
+import MuiInputBase from './MuiInputBase';
+import MuiMenuItem from './MuiMenuItem';
+import MuiOutlinedInput from './MuiOutlinedInput';
+import MuiSelect from './MuiSelect';
+import MuiSwitch from './MuiSwitch';
+
+export default {
+  MuiAlert,
+  MuiInputBase,
+  MuiMenuItem,
+  MuiOutlinedInput,
+  MuiSelect,
+  MuiSwitch,
+};