styling; #15

BCIT-SSD-2020-21 · Apr 15, 2021 · 768968a · 768968a
1 parent b988daf
commit 768968a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/src/styles/colorThemes.js b/src/styles/colorThemes.js
@@ -4,7 +4,11 @@ export const holisticTheme = {
     bgRoot: "#5C4E75",
     textRoot: '#EFEFEF',
     bgDark: "#2d2639",
+    // Status
+    completed: '#679f57',
+    cancelled: '#8f8669',
     // Container
+    bgLight: '#c3bad1',
     bgContainer: '#A395B8',
     // Font
     textTitle: '#AAB895',

diff --git a/src/styles/homeStyles.js b/src/styles/homeStyles.js
@@ -7,14 +7,14 @@ const homeStyles = makeStyles(() => ({
     homePage: {
         backgroundColor: holisticTheme.bgRoot,
         minHeight: '667px',
+        width: '100%',
         // background: `linear-gradient(to right bottom, ${holisticTheme.bgRoot}, #82ffa140)`,
     },
 	homeHeaderBackgroundImage: {
         backgroundImage: `url(${bannerImage})`,
         backgroundPosition: 'center', 
         backgroundSize: 'cover', 
         backgroundRepeat: 'no-repeat',
-
         height: '40vh',
     },
     homeHeader: {
@@ -40,12 +40,10 @@ const homeStyles = makeStyles(() => ({
         // top: -25,
         // left: 10,
         // position: 'absolute',
-        padding: '10%',
+        // padding: '10%',
         margin: 0,
-        marginLeft: 'auto',
-        marginLeft: 'auto',
         textAlign: 'center',
-        // marginLeft: '10%',
+        marginLeft: '10%',
         textAlign: 'left',
         fontSize: '36px',
         fontStyle: 'italic',
@@ -57,9 +55,11 @@ const homeStyles = makeStyles(() => ({
         backgroundPosition: 'center', 
         backgroundSize: 'cover', 
         backgroundRepeat: 'no-repeat',
-        margin: '10%',
+        margin: '5%',
         width: '40vw',
         height: '40vw',
+        maxWidth: '220px',
+        maxHeight: '220px',
         borderRadius: '50%',
         // backgroundImage: 'url(../assets/images/homeBanner_placeholder.jpg)'
     },

diff --git a/src/styles/sessionStyles.js b/src/styles/sessionStyles.js
@@ -2,6 +2,44 @@ import { makeStyles } from '@material-ui/core/styles';
 import { holisticTheme } from './colorThemes'; 
 
 const sessionStyles = makeStyles(() => ({
+    listItem: {
+        margin: '5px',
+        borderRadius: '15px',
+        backgroundColor: holisticTheme.bgLight,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    sessionCompleted: {
+        backgroundColor: holisticTheme.completed,
+    },
+    sessionCancelled: {
+        backgroundColor: holisticTheme.cancelled,
+    },
+    listItemInfo: {
+        // display: 'flex',
+        // flexDirection: 'column',
+        // justifyContent: 'space-between',
+    },
+    listItemTitleInfo: {
+
+    },
+    listItemActions: {
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end',
+    },
+    buttonPrimary: {
+        justifySelf: 'flex-end',
+        borderRadius: '15px',
+        backgroundColor: holisticTheme.bgBtnPrimary,        
+    },
+    buttonSecondary: {
+        borderRadius: '15px',
+        fontSize: '10px',
+        backgroundColor: holisticTheme.bgBtnSecondary,
+    },
+
     homePage: {
         backgroundColor: holisticTheme.bgRoot,
         minHeight: '667px',