Merge branch 'la' into dev

src/components/pages/Bookmark.jsx

@@ -18,7 +18,7 @@ function Bookmark() {
 
   for (let i = 0; i < loadedRecipe.length; i++) {
     if(loadedRecipe[i].isBookmarked == true) {
-        recipeList.push (<div className="d-flex card" key={i} style={{ margin: '5%', flexDirection: "row", alignItems: "center", padding: "1% 5%" }} >
+        recipeList.push (<div className="d-flex card" key={i} style={{ margin: '5%', flexDirection: "row", alignItems: "center", padding: "1% 3%" }} >
             <Link to="/" onClick={() => changeCurRecipe(i)}>
             <div className="col-sm" style={{ width: "30%", height: "100px", }}>
                 <img src={loadedRecipe[i].pic} style={{ width: "100px", height: "100px", objectFit: "cover" }} /> {/* //? image of recipe */}
@@ -28,7 +28,7 @@ function Bookmark() {
             <h2 style={{ fontSize: "125%" }}>{loadedRecipe[i].name}</h2> {/* //? name of recipe */}
             <p style={{ fontSize: "80%", fontFamily: 'Archivo', }} >{loadedRecipe[i].description}</p> {/* //? small description of the recipe */}
             </div>
-            <button onClick={() => delBookmark(i)} className="btn btn-danger">Remove bookmark</button>
+            <button onClick={() => delBookmark(i)} className="btn btn-danger"><i class="bi bi-trash"></i></button>
         </div>);
     }
   }

src/components/pages/FridgeList.jsx

@@ -69,7 +69,7 @@ function FridgeList({ingredients, setIngredients, updatePerc}) {
   }
 
     return(<>
-    <h1 style={heading}>Ingredient List</h1>
+    <h1 style={heading}>Basket</h1>
     <div style={{marginLeft: "5%"}}>
       <div className="input-group mb-3">
         <input ref={ingredientNameRef}type="text" placeholder="Ingredient" className="form-control" style={{width:"50px"}}></input>

src/components/pages/VideoPlayer.jsx

@@ -33,7 +33,7 @@ function VideoPlayer() {
       {/* <h1 style={{margin: "5% 0 5% 5%"}} >Video Here</h1> */}
       <div>{recipesList[curRecipe]}</div>
       <Add2Cart/>
-      <button onClick={handleScroll} className="btn btn-dark" >Next Vid</button>
+      <div onClick={handleScroll} style={{position:"absolute",bottom:"60px", backgroundColor:"black", width: "100%", height: "35%"}}>Next Vid</div>
     </section>
   );
 }

src/components/recipe_vid/RecipeVid.css

@@ -1,31 +1,27 @@
-.player-wrapper {
-  position: relative;
-  width: auto; 
-  height: 70vh;
+.vid-page {
+  background-color: black;
+  height: 100vh;
   z-index: 0!important;
 }
-.react-player {
+
+.player-wrapper {
+  padding-top: 50%;
   position: relative;
+  width: auto; 
+  height: 40vh;
+  z-index: 0!important;
+}
+
+.react-player {
+  position: absolute;
   width: 100% !important; 
   height: 100% !important; 
   z-index: 0!important;
 }
 
-.ytp-player-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0!important;
-}
-.react-player > div {
-  z-index: 0!important;
-  position: absolute;
-}
-
-
 .add2Cart{
   position: absolute;
-  bottom: 100px;
+  bottom: 90px;
   right: 10px;
   z-index: 1000;
 }

src/components/recipe_vid/RecipeVid.jsx

@@ -4,24 +4,26 @@ import "./RecipeVid.css"
 
 function RecipeVid(props) {
   return (
-      <div className="player-wrapper">
-        {/* <div className="test">bg box</div> */}
-        <ReactPlayer 
-          className="react-player"
-          url={props.vid}
-          config={{
-            youtube: {
-              width: "100%",
-              playerVars: {
-                autoplay: 1,
-                controls: 0,
-                autohide: 1,
-                wmode: "opaque",
-                origin: window.location.href,
+      <div className="vid-page">
+        <div className="player-wrapper">
+          {/* <div className="test">bg box</div> */}
+          <ReactPlayer 
+            className="react-player"
+            url={props.vid}
+            config={{
+              youtube: {
+                width: "100%",
+                playerVars: {
+                  autoplay: 1,
+                  controls: 0,
+                  autohide: 1,
+                  wmode: "opaque",
+                  origin: window.location.href,
+                },
               },
-            },
-          }}
-        />
+            }}
+          />
+        </div>
       </div>
   );
 }

src/components/recipe_vid/add2Cart.jsx

@@ -17,7 +17,7 @@ function Add2Cart({}) {
   return (
     <div className="add2Cart" data-layer="4">
         <button className="circle" onClick={handleClick}>
-          <h2 className="circle-text">+</h2>
+          <h2 className="circle-text" style={{fontSize:"55px"}}>+</h2>
         </button>
     </div>
   );