Kris moe

src/App.js

@@ -19,8 +19,11 @@ function App() {
      <ItemHeaderEditable  src = "https://upload.wikimedia.org/wikipedia/commons/8/89/Tomato_je.jpg" 
     alt = "tomato" title = "Tomato"></ItemHeaderEditable > */}
     <NavBar></NavBar>
+    <div class="content">
     <Outlet />
     </div>
+
+    </div>
   );
 }
 

src/components/ListItem.jsx

@@ -15,10 +15,10 @@ export default function ListItem({name, description, image, viewLink, editLink})
                 <Col onClick={()=>navigate(viewLink)}>
                     <img src={image} alt="food" className={styles.image}/>
                 </Col> 
-                : <></>}
+                : <Col></Col>}
             <Col className={styles.content}>
                 <Col onClick={()=>navigate(viewLink)} >
-                    <h4> {name} </h4>
+                    <h4 className={styles.title}> {name} </h4>
                     </Col>
                 <Col onClick={()=>navigate(viewLink)} >
                     <p className={styles.description}> {description}</p></Col>

src/components/SearchResult.jsx

@@ -0,0 +1,25 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { Link, useNavigate } from "react-router-dom";
+import styles from '../css/ListItem.module.css'
+import button from '../css/Buttons.module.css'
+
+
+export default function SerarchResult({name, description, image, viewLink}) {
+    const navigate = useNavigate()
+    return (
+        // <Container>
+        <Row  className={styles.listItem}>
+            {image ?
+                <Col onClick={()=>navigate(viewLink)}>
+                    <img src={image} alt="food" className={styles.image}/>
+                </Col> 
+                : <Col ></Col>}
+            <Col  xs={10} className={styles.content} onClick={()=>navigate(viewLink)}>
+                <h4 className={styles.title}> {name} </h4> 
+            </Col>
+        </Row>
+        // {/* </Container> */}
+    )
+}

src/css/ItemHeader.module.css

@@ -1,6 +1,6 @@
 .image{
-    height:20vw ;
-    width:30vw;
+    height:30vh ;
+    width:40vh;
     border-radius: 1em;
     border: 3px solid #171707;
     position: static;
@@ -33,6 +33,9 @@
     position: absolute;
     bottom: 0;
     left: 0;
+    background-color: #ffffff88;
+    border-radius: 1em;
+    margin-left: 1em;
 }
 
 .editButton{
@@ -54,3 +57,7 @@
 .editButton:hover{
     background-color: #cfcc7e;
 }
+.headerContainer{
+    position: relative;
+ left: calc(50vw - 20vh);   
+}

src/css/ItemPageLayout.module.css

@@ -0,0 +1,4 @@
+.center{
+    display: flex;
+    justify-content: center;
+}

src/css/ListItem.module.css

@@ -1,9 +1,12 @@
 .listItem {
     cursor: pointer;
-    background-color: #c2d0a1;
-    border-radius: 1em;
+    background-color: #ffffff;
+    border-radius: 10px;
     position: relative;
-
+    margin: 1em;
+    border: double 3px #b6c399;
+
+
 }
 .image{
     width: 5em;
@@ -16,7 +19,8 @@
     color:  #0d2714;
     background-color: #b6c399;
     padding: 0.5em;
-    margin: 0.5em;
+    margin: 1em;
+    margin-top: 2em;
     border-radius: 5px;
     border: none;
     width: 8em;
@@ -34,9 +38,9 @@
 }
 .editContaier{
     align-self: stretch;
-    right: 0;
+
     height: 100%;
-    position:absolute;
+
 }
 .editButton:hover{
     background-color: #8d9a6e;
@@ -46,6 +50,9 @@
     min-width: 10em;
 
 }
+.title{
+    margin-top: .5em;
+}
 @media only screen and (max-width: 400px) {
     .description{
         display: none;

src/css/NavBar.module.css

@@ -2,11 +2,12 @@
     display: flex;
     width: 100%;
     background-color: #eeeca2;
-
+    z-index: 3;
 }
 
 .meAuto {
     width: 100%;
+    z-index: 3;
 }
 
 
@@ -19,10 +20,10 @@
     border: double 5px #eeeca2;
     padding: 1em;
     flex-grow: 1;
-
+    z-index: 3;
 }
 .navlink:hover{
-    background-color: #d0ce86;
+    background-color: #e1c79a;
 
 }
 @media only screen and (min-width: 600px) {
@@ -34,6 +35,7 @@
         background-color: #eeeca2;
         width: 100%;
         height: 5em;
+        z-index: 3;
     }
 
   }
@@ -45,6 +47,8 @@
         display: flex;
         background-color: #eeeca2;
         width: 100%;
+        height: 5em;
+        z-index: 3;
     }
 
 }

src/css/Search.module.css

@@ -1,14 +1,146 @@
 .searchicon{
-    height: 2em;
+    height: 4em;
     width: 2em;
+    padding-left: 0.5em;
 
 }
+.centerContents{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .searchIconContainer{
-    border:none;
+    outline: 1px solid #49c85d;
     background-color: #00000000;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    border-radius: 3px;
+    width: 7.65em;
+    height: 41.5px;
+    transition: width 0.5s;
+    background-color: #ffffff;
+    margin: 1em;
+}
+.searchIconContainer:hover{
+    outline: 3px solid #000000;
+    border-radius: 5px ;
+    background-color: #ffffff;
+    width: 90%;
 }
+
 .container{
-    border: 1px solid #000000;
-    border-radius: 5px;
-    width:14.5em;
+    border-top: 1px solid #ffffff;
+    border-left: 1px solid #ffffff;
+    border-bottom: 1px solid #ffffff;
+    border-right:none;
+    border-radius: 1px 0px 0px 1px;
+    display: none;
+    width: 0em;
+    caret-color: #00000000;
+    background-color: #ffffff;
+
+    transition: width 0.5s;
+   transition: width 0.5s;
+}
+.container:focus{
+    display: block;
+    border: none;
+    width: 100%;
+    background-color: #ffffff;
+    outline: none ;
+
+}
+.searchIconContainer:hover .container{
+    display: block;
+    border: none;
+    width: 100%;
+    background-color: #ffffff;
+
+    outline: none ;
+}
+.searchIconContainer:focus-within .container{
+    border: none;
+
+    display: block;
+    width: 100%;
+    background-color: #ffffff;
+
+    outline: none ;
+}
+@keyframes cursor {
+    0%   { border-right: solid 1px #000000;}
+
+    50%  { border-right: solid 1px #ffffff;}
+
+    100% { border-right: solid 1px #000000;}
+  }
+.searchIconContainer:focus-within::before{
+    align-self: center;
+    border-right: solid 1px #000000;
+    margin-top: 2px;
+    width: 4px;
+    height: 1.25em;
+    content: " ";
+    animation-name: cursor;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: steps(1, jump-start);
+}
+.searchIconContainer:focus-within{
+    background-color: #ffffff;
+}
+.searchIconContainerWithText{
+    color: #000000;
+    width: 90%;
+    .container{
+        width: 100%;
+        display: block;
+        caret-color: #000000;
+    }
+}
+.searchIconContainerWithText.searchIconContainerWithText:focus-within::before{
+    align-self: center;
+    border-right: solid 1px #ffffff;
+    width: 4px;
+    height: 1em;
+    content: " ";
+    animation: none;
+}
+.searchIconContainerWithText.searchIconContainerWithText::before{
+    align-self: center;
+    border-right: solid 1px #ffffff;
+    width: 4px;
+    height: 1em;
+    content: " ";
+    animation: none;
+}
+.searchbutton{
+    color:  #0d2714;
+    background-color: #49c85d;
+    border: 5px solid #49c85d;
+    box-shadow: -2px 0px 0px 0px #49c85d;
+    height: 30px;
+    padding: 5px;
+    padding: 1em;
+    display: flex;
+    flex-direction: row; 
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 0;
+    border-radius:  3px;
+
+}
+.searchbutton:hover{
+    background-color: #35b148;
+    border: 5px solid #35b148;
+    box-shadow: -9px 0px 0px 0px #35b148;
+}
+.searchbar{
+    width: 14em;
+    height: 2em;
 }
+.searchText{
+    padding-top:0.8em;
+}

src/css/page.css

@@ -19,7 +19,7 @@ body{
 
 } */
 @media only screen and (min-width: 600px) {
-    body {
+    .content {
       margin-top: 5em;
     }
 

src/pages/food/CreateFood.js

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useState,useEffect } from "react";
 import { useNavigate } from "react-router-dom"
 import searchStyle from "../../css/Search.module.css"
+import SerarchResult from "../../components/SearchResult";
 export default function CreateFood() {
     const navigate = useNavigate()
     const [food, setFood] = useState("")
@@ -39,20 +40,33 @@ export default function CreateFood() {
         const body = await res.json()
         navigate('/food/'+body._id)
     }
+    const [iconContainer, setIconContainer] = useState(searchStyle.searchIconContainer)
+    useEffect(()=>{
+      if(food == ""){
+        setIconContainer(searchStyle.searchIconContainer)
+      }else{
+        setIconContainer(searchStyle.searchIconContainerWithText + " " + searchStyle.searchIconContainer)
+      }
+
+    },[food])
 
     return (<div>
-    <div >
-      <input type="text" value={food} onInput={(e)=>{setFood(e.target.value)}} className={searchStyle.container}/>
-      <button onClick={searchFood}  className ={searchStyle.searchIconContainer}>
-      <img src ="https://upload.wikimedia.org/wikipedia/commons/0/0b/Search_Icon.svg" alt= "search"  className={searchStyle.searchicon}></img>
-
-      </button>
+    <div class={searchStyle.centerContents}>
+      <div className={iconContainer} >
+        <input type="text" value={food} onInput={(e)=>{setFood(e.target.value)}} className={searchStyle.container} />
+        <button onClick={searchFood}  className ={searchStyle.searchbutton}>
+        <p  className ={searchStyle.searchText}>Search</p>
+        <img src ="https://upload.wikimedia.org/wikipedia/commons/0/0b/Search_Icon.svg" alt= "search"  className={searchStyle.searchicon}></img>
+
+        </button>
       </div>
+    </div>
       { results && results.length !== 0 ? 
         results.map((e,i) => 
         // using array index as keys here is fine so long as there is no way to add/remove elements from the array
           <div key={i} onClick={()=>{createFood(e)}}> 
-            <span>{ e.name }</span>
+            <SerarchResult name={ e.name } image ={e.image}></SerarchResult>
+
           </div>
         ) : <></> }
     </div>)