Color theme update

zuckpa1999 · Oct 30, 2019 · 43c0606 · 43c0606
1 parent 1ac93b9
commit 43c0606
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/client/assets/images/seashell.jpg b/client/assets/images/seashell.jpg
diff --git a/client/assets/images/unicornbike.jpg b/client/assets/images/unicornbike.jpg
diff --git a/client/core/Home.js b/client/core/Home.js
@@ -4,7 +4,7 @@ import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import CardMedia from '@material-ui/core/CardMedia'
 import Typography from '@material-ui/core/Typography'
-import seashellImg from './../assets/images/seashell.jpg'
+import unicornbikeImg from './../assets/images/unicornbike.jpg'
 
 const useStyles = makeStyles(theme => ({
   card: {
@@ -14,10 +14,19 @@ const useStyles = makeStyles(theme => ({
   },
   title: {
     padding:`${theme.spacing(3)}px ${theme.spacing(2.5)}px ${theme.spacing(2)}px`,
-    color: theme.palette.text.secondary
+    color: theme.palette.openTitle
   },
   media: {
-    minHeight: 330
+    minHeight: 400
+  },
+  credit: {
+    padding: 10,
+    textAlign: 'right',
+    backgroundColor: '#ededed',
+    borderBottom: '1px solid #d0d0d0',
+    '& a':{
+      color: '#3f4771'
+    } 
   }
 }))
 
@@ -28,7 +37,8 @@ export default function Home(){
           <Typography variant="h6" className={classes.title}>
             Home Page
           </Typography>
-          <CardMedia className={classes.media} image={seashellImg} title="Unicorn Shells"/>
+          <CardMedia className={classes.media} image={unicornbikeImg} title="Unicorn Bicycle"/>
+          <Typography variant="body2" component="p" className={classes.credit} color="textSecondary">Photo by <a href="https://unsplash.com/@boudewijn_huysmans" target="_blank" rel="noopener noreferrer">Boudewijn Huysmans</a> on Unsplash</Typography>
           <CardContent>
             <Typography variant="body2" component="p">
               Welcome to the MERN Skeleton home page.

diff --git a/client/theme.js b/client/theme.js
@@ -1,15 +1,15 @@
 import { createMuiTheme } from '@material-ui/core/styles'
-import { indigo, pink } from '@material-ui/core/colors'
+import { pink } from '@material-ui/core/colors'
 
 const theme = createMuiTheme({
     typography: {
       useNextVariants: true,
     },
     palette: {
       primary: {
-      light: '#757de8',
-      main: '#3f51b5',
-      dark: '#002984',
+      light: '#5c67a3',
+      main: '#3f4771',
+      dark: '#2e355b',
       contrastText: '#fff',
     },
     secondary: {
@@ -18,7 +18,7 @@ const theme = createMuiTheme({
       dark: '#c60055',
       contrastText: '#000',
     },
-      openTitle: indigo['400'],
+      openTitle: '#3f4771',
       protectedTitle: pink['400'],
       type: 'light'
     }