Styling for HomePage #15

BCIT-SSD-2020-21 · Apr 16, 2021 · b2ee044 · b2ee044
1 parent 454de2b
commit b2ee044
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 18 deletions.
diff --git a/src/containers/AuthHeader.js b/src/containers/AuthHeader.js
@@ -5,7 +5,7 @@ export default function AuthHeader() {
     const classes = homeStyles()
 
     return (
-        <div className={classes.homeHeaderBackgroundImage}>
+        // <div className={classes.homeHeaderBackgroundImage}>
             <div className={classes.homeHeader}>
                 <div className={classes.homeHeaderLeft}>
                     <h1 className={classes.homeHeaderTitle}>Holistic</h1>
@@ -18,6 +18,6 @@ export default function AuthHeader() {
                     <h3 className={classes.headerItem}>Connect with the community</h3>
                 </div>
             </div>
-        </div>
+        // </div>
     )
 }
diff --git a/src/containers/Footer.js b/src/containers/Footer.js
@@ -1,11 +1,18 @@
 import React from 'react'
+import { IconButton } from '@material-ui/core';
 import footerStyles from '../styles/footerStyles';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import InstagramIcon from '@material-ui/icons/Instagram';
+import YouTubeIcon from '@material-ui/icons/YouTube';
+
 
 export default function Footer() {
     const classes = footerStyles();
     return (
         <div className={classes.container}>
-
+            <IconButton className={classes.buttonIcons}><FacebookIcon /></IconButton>
+            <IconButton className={classes.buttonIcons}><InstagramIcon /></IconButton>
+            <IconButton className={classes.buttonIcons}><YouTubeIcon /></IconButton>
         </div>
     )
 }
diff --git a/src/pages/AuthPage.js b/src/pages/AuthPage.js
@@ -8,14 +8,12 @@ export default function AuthPage() {
     const classes = homeStyles();
 
     return (
-        <div className={classes.homePage}>
-
-            <AuthHeader />
-
-            <Auth /> 
-
-            <Footer />
-
+        <div className={classes.homeHeaderBackgroundImage}>
+            <div className={classes.homePage}>
+                <AuthHeader />
+                <Auth /> 
+                <Footer />
+            </div>
         </div>
     )
 }
diff --git a/src/styles/colorThemes.js b/src/styles/colorThemes.js
@@ -10,11 +10,11 @@ export const holisticTheme = {
     // Container
     bgLighter: '#d3ccdd',
     bgLight: '#c3bad1',
-    bgContainer: '#A395B8',
+    bgContainer: '#A395B84D',
     // Font
     textTitle: '#AAB895',
     // Text Inputs
-    bgInput: '#C4C4C4',
+    bgInput: '#C4C4C440',
     textLabel: '#EFEFEF',
     textInput: '#000000',
     // Buttons - primary

diff --git a/src/styles/footerStyles.js b/src/styles/footerStyles.js
@@ -3,8 +3,16 @@ import { holisticTheme } from './colorThemes';
 
 const footerStyles = makeStyles(() => ({
     container: {
-        height: '25vh',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        paddingBottom: '25px',
+        height: '15vh',
         backgroundColor: holisticTheme.bgDark,
+    },
+    buttonIcons: {
+        color: holisticTheme.bgLight,
     }
 }));
 

diff --git a/src/styles/homeStyles.js b/src/styles/homeStyles.js
@@ -5,19 +5,27 @@ import logoImage from '../assets/images/logo_placeholder.jpg';
 
 const homeStyles = makeStyles(() => ({
     homePage: {
-        backgroundColor: holisticTheme.bgRoot,
+        // backgroundColor: holisticTheme.bgRoot,
         minHeight: '667px',
         width: '100%',
+        background: `linear-gradient(35deg, ${holisticTheme.bgRoot} 20%, #82ffa11A 100%)`,
+
+        // backgroundImage: `url(${bannerImage})`,
+        // backgroundPosition: 'center', 
+        // backgroundSize: 'cover', 
+        // backgroundRepeat: 'no-repeat',
+        // background: `linear-gradient(35deg, ${holisticTheme.bgRoot} 20%, #82ffa140 100%)`,
     },
 	homeHeaderBackgroundImage: {
         backgroundImage: `url(${bannerImage})`,
         backgroundPosition: 'center', 
         backgroundSize: 'cover', 
         backgroundRepeat: 'no-repeat',
-        height: '40vh',
+        maxWidth: '100%',
+        // height: '40vh',
     },
     homeHeader: {
-        background: `linear-gradient(35deg, ${holisticTheme.bgRoot} 20%, #82ffa140 100%)`,
+        // background: `linear-gradient(35deg, ${holisticTheme.bgRoot} 20%, #82ffa140 100%)`,
         height: '100%',
         display: 'flex',
         flexDirection: 'row',
@@ -59,7 +67,6 @@ const homeStyles = makeStyles(() => ({
         width: '80%',
 		margin: 'auto',
 		borderRadius: '15px',
-
     },
     authAppBar: {
         borderRadius: '15px 15px 0 0',