Merge pull request #141 from tahmid-saj/dev-predictor-recipes-styling

bootstraping recipes
tahmid-saj · Jun 21, 2024 · c99b1e9 · c99b1e9
2 parents 3d144ec + 74148dd
commit c99b1e9
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 47 deletions.
diff --git a/src/components/shared/recipes/components/header/header.styles.jsx b/src/components/shared/recipes/components/header/header.styles.jsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
 
 export const HeaderContainer = styled.div`
-  margin: 2% 2% 2% 0%;
+  /* margin: 2%; */
 `
diff --git a/src/components/shared/recipes/components/pagination/pagination.component.jsx b/src/components/shared/recipes/components/pagination/pagination.component.jsx
@@ -1,5 +1,5 @@
 import "./pagination.styles.jsx";
-import { PaginationContainer, PaginationButtonsContainer } from "./pagination.styles.jsx";
+import { PaginationButtonsContainer, PaginationContainer } from "./pagination.styles.jsx";
 
 import React, { Component, useContext } from "react";
 import { RecipesContext } from "../../../../../contexts/shared/recipes/recipes.context";
@@ -24,19 +24,27 @@ const Pagination = () => {
   };
 
   return (
-    <PaginationContainer>
-      <PaginationButtonsContainer>
-        <Button type="button" onClick={ handlePreviousPage }
-          style={{ visibility: `${displayPreviousPage === false ? "hidden" : ""}` }}>
-          {`< Page ${previousPageNumber}`}
-        </Button>
-
-        <Button type="button" onClick={ handleNextPage }
-          style={{ visibility: `${displayNextPage === false ? "hidden" : ""}` }}>
-          {`Page ${nextPageNumber} >`}
-        </Button>
-      </PaginationButtonsContainer>
-    </PaginationContainer>
+    <div className="container">
+      <PaginationContainer>
+        <div className="row justify-content-center">
+          <PaginationButtonsContainer>
+            <div className="col-sm-12 col-md-6 col-lg-6">
+              <Button type="button" onClick={ handlePreviousPage }
+                style={{ visibility: `${displayPreviousPage === false ? "hidden" : ""}` }}>
+                {`< Page ${previousPageNumber}`}
+              </Button>
+            </div>
+
+            <div className="col-sm-12 col-md-6 col-lg-6">
+              <Button type="button" onClick={ handleNextPage }
+                style={{ visibility: `${displayNextPage === false ? "hidden" : ""}` }}>
+                {`Page ${nextPageNumber} >`}
+              </Button>
+            </div>
+          </PaginationButtonsContainer>
+        </div>
+      </PaginationContainer>
+    </div>
   );
 
 };

diff --git a/src/components/shared/recipes/components/pagination/pagination.styles.jsx b/src/components/shared/recipes/components/pagination/pagination.styles.jsx
@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
 export const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin: 2% 0% 2% 0%;
   padding: 2%;
 `

diff --git a/src/components/shared/recipes/components/recipe/ingredients/ingredients.styles.jsx b/src/components/shared/recipes/components/recipe/ingredients/ingredients.styles.jsx
@@ -10,5 +10,5 @@ export const IngredientQuantitiesContainer = styled.div`
   display: block;
   align-items: center;
   justify-content: center;
-  padding: 2% 0% 2% 0%;
+  padding: 2%;
 `
diff --git a/...ts/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx b/...ts/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx
@@ -17,7 +17,7 @@ import { selectNutritionTrackedDays } from "../../../../../../store/signed-out/n
 import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
 
 const outlinedCardStyles = {
-  backgroundColor: COLOR_CODES.general["5"]
+  backgroundColor: COLOR_CODES.general["0"]
 }
 
 const NutrientPrediction = () => {

diff --git a/src/components/shared/recipes/components/recipe/recipe.component.jsx b/src/components/shared/recipes/components/recipe/recipe.component.jsx
@@ -21,6 +21,15 @@ const cardStyles = {
   margin: "1% 0% 1% 0%"
 }
 
+const nutrientPredictionCardStyles = {
+  backgroundColor: COLOR_CODES.general["6"],
+  margin: "1% 0% 1% 0%",
+  overflow: "scroll",
+  height: "70rem",
+  scrollbarColor: `${COLOR_CODES.scrollbar.scroll} ${COLOR_CODES.scrollbar.background}`,
+  scrollbarWidth: "thin"
+}
+
 const Recipe = () => {
   const { displayedRecipe } = useContext(RecipesContext)
 
@@ -36,7 +45,7 @@ const Recipe = () => {
 
       {
         displayedRecipe.nutrientPredictions !== undefined && displayedRecipe.nutrientPredictions.length !== 0 ? (
-        <OutlinedCard styles={ cardStyles }>
+        <OutlinedCard styles={ nutrientPredictionCardStyles }>
           <NutrientPrediction></NutrientPrediction>
         </OutlinedCard>) : null
       }

diff --git a/src/components/shared/recipes/components/recipe/recipe.styles.jsx b/src/components/shared/recipes/components/recipe/recipe.styles.jsx
@@ -4,6 +4,5 @@ export const RecipeContainer = styled.div`
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 0% 2% 2% 2%;
-  width: 45%;
+  padding: 1% 0% 1% 1%;
 `
diff --git a/src/components/shared/recipes/components/recipe/servings/servings.styles.jsx b/src/components/shared/recipes/components/recipe/servings/servings.styles.jsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 export const ServingsContainer = styled.div`
+  display: block;
   justify-content: space-between;
   align-items: center;
   padding: 2%;

diff --git a/src/components/shared/recipes/components/search-result/search-result.component.jsx b/src/components/shared/recipes/components/search-result/search-result.component.jsx
@@ -1,5 +1,5 @@
 import "./search-result.styles.jsx";
-import { SearchResultContainer } from "./search-result.styles.jsx";
+import { RecipeResult } from "./search-result.styles.jsx";
 
 import { useContext } from "react";
 import { RecipesContext } from "../../../../../contexts/shared/recipes/recipes.context";
@@ -20,10 +20,10 @@ const SearchResult = ({ recipe }) => {
   }
 
   return (
-    <SearchResultContainer onClick={ handleClick }>
+    <RecipeResult onClick={ handleClick }>
       <Typography variant="subtitle1">{`${recipe.title}`}</Typography>
       <Typography variant="body2">{`${recipe.publisher}`}</Typography>
-    </SearchResultContainer>
+    </RecipeResult>
   )
 };
 

diff --git a/src/components/shared/recipes/components/search-result/search-result.styles.jsx b/src/components/shared/recipes/components/search-result/search-result.styles.jsx
@@ -1,15 +1,16 @@
 import styled from "styled-components";
 import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 
-export const SearchResultContainer = styled.div`
+export const RecipeResult = styled.div`
+  display: block;
   justify-content: space-between;
   align-items: center;
   padding: 1%;
   margin: 0.5%;
-  background-color: ${COLOR_CODES.general["5"]};
+  /* background-color: ${COLOR_CODES.general["5"]}; */
 
-  &:hover {
+  /* &:hover {
     background-color: ${COLOR_CODES.general["1"]};
     border: none;
-  }
+  } */
 `
diff --git a/src/components/shared/recipes/components/search-results/search-results.component.jsx b/src/components/shared/recipes/components/search-results/search-results.component.jsx
@@ -1,5 +1,7 @@
 import "./search-results.styles"
-import { SearchResultsContainer, PaginationContainer } from "./search-results.styles";
+import { SearchResultsContainer, SearchResultContainer,
+  PaginationContainer 
+} from "./search-results.styles";
 
 import React, { Component, useState, useContext, Fragment } from "react";
 import Pagination from "../pagination/pagination.component";
@@ -14,7 +16,7 @@ import { Paper } from "@mui/material";
 
 const paperStyles = {
   searchResults: {
-    backgroundColor: COLOR_CODES.general["0"]
+    backgroundColor: COLOR_CODES.general["2"]
   },
   searchResult: {
     backgroundColor: COLOR_CODES.general["0"]
@@ -31,7 +33,9 @@ const SearchResults = () => {
           displayedRecipesOnPage.map((recipe, index) => {
             return (
               <Paper styles={ paperStyles.searchResult }>
-                <SearchResult key={ recipe.id } recipe={ recipe }></SearchResult>
+                <SearchResultContainer>
+                    <SearchResult key={ recipe.id } recipe={ recipe }></SearchResult>
+                </SearchResultContainer>
               </Paper>
             )
           })

diff --git a/src/components/shared/recipes/components/search-results/search-results.styles.jsx b/src/components/shared/recipes/components/search-results/search-results.styles.jsx
@@ -1,10 +1,20 @@
 import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 
 export const SearchResultsContainer = styled.div`
   display: block;
   justify-content: center;
   align-items: center;
-  width: 50%;
+  padding: 1% 1% 1% 0%;
+`
+
+export const SearchResultContainer = styled.div`
+  background-color: ${COLOR_CODES.general["0"]};
+
+  &:hover {
+    background-color: ${COLOR_CODES.general["1"]};
+    border: none;
+  }
 `
 
 export const PaginationContainer = styled.div`

diff --git a/src/pages/shared/recipes/recipes.component.jsx b/src/pages/shared/recipes/recipes.component.jsx
@@ -10,27 +10,38 @@ import RecipesView from "../../../components/shared/recipes/components/recipes-v
 
 import { RecipesContext } from "../../../contexts/shared/recipes/recipes.context.js";
 import { Divider, Typography } from "@mui/material";
+import { COLOR_CODES } from "../../../utils/constants/shared.constants.js";
 
 const Recipes = () => {
   const { displayedRecipe, displayedRecipesOnPage } = useContext(RecipesContext);
 
   return (
     <Fragment>
       <SearchResultsRecipeContainer>
-      <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">Search some recipes</Typography>
+      <Typography sx={{ display: "flex", justifyContent: "center", color: COLOR_CODES.general["6"] }} 
+        variant="h6">Search some recipes</Typography>
       <Header></Header>
 
-      <Divider sx={{ marginRight: "2%" }}/>
+      <br></br>
 
         { 
           displayedRecipesOnPage.length !== 0 &&
-          <SearchResultsMainContainer>
-              <SearchResults></SearchResults>
-              {
-                displayedRecipe !== undefined && displayedRecipe !== null &&
-                <RecipesView ></RecipesView>
-              }
-          </SearchResultsMainContainer>
+          <div className="container">
+            <SearchResultsMainContainer>
+              <div className="row">
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  <SearchResults></SearchResults>
+                </div>
+
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  {
+                    displayedRecipe !== undefined && displayedRecipe !== null &&
+                    <RecipesView ></RecipesView>
+                  }
+                </div>
+              </div>
+            </SearchResultsMainContainer>
+          </div>
         }
       </SearchResultsRecipeContainer>
     </Fragment>

diff --git a/src/pages/shared/recipes/recipes.styles.jsx b/src/pages/shared/recipes/recipes.styles.jsx
@@ -3,13 +3,9 @@ import styled from "styled-components";
 export const SearchResultsRecipeContainer = styled.div`
   justify-content: center;
   align-items: center;
-  margin: 2% 20% 2% 18%;
-  width: 75%;
+  margin: 2% 10% 2% 10%;
 `
 export const SearchResultsMainContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: normal;
-  margin: 2% 0% 2% 0%;
-  width: 100%;
+  justify-content: top;
+  align-items: top;
 `