styling select-all button

src/assets/styles/app.scss

@@ -8,3 +8,4 @@
 @import './generic/button.scss';
 @import './generic/footer.scss';
 @import './generic/titles.scss';
+@import './generic/select-all.scss';

src/assets/styles/generic/select-all.scss

@@ -0,0 +1,28 @@
+.select-all {
+  input {
+      display: none;
+  }
+
+  label {
+      display: flex;
+      padding: 7px 0 7px 30px;
+      align-items: center;
+      font-family: "Poppins Regular";
+      font-size: 18px;
+      cursor: pointer;
+      transition: ease-in 0.15s;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: $color-primary;
+      }
+  }
+
+  img {
+    margin-left: 10px;
+    width: 30px;
+    height: 30px;
+    display: block;
+  }
+}

src/components/Form.js

@@ -7,44 +7,58 @@ import pizza from '../assets/images/pizza.png'
 import burger from '../assets/images/hamburger.png'
 import salad from '../assets/images/salad.png'
 import sushi from '../assets/images/sushi.png'
+import takeoutbox from '../assets/images/takeout-box.png'
 
 function Form() {
+
+  /* function selectAll(x) {
+    const checkboxes = document.getElementsByClassName('checkbox-button');
+    let n = checkboxes.length
+
+    for (var i = 0; i < n; i++) {
+      checkboxes[i].checked = x.checked;
+    }
+  } */
   return (
     <div className="form-section">
       <Title />
       <form>
-        <div class="form-group">
+        <div className="form-group">
           <div className="checkbox-button">
             <input id="pizza" type="checkbox" name="food-category"/>
-            <label for="pizza"><img src={pizza} alt="pizza" />Pizza</label>
+            <label htmlFor="pizza"><img src={pizza} alt="pizza" />Pizza</label>
           </div>
           <div className="checkbox-button">
             <input id="burger" type="checkbox" name="food-category"/>
-            <label for="burger"><img src={burger} alt="burger" />Burger</label>
+            <label htmlFor="burger"><img src={burger} alt="burger" />Burger</label>
           </div>
           <div className="checkbox-button">
             <input id="salad" type="checkbox" name="food-category"/>
-            <label for="salad"><img src={salad} alt="salad" />Salad</label>
+            <label htmlFor="salad"><img src={salad} alt="salad" />Salad</label>
           </div>
           <div className="checkbox-button">
             <input id="sushi" type="checkbox" name="food-category"/>
-            <label for="sushi"><img src={sushi} alt="sushi" />Sushi</label>
+            <label htmlFor="sushi"><img src={sushi} alt="sushi" />Sushi</label>
           </div>
           <div className="checkbox-button">
             <input id="pizza2" type="checkbox" name="food-category"/>
-            <label for="pizza2"><img src={pizza} alt="pizza" />Pizza</label>
+            <label htmlFor="pizza2"><img src={pizza} alt="pizza" />Pizza</label>
           </div>
           <div className="checkbox-button">
             <input id="burger3" type="checkbox" name="food-category"/>
-            <label for="burger3"><img src={burger} alt="burger" />Burger</label>
+            <label htmlFor="burger3"><img src={burger} alt="burger" />Burger</label>
           </div>
           <div className="checkbox-button">
             <input id="salad4" type="checkbox" name="food-category"/>
-            <label for="salad4"><img src={salad} alt="salad" />Salad</label>
+            <label htmlFor="salad4"><img src={salad} alt="salad" />Salad</label>
           </div>
           <div className="checkbox-button">
             <input id="sushi5" type="checkbox" name="food-category"/>
-            <label for="sushi5"><img src={sushi} alt="sushi" />Sushi</label>
+            <label htmlFor="sushi5"><img src={sushi} alt="sushi" />Sushi</label>
+          </div>
+          <div className="select-all">
+            <input id="select-all" type="checkbox" name="all-food" /* onClick={selectAll(this)} *//>
+            <label htmlFor="select-all">Tout sélectionner<img src={takeoutbox} alt="selectall-takeout" /></label>
           </div>
         </div>
         <Button />