Merge pull request #48 from chingu-voyages/development

merge dev into main
chingu-voyages · Nov 10, 2023 · 325829b · 325829b
2 parents 48ddd02 + ce2ec23
commit 325829b
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/appLogo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Zest App</title>
   </head>

diff --git a/public/appLogo.ico b/public/appLogo.ico
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,6 @@
 import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { HomeLayout } from './layout';
+import './index.css';
 
 import { RecipeDetails } from './pages/recipeDetails';
 import { NotFound } from './pages/notFound';
@@ -26,9 +27,9 @@ const router = createBrowserRouter([
 const App = () => {
     return (
         <RouterProvider router={router}>
-            <Outlet classname='outlet' />
+            <Outlet classname="outlet" />
         </RouterProvider>
     );
 };
 
-export default App;
+export default App;
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -6,7 +6,7 @@ const Footer = () => {
     const { isDarkTheme } = useGlobalContext();
 
     return (
-        <footer className={`${styles.footer} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
+        <footer className={`${styles.footer} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
             <section className={styles['logo-section']}>
                 <AppLogoComponent />
             </section>
@@ -19,7 +19,7 @@ const Footer = () => {
                         target="_blank"
                         rel="noreferrer"
                         href="https://github.com/chingu-voyages/v46-tier2-team-16/tree/main"
-                        title="External github repo link will open on a new tab"
+                        data-title="External github repo link will open on a new tab"
                     >
                         v46-tier2-team-16
                     </a>

diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
@@ -110,11 +110,11 @@ a {
         color: #393838;
     }
 
-    a[title]:hover::after {
+    a[data-title]:hover::after {
         background-color: rgb(216, 172, 172);
         border-radius: 25px;
         color: #000;
-        content: attr(title);
+        content: attr(data-title);
         position: absolute;
         top: 1%;
         left: 12%;
@@ -182,4 +182,8 @@ a {
 .dark-theme {
     background-color: var(--dark-theme-background-color);
     color: var( --dark-theme-primary-text-color); 
+}
+
+.light-theme {
+    background-color: var(--light-theme-background-color);
 }
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -7,7 +7,7 @@ const Header = () => {
     const { isDarkTheme } = useGlobalContext();
 
     return (
-        <header className={`${styles.header} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
+        <header className={`${styles.header} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
             <AppLogoComponent />
             <section>
                 <ToggleTheme />

diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -18,6 +18,10 @@ header {
     color: var( --dark-theme-primary-text-color);
 }
 
+.light-theme {
+    background-color: var(--light-theme-background-color);
+}
+
 /* media query for desktop */
 @media only screen and (min-device-width: 768px) and (max-device-width: 6024px) {
     header {

diff --git a/src/components/Loader/Loader.module.css b/src/components/Loader/Loader.module.css
@@ -18,6 +18,7 @@ h1 {
 	overflow: hidden;
 	white-space: nowrap;
 	animation: typing 1s steps(20, end), blink-caret .75s step-end infinite;
+
 }
 
 .loader {
@@ -27,20 +28,19 @@ h1 {
 	align-items: center;
 }
 
-@keyframes typing {
+ @keyframes typing {
 	from { width: 0; }
-	to { width: 100%; }
-}
+	to { width: 250px; }
+} 
 
-@keyframes blink-caret {
+ @keyframes blink-caret {
 	from, to { border-color: transparent; }
 	50% { border-color: black; }
-}
+} 
 
 .typing-text::after {
 	content: "|";
-	animation: blink-caret .75s step-end infinite;
-}
+	 animation: blink-caret .75s step-end infinite; }
 
 .dark-theme {
 	background-color: var(--dark-theme-background-color);

diff --git a/src/components/Recipe/Recipe.jsx b/src/components/Recipe/Recipe.jsx
@@ -7,21 +7,27 @@ import styles from './Recipe.module.css';
 const Recipe = (props) => {
     const { recipe, recipesToDisplay } = props;
     const { isDarkTheme } = useGlobalContext();
-    console.log('recipesToDisplay', recipesToDisplay)
+    console.log('recipesToDisplay', recipesToDisplay);
 
     return (
         <section className={`${styles.section} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
             {recipe.loading && <Loader />}
-            {!recipe.loading && recipesToDisplay.length === 0 ? (<p className={`${styles.noRecipe} ${isDarkTheme ? styles['dark-noRecipe'] : ''}`}>Sorry, no recipe to satisfy your papilles!</p>) : <></>}
+            {!recipe.loading && recipesToDisplay.length === 0 ? (
+                <p className={`${styles.noRecipe} ${isDarkTheme ? styles['dark-noRecipe'] : ''}`}>Sorry, no recipe to satisfy your papilles!</p>
+            ) : (
+                <></>
+            )}
             {!recipe.loading && recipesToDisplay ? (
                 <div className={styles.container}>
                     {recipesToDisplay.map((oneRecipe) => (
                         <RecipeCard key={oneRecipe.id} oneRecipe={oneRecipe} />
                     ))}
                 </div>
-            ) : <></>}
+            ) : (
+                <></>
+            )}
         </section>
     );
 };
 
-export default Recipe;
+export default Recipe;
diff --git a/src/components/Search/Search.module.css b/src/components/Search/Search.module.css
@@ -24,7 +24,8 @@ p {
   display: flex;
   flex-direction: row;
   align-self: center;
-  height:fit-contentl
+  height: 40px;
+  width: 280px;
 }
 
 .containerInput{
@@ -37,12 +38,17 @@ p {
 
 input {
   border-radius: 100px;
-  border: solid 1px black;
+  border: solid 1px #303041;
   padding: 5px 10px 5px 10px;
   box-shadow:  0px 4px 6px rgba(0,0,0,0.1);
   margin-right: 3px;
   width: 100%;
-  height:30px;
+  height:100%;
+}
+
+input:focus {
+  outline: none !important;
+  border-color:#FFD900;
 }
 
 .visuallyHidden {
@@ -57,43 +63,46 @@ input {
 }
 
 .imgLoupe {
-  width:30px;
-  height:28px;
-  padding:2px;
+  width:40px;
+  height:38px;
+  padding:8px;
   border:none;
-  background-color:rgba(255, 235, 105, 1);
+  background-color:#FFD900;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
 }
 
 .imgReset {
-  width:30px;
-  height:30px;
-  padding:2px;
-  background-color:rgba(255, 235, 105, 1);
+  width:40px;
+  height:40px;
+  padding:8px;
+  background-color : #FFD900;
   border-radius: 100px;
   position: absolute;
   top: 1px;
   right: -3px;
+  box-shadow:  0px 4px 6px rgba(0,0,0,0.1);
+  border: solid 1px #303041;
+
 }
 
 .buttonLoupe {
   border: none;
   border-radius: 100px;
-  width: 30px;
-  height: 30px;
+  width: 35px;
+  height: 100%;
   /* margin-left: 3px; */
   position:absolute;
-  right: 4px;
+  right: 9px;
   top:1px;
   background-color: transparent;
 }
 
 .buttonReset {
   border-radius: 100px;
-  width: 30px;
-  height: 30px;
-  margin-left: 3px;
+  width: 35px;
+  height: 100%;
+  margin-left:20px;
   background-color: transparent;
   position: relative;
   border: none;

diff --git a/src/index.css b/src/index.css
@@ -53,6 +53,7 @@ body {
     overflow: auto;
     margin: 0;
     padding: 0;
+    height: 100vh;
 }
 
 /* media query for desktop */

diff --git a/src/layout/HomeLayout.jsx b/src/layout/HomeLayout.jsx
@@ -10,11 +10,12 @@ const HomeLayout = () => {
   return (
     <>
       <Header />
-      <main className={`${styles.main} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
+      <main className={`${styles.main} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
         <Outlet className={styles.outlet} />
       </main>
       <Footer />
     </>
   );
 };
+
 export default HomeLayout;
diff --git a/src/layout/HomeLayout.module.css b/src/layout/HomeLayout.module.css
@@ -10,4 +10,8 @@ main {
 .dark-theme {
     background-color: var(--dark-theme-background-color);
     color: var( --dark-theme-primary-text-color);
+}
+
+.light-theme {
+    background-color: var(--light-theme-background-color);
 }
diff --git a/src/pages/recipeDetails/RecipeDetails.jsx b/src/pages/recipeDetails/RecipeDetails.jsx
@@ -18,7 +18,6 @@ const RecipeDetails = () => {
 
     const recipeById = useSelector((state) => state.recipeById);
     const selectedRecipe = recipeById.recipeById;
-
     return (
         <>
             {recipeById.loading && <Loader />}