styling for fitness signed out

src/components/signed-out/fitness/add-exercise-form/add-exercise-form.component.jsx

@@ -1,5 +1,6 @@
 import { Fragment, useContext, useState } from "react"
-import "./add-exercise-form.styles.scss"
+import "./add-exercise-form.styles.jsx"
+import { FitnessAddExerciseFormContainer, FitnessAddExerciseForm } from "./add-exercise-form.styles.jsx"
 import { Typography } from "@mui/material"
 import FormInput from "../../../shared/form-input/form-input.component"
 import { ButtonsContainer } from "../../../shared/button/button.styles"
@@ -52,13 +53,12 @@ const AddExerciseForm = () => {
  }
 
  return (
- <div className="fitness-add-exercise-form-container">
- <Typography variant="h6">Add exercise to the schedule</Typography>
-
+ <FitnessAddExerciseFormContainer>
  <SimplePaper styles={ paperStyles }>
+ <Typography sx={{ color: "black" }} variant="h6">Add exercise to the schedule</Typography>
  <AddExerciseFormInfo></AddExerciseFormInfo>
 
- <form onSubmit={ handleSubmit } className="fitness-add-exercise-form">
+ <FitnessAddExerciseForm onSubmit={ handleSubmit }>
  <FormInput label="Scheduled date" type="date" required onChange={ handleChange }
  name="exerciseDate" value={ formFields.exerciseDate }></FormInput>
 
@@ -67,14 +67,20 @@ const AddExerciseForm = () => {
 
  <FormInput label="Reps" type="text" onChange={ handleChange }
  name="exerciseReps" value={ formFields.exerciseReps }></FormInput>
-
- <ButtonsContainer>
- <Button type="submit">Add</Button>
- <Button type="button" onClick={ resetFormFields }>Clear</Button>
- </ButtonsContainer>
- </form>
+
+ <div className="container">
+ <div className="row justify-content-evenly align-items-center">
+ <div className="col-sm-12 col-md-12 col-lg-12">
+ <Button type="submit">Add</Button>
+ </div>
+ <div className="col-sm-12 col-md-12 col-lg-12">
+ <Button type="button" onClick={ resetFormFields }>Clear</Button>
+ </div>
+ </div>
+ </div>
+ </FitnessAddExerciseForm>
  </SimplePaper>
- </div>
+ </FitnessAddExerciseFormContainer>
  )
 }
 

src/components/signed-out/fitness/add-exercise-form/add-exercise-form.styles.jsx

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const FitnessAddExerciseFormContainer = styled.div`
+ display: block;
+ justify-content: center;
+ align-items: center;
+ padding-left: 2%;
+ margin-top: 2%;
+ width: 100%;
+`
+
+export const FitnessAddExerciseForm = styled.form`
+ display: block;
+ justify-content: center;
+ align-items: center;
+`

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.component.jsx

@@ -1,12 +1,13 @@
 import OutlinedCard from "../../../shared/mui/card/card.component"
 import { Typography } from "@mui/material"
-import "./search-exercise-result.styles.scss"
+import "./search-exercise-result.styles.jsx"
+import { FitnessSearchResultInfo } from "./search-exercise-result.styles.jsx"
 import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
 import { useContext } from "react"
 import { FitnessContext } from "../../../../contexts/signed-out/fitness/fitness.context"
 
 const outlinedCardStyles = {
- backgroundColor: COLOR_CODES.general["5"]
+ backgroundColor: COLOR_CODES.general["0"]
 }
 
 const SearchExerciseResult = ({ exerciseSearchResult }) => {
@@ -20,7 +21,7 @@ const SearchExerciseResult = ({ exerciseSearchResult }) => {
 
  return (
  <OutlinedCard styles={ outlinedCardStyles }>
- <div className="fitness-search-result-info" onClick={ handleClick }>
+ <FitnessSearchResultInfo onClick={ handleClick }>
  <Typography sx={{ display: "flex" }} 
  variant="body1">{`${exerciseSearchResult.exerciseName}`}</Typography>
 
@@ -35,7 +36,7 @@ const SearchExerciseResult = ({ exerciseSearchResult }) => {
 
  <Typography sx={{ display: "flex" }} 
  variant="body2">{`Difficulty: ${exerciseSearchResult.exerciseDifficulty}`}</Typography>
- </div>
+ </FitnessSearchResultInfo>
  </OutlinedCard>
  )
 }

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.styles.jsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants";
+
+export const FitnessSearchResultInfo = styled.div`
+ display: block;
+ justify-content: center;
+ align-items: center;
+ padding: 0.5%;
+
+ &:hover {
+ cursor: pointer;
+ background-color: ${COLOR_CODES.general["1"]};
+ border: none;
+ }
+`

src/components/signed-out/fitness/search-exercise-results/search-exercise-results.component.jsx

@@ -1,16 +1,17 @@
 import OutlinedCard from "../../../shared/mui/card/card.component"
 import SimplePaper from "../../../shared/mui/paper/paper.component"
-import "./search-exercise-results.styles.scss"
+import "./search-exercise-results.styles.jsx"
+import { FitnessSearchExerciseResults } from "./search-exercise-results.styles.jsx"
 import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
 import { Typography } from "@mui/material"
 import SearchExerciseResult from "../search-exercise-result/search-exercise-result.component"
 import { FitnessContext } from "../../../../contexts/signed-out/fitness/fitness.context"
 import { useContext } from "react"
 
 const paperStyles = {
- backgroundColor: COLOR_CODES.general["1"],
+ backgroundColor: COLOR_CODES.general["7"],
  overflow: "scroll",
- height: "60rem",
+ height: "50rem",
  scrollbarColor: `${COLOR_CODES.scrollbar.scroll} ${COLOR_CODES.scrollbar.background}`,
  scrollbarWidth: "thin"
 }
@@ -19,9 +20,7 @@ const SearchExerciseResults = () => {
  const { exercisesSearchResults } = useContext(FitnessContext)
 
  return (
- <div className="fitness-search-exercise-results">
- <Typography variant="h6">Search results</Typography>
-
+ <FitnessSearchExerciseResults>
  <SimplePaper styles={ paperStyles }>
  {
  exercisesSearchResults.map((exerciseSearchResult) => {
@@ -31,7 +30,7 @@ const SearchExerciseResults = () => {
  }) 
  }
  </SimplePaper>
- </div>
+ </FitnessSearchExerciseResults>
  )
 }
 

src/components/signed-out/fitness/search-exercise-results/search-exercise-results.styles.jsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const FitnessSearchExerciseResults = styled.div`
+ width: 100%;
+ margin-top: 2%;
+`

src/components/signed-out/sign-in-form/sign-in-form.component.jsx

@@ -64,7 +64,7 @@ const SignInForm = () => {
 
  return (
  <SignInContainer>
- <Typography sx={{ color: COLOR_CODES.general["6"] }} variant="h6">Log back in</Typography>
+ <Typography sx={{ color: COLOR_CODES.general["0"] }} variant="h6">Log back in</Typography>
 
  <form onSubmit={ handleSubmit }>
  <FormInput label="Email" type="email" required onChange={ handleChange }

src/components/signed-out/sign-up-form/sign-up-form.component.jsx

@@ -68,7 +68,7 @@ const SignUpForm = () => {
 
  return (
  <SignUpContainer>
- <Typography sx={{ color: COLOR_CODES.general["6"] }} variant="h6">Sign up</Typography>
+ <Typography sx={{ color: COLOR_CODES.general["0"] }} variant="h6">Sign up</Typography>
 
  <form onSubmit={ handleSubmit }>
  <FormInput label="Display name" type="text" required onChange={ handleChange }

src/pages/signed-out/fitness/fitness.component.jsx

@@ -14,6 +14,8 @@ import UpcomingExercises from "../../../components/signed-out/fitness/upcoming-e
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import AddIcon from '@mui/icons-material/Add';
 import ItemTabs from "../../../components/shared/mui/tabs/tabs.component.jsx"
+import { Typography } from "@mui/material"
+import { COLOR_CODES } from "../../../utils/constants/shared.constants.js"
 
 const Fitness = () => {
  const { exercises, exercisesSearchResults, upcomingExercisesView } = useContext(FitnessContext)
@@ -37,15 +39,22 @@ const Fitness = () => {
  <Divider/>
  <br/>
 
- <FitnessSearchAddContainer>
- {
- exercisesSearchResults.length !== 0 ?
- <Fragment>
- <SearchExerciseResults></SearchExerciseResults>
- <AddExerciseForm></AddExerciseForm>
- </Fragment> : null
- }
- </FitnessSearchAddContainer>
+ {
+ exercisesSearchResults.length !== 0 ?
+ <FitnessSearchAddContainer>
+ <div className="container">
+ <Typography sx={{ display: "flex", justifyContent: "left", color: COLOR_CODES.general["0"] }} variant="h6">Search results</Typography>
+ <div className="row">
+ <div className="col-sm-12 col-md-6 col-lg-6">
+ <SearchExerciseResults></SearchExerciseResults>
+ </div>
+ <div className="col-sm-12 col-md-6 col-lg-6">
+ <AddExerciseForm></AddExerciseForm>
+ </div>
+ </div>
+ </div>
+ </FitnessSearchAddContainer> : null
+ }
  </Fragment>
  )
  })

src/pages/signed-out/fitness/fitness.styles.jsx

@@ -14,6 +14,7 @@ export const FitnessScheduleContainer = styled.div`
 
 export const FitnessSearchAddContainer = styled.div`
  display: flex;
- justify-content: center;
+ justify-content: space-between;
  align-items: top;
+ margin-top: 1%;
 `