Skip to content

Commit

Permalink
Refactor StyleSheets #59
Browse files Browse the repository at this point in the history
  • Loading branch information
veeepi committed Apr 18, 2021
1 parent 6b4b7fc commit 227158f
Show file tree
Hide file tree
Showing 17 changed files with 215 additions and 89 deletions.
30 changes: 15 additions & 15 deletions .firebase/hosting.YnVpbGQ.cache
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ logo192.png,1618084814231,3ee59515172ee198f3be375979df15ac5345183e656720a381b887
logo512.png,1618084814235,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
manifest.json,1618084814250,5c997de1364b8be939319fa9209abd77f2caf7f8844999a9e2e9173f844e7840
robots.txt,1618084814253,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
asset-manifest.json,1618609447169,65895a8ccb8b0df391313e9ae1ca3ebaf1d4501aa5890143e7252649c6f2d8cc
index.html,1618609447167,78a18c93c30518793dcad240be8279794cb9461005796299026c958319ee43ea
static/css/main.1635e87c.chunk.css.map,1618609447197,79cf4274847d0c74297ffa50c94e7b205c48c97b15729ceb7f53541af8d0ab47
static/js/2.c57ea753.chunk.js.LICENSE.txt,1618609447199,3d5b6b314fd0c8069297161e80277b54b339843de3163d1c36db64c66c6c30da
static/css/main.1635e87c.chunk.css,1618609447181,3fa579288ee89a0ec1f150d26d6b852c8aee9812478f96262da66d23a54baea7
static/js/3.8fee89a8.chunk.js.map,1618609447200,05b68fae5b209e6353a833c090a47a1f2b2e22f9bd5797d5b76881b36fd19a8d
static/js/runtime-main.45f2f230.js,1618609447196,6e685da7aaa141289cc6dd4da6f04c008c52ce7cb4b9262b86e39c53862bbd05
static/js/3.8fee89a8.chunk.js,1618609447198,3663ff3b3dc0b33f9375008c4f69ca21727935e6152e2bb1698e7c5f0d88f15f
static/js/runtime-main.45f2f230.js.map,1618609447199,111cb8eda24027bc124c98096228212f76565ac1b578658e68f993641983bdd6
static/js/main.ec679ebc.chunk.js,1618609447183,9c102cbf785e1f9bb1147e8bcd460e95beeb9913a51d0d97988191e1b5042168
static/js/main.ec679ebc.chunk.js.map,1618609447199,a2c08700f07bd41fd324fbfa7b7ed1ddd1f2f9138922d9d1ce1b0ae7133b7581
static/media/logo_placeholder.37d3bd32.jpg,1618609447197,49977b2fb810a48c0a8cdcbc16bafe663767cc0eeb1935e7a492c8470da623bd
static/js/2.c57ea753.chunk.js,1618609447198,b1132203fce740f938749016d4801ef425e239f71ea2f337cdb4eb9f367748c9
static/media/homeBanner_placeholder.02644124.jpg,1618609447176,097ff4629ed8bb1f4815787931225e7921f1bc3b2e89710752b37f91ef1adf37
static/js/2.c57ea753.chunk.js.map,1618609447201,89c05ecf3dcf6a263ef8acf3fb6998e1bef0ac46960edc6bd42215d8d6ec50c0
asset-manifest.json,1618610288995,c08370ead8c2bacd428fcc4aee2ab4b976e05f2679e44d517b86035ca49fbf78
index.html,1618610288993,2ce3a80d8bb482eb333618b9b16cee0efdd604c81e1971de0929125f359a61cf
static/css/main.1635e87c.chunk.css,1618610289000,3fa579288ee89a0ec1f150d26d6b852c8aee9812478f96262da66d23a54baea7
static/css/main.1635e87c.chunk.css.map,1618610289024,79cf4274847d0c74297ffa50c94e7b205c48c97b15729ceb7f53541af8d0ab47
static/js/2.c57ea753.chunk.js.LICENSE.txt,1618610289024,3d5b6b314fd0c8069297161e80277b54b339843de3163d1c36db64c66c6c30da
static/js/3.8fee89a8.chunk.js,1618610289024,3663ff3b3dc0b33f9375008c4f69ca21727935e6152e2bb1698e7c5f0d88f15f
static/js/3.8fee89a8.chunk.js.map,1618610289025,05b68fae5b209e6353a833c090a47a1f2b2e22f9bd5797d5b76881b36fd19a8d
static/js/runtime-main.45f2f230.js,1618610289024,6e685da7aaa141289cc6dd4da6f04c008c52ce7cb4b9262b86e39c53862bbd05
static/js/runtime-main.45f2f230.js.map,1618610289024,111cb8eda24027bc124c98096228212f76565ac1b578658e68f993641983bdd6
static/js/main.660e34df.chunk.js,1618610289024,627dc648065c16e15f34bb4b76d9bb5860310f73d6f13c781185b28b67edc3f7
static/js/main.660e34df.chunk.js.map,1618610289024,b20758c313e98fdfc6dd6fb081811a7b223d6cd8ccc1b3c5943756898dbe8348
static/media/logo_placeholder.37d3bd32.jpg,1618610289024,49977b2fb810a48c0a8cdcbc16bafe663767cc0eeb1935e7a492c8470da623bd
static/js/2.c57ea753.chunk.js,1618610289025,b1132203fce740f938749016d4801ef425e239f71ea2f337cdb4eb9f367748c9
static/media/homeBanner_placeholder.02644124.jpg,1618610289000,097ff4629ed8bb1f4815787931225e7921f1bc3b2e89710752b37f91ef1adf37
static/js/2.c57ea753.chunk.js.map,1618610289027,89c05ecf3dcf6a263ef8acf3fb6998e1bef0ac46960edc6bd42215d8d6ec50c0
18 changes: 13 additions & 5 deletions src/components/atoms/UserSearchListItem.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
import React from 'react';
import React, {useState, useEffect} from 'react';
import { Box, Card, CardActions, CardContent, IconButton, Typography } from '@material-ui/core';
import AddCircleTwoToneIcon from '@material-ui/icons/AddCircleTwoTone';
import { userListStyles } from '../../styles/dashStyles';
import CheckCircleTwoToneIcon from '@material-ui/icons/CheckCircleTwoTone';

export default function UserSearchListItem({user, addUser, listToAppend}) {
const classes = userListStyles();

const [alreadyOnList, setAlreadyOnList] = useState(false)
useEffect(() => {
if(listToAppend.includes(user.id)) {
setAlreadyOnList(true)
}
}, [])

return (
<Card className={classes.contaner}>
<Card className={alreadyOnList ? classes.contanerDone : classes.contaner}>
<CardContent className={classes.userData}>
<Typography className={classes.username}>{user.username}</Typography>
<Box className={classes.fullName}>
Expand All @@ -17,18 +25,18 @@ export default function UserSearchListItem({user, addUser, listToAppend}) {
</CardContent>
<CardActions className={classes.actions}>
{
!listToAppend.includes(user.id) // Check if list contains userId
!alreadyOnList // Check if list contains userId
?
<IconButton
className={classes.iconButton}
onClick={() => {
addUser(user)
}}
>
<AddCircleTwoToneIcon />
<AddCircleTwoToneIcon className={classes.icon}/>
</IconButton>
:
<Typography>Already added.</Typography>
<Typography><CheckCircleTwoToneIcon className={classes.iconComplete}/></Typography>
}

</CardActions>
Expand Down
2 changes: 1 addition & 1 deletion src/components/forms/RegisterClientForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import ContactsIcon from '@material-ui/icons/Contacts';
import ContactPhoneIcon from '@material-ui/icons/ContactPhone';
import AccessibilityIcon from '@material-ui/icons/Accessibility';
import FitnessCenterIcon from '@material-ui/icons/FitnessCenter';
import authStyles from '../../styles/authStyles';
import { authStyles } from '../../styles/authStyles';

export default function RegisterClientForm({ onSubmit, user, setUser }) {
const classes = authStyles();
Expand Down
2 changes: 1 addition & 1 deletion src/components/forms/RegisterCoachForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import ContactsIcon from '@material-ui/icons/Contacts';
import ContactPhoneIcon from '@material-ui/icons/ContactPhone';
import AccessibilityIcon from '@material-ui/icons/Accessibility';
import FitnessCenterIcon from '@material-ui/icons/FitnessCenter';
import authStyles from '../../styles/authStyles';
import { authStyles } from '../../styles/authStyles';

export default function RegisterCoachForm({ onSubmit, user, setUser }) {
const classes = authStyles();
Expand Down
2 changes: 1 addition & 1 deletion src/containers/Auth.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, {useState } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Login from './Login';
import Register from './Register';
import authStyles from '../styles/authStyles';
import { authStyles } from '../styles/authStyles';
import TabPanel from './TabPanel';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
Expand Down
28 changes: 13 additions & 15 deletions src/containers/AuthHeader.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
import React from 'react';
import homeStyles from '../styles/homeStyles';
import {headerStyles} from '../styles/authStyles';

export default function AuthHeader() {
const classes = homeStyles()
const classes = headerStyles()

return (
// <div className={classes.homeHeaderBackgroundImage}>
<div className={classes.homeHeader}>
<div className={classes.homeHeaderLeft}>
<h1 className={classes.homeHeaderTitle}>Holistic</h1>
<div className={classes.homeHeaderLogo}></div>
</div>
<div className={classes.homeHeaderRight}>
<h3 className={classes.headerItem}>Coach-Client CRM</h3>
<h3 className={classes.headerItem}>Schedule sessions</h3>
<h3 className={classes.headerItem}>Track progress and feedback</h3>
<h3 className={classes.headerItem}>Connect with the community</h3>
</div>
<div className={classes.container}>
<div className={classes.sectionLeft}>
<h1 className={classes.title}>Holistic</h1>
<div className={classes.logo}></div>
</div>
// </div>
<div className={classes.sectionRight}>
<h3 className={classes.textItem}>Coach-Client CRM</h3>
<h3 className={classes.textItem}>Schedule sessions</h3>
<h3 className={classes.textItem}>Track progress and feedback</h3>
<h3 className={classes.textItem}>Connect with the community</h3>
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion src/containers/Login.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Button from '@material-ui/core/Button';
import InputAdornment from '@material-ui/core/InputAdornment';
import AccountCircle from '@material-ui/icons/AccountCircle';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import authStyles from '../styles/authStyles';
import { authStyles } from '../styles/authStyles';
import firebase from '../firebase/config';

export default function Login() {
Expand Down
2 changes: 0 additions & 2 deletions src/containers/MenuAppBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import SettingsIcon from '@material-ui/icons/Settings';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import HighlightOffTwoToneIcon from '@material-ui/icons/HighlightOffTwoTone';
import { userSignOut } from '../firebase/services';
import { useTheme } from '@material-ui/core/styles';
Expand Down
2 changes: 1 addition & 1 deletion src/containers/Register.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import TabPanel from '../containers/TabPanel';
import authStyles from '../styles/authStyles';
import { authStyles } from '../styles/authStyles';
import RegisterClientForm from '../components/forms/RegisterClientForm';
import RegisterCoachForm from '../components/forms/RegisterCoachForm';
import firebase from '../firebase/config';
Expand Down
26 changes: 15 additions & 11 deletions src/containers/SessionsPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,26 @@ export default function SessionsPanel({authUser, dataUser, sessionStatus, change
const [sessions, setSessions] = useState([])
useEffect(() => {
if(dataUser.sessions) {
if (dataUser.userType === "coach") {
// if (dataUser.userType === "coach") {
const userSessions = []
sessionsRef
.where("coachUserId", "==", dataUser.id)
.where("status", "==", sessionStatus)
.onSnapshot(
querySnapshot => {
const userSessions = []
// const userSessions = []
querySnapshot.forEach(doc => {
userSessions.push(doc.data())
})
console.log("userSessions", userSessions)
setSessions(userSessions)
// console.log("userSessions", userSessions)
// setSessions(userSessions)
},
error => {
console.log(error)
}
)
}
if (dataUser.userType === "client") {
// }
// if (dataUser.userType === "client") {
sessionsRef
.where("participantUserId", "==", dataUser.id)
.where("status", "==", sessionStatus)
Expand All @@ -41,14 +42,14 @@ export default function SessionsPanel({authUser, dataUser, sessionStatus, change
querySnapshot.forEach(doc => {
userSessions.push(doc.data())
})
console.log("userSessions", userSessions)
setSessions(userSessions)
// console.log("userSessions", userSessions)
},
error => {
console.log(error)
}
)
}
setSessions(userSessions)
// }
}
}, [authUser, dataUser.sessions, sessionStatus ])

Expand All @@ -66,11 +67,14 @@ export default function SessionsPanel({authUser, dataUser, sessionStatus, change
console.log("cancelSession clicked; to delete: ", session)
}

// console.log("SessionPanel sessions: ", sessions)
console.log("SessionPanel sessions: ", sessions)
return (
<Box>
<Box className={classes.container}>
{ sessionPanelMode === 'list' &&
<Box className={classes.sessionPanelContainer}>



{ sessions.length > 0
?
sessions.map((session, index) =>
Expand Down
8 changes: 4 additions & 4 deletions src/pages/AuthPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import React from 'react'
import AuthHeader from '../containers/AuthHeader';
import Auth from '../containers/Auth';
import Footer from '../containers/Footer';
import homeStyles from '../styles/homeStyles';
import { authStyles } from '../styles/authStyles';

export default function AuthPage() {
const classes = homeStyles();
const classes = authStyles();

return (
<div className={classes.homeHeaderBackgroundImage}>
<div className={classes.homePage}>
<div className={classes.authBackgroundImage}>
<div className={classes.authBackgroundOverlay}>
<AuthHeader />
<Auth />
<Footer />
Expand Down
18 changes: 6 additions & 12 deletions src/pages/DashPage.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import React, {useState} from 'react';
import AppBar from '@material-ui/core/AppBar';
import TabPanel from '../containers/TabPanel';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import UserBanner from '../containers/UserBanner';
import UserConnections from '../containers/UserConnections';
import SessionsPanel from '../containers/SessionsPanel';
import Footer from '../containers/Footer';
import { dashStyles } from '../styles/dashStyles';
import SessionsCreatePanel from '../containers/SessionCreatePanel';
import { Box } from '@material-ui/core';
import { pageStyles } from '../styles/dashStyles';

export default function DashPage({authUser, dataUser}) {
const classes = dashStyles();
const classes = pageStyles();

const [value, setValue] = useState(0);
const [selectedTabTitle, setSelectedTabTitle] = useState('Upcoming');
Expand All @@ -33,20 +32,17 @@ export default function DashPage({authUser, dataUser}) {
}
};

// console.log("DashPage, dataUser.userType: ", dataUser.userType)
return (
<div className={classes.container}>
<Box className={classes.container}>
<Box classes={classes.header}>
<UserBanner dataUser={dataUser} />
<UserConnections dataUser={dataUser}/>
</Box>
<AppBar className={classes.dashAppBar} position="static">
<AppBar className={classes.appBar} position="static">
<Tabs
className={classes.authTabs}
className={classes.tabs}
value={value}
onChange={changeTab}
// indicatorColor="primary"
// textColor="primary"
centered
>
<Tab className={classes.tab} label="Upcoming" />
Expand All @@ -62,7 +58,6 @@ export default function DashPage({authUser, dataUser}) {
}
</Tabs>
</AppBar>

<TabPanel value={value} index={0}>
<SessionsPanel authUser={authUser} dataUser={dataUser} sessionStatus={'upcoming'} changeTab={changeTab} />
</TabPanel>
Expand All @@ -75,8 +70,7 @@ export default function DashPage({authUser, dataUser}) {
<TabPanel value={value} index={3}>
<SessionsCreatePanel authUser={authUser} dataUser={dataUser} changeTab={changeTab} />
</TabPanel>

<Footer />
</div>
</Box>
)
}
37 changes: 37 additions & 0 deletions src/styles/atomStyles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { makeStyles } from '@material-ui/core/styles';
import { holisticTheme } from './colorThemes';
import bannerImage from '../assets/images/homeBanner_placeholder.jpg';
import logoImage from '../assets/images/logo_placeholder.jpg';

export const searchBoxStyles = makeStyles(() => ({
container: {
backgroundColor: holisticTheme.bgContainer,
borderRadius: '22px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
margin: '2% auto',
padding: '4%',
},
label: {
color: holisticTheme.textLabel,
fontSize: 20,
fontStyle: 'italic',
padding: '2%',
textAlign: 'center',
width: '100%',
},
input: {
backgroundColor: holisticTheme.bgLight,
textAlign: 'left',
padding: '0 2%',
borderRadius: '25px',
},
adornment: {
},
icon: {
// margin: '2%',
color: holisticTheme.textLabel,
},

}))
Loading

0 comments on commit 227158f

Please sign in to comment.