From b8c8dcc98285ecac419ae41e9c9454de76d3acfb Mon Sep 17 00:00:00 2001
From: ALBERICLOOS <albericloos2003@gmail.com>
Date: Mon, 11 Mar 2024 11:02:28 +0100
Subject: [PATCH] Pr review update

---
 frontend/src/components/CreateProject.tsx     | 90 ++++++++----------
 frontend/src/components/FieldWithLabel.tsx    |  6 +-
 .../src/components/ViewProjectStudent.tsx     | 92 ++++++++-----------
 3 files changed, 76 insertions(+), 112 deletions(-)

diff --git a/frontend/src/components/CreateProject.tsx b/frontend/src/components/CreateProject.tsx
index 30266284..690773ad 100644
--- a/frontend/src/components/CreateProject.tsx
+++ b/frontend/src/components/CreateProject.tsx
@@ -4,6 +4,7 @@ import {SelectionBox} from "./SelectionBox.tsx";
 import Calendar from "react-calendar";
 import 'react-calendar/dist/Calendar.css';
 import {FaUpload} from "react-icons/fa";
+import "../assets/styles/small_components.css";
 
 
 export function CreateProject(): JSX.Element {
@@ -32,20 +33,16 @@ export function CreateProject(): JSX.Element {
                 <div className="field-label">
                     <label className="label">Project naam:</label>
                 </div>
-                <div className="field-body">
-                    <div className="field">
-                        <Inputfield placeholder="Geef een naam in"/>
-                    </div>
+                <div className="field-body field">
+                    <Inputfield placeholder="Geef een naam in"/>
                 </div>
             </div>
             <div className="field is-horizontal">
                 <div className="field-label">
                     <label className="label">Vak:</label>
                 </div>
-                <div className="field-body">
-                    <div className="field">
-                        <SelectionBox options={["vak1", "vak2", "vak3"]}/>
-                    </div>
+                <div className="field-body field">
+                    <SelectionBox options={["vak1", "vak2", "vak3"]}/>
                 </div>
             </div>
             <div className="field is-horizontal">
@@ -58,15 +55,11 @@ export function CreateProject(): JSX.Element {
                         {showCalender &&
                             <>
                                 <Calendar onChange={e => deadlineChange(e)} value={deadlineValue}/>
-                                <div className="is-horizontal">
-                                    <div className="field">
-                                        <SelectionBox options={hours}/>
-                                        <label className={"title ml-3 mr-3"}>:</label>
-                                        <SelectionBox options={minutes}/>
-
-                                    </div>
+                                <div className="is-horizontal field">
+                                    <SelectionBox options={hours}/>
+                                    <label className={"title ml-3 mr-3"}>:</label>
+                                    <SelectionBox options={minutes}/>
                                 </div>
-
                             </>
                         }
                     </label>
@@ -76,13 +69,11 @@ export function CreateProject(): JSX.Element {
                 <div className="field-label">
                     <label className="label">Beschrijving:</label>
                 </div>
-                <div className="field-body">
-                    <div className="field">
-                        <div style={{width: "33%"}}>
-                            <textarea className="textarea" placeholder="Optionele beschrijving van het project"
-                                      value={description}
-                                      onChange={e => setDescription(e.target.value)}/>
-                        </div>
+                <div className="field-body field">
+                    <div style={{width: "33%"}}> {/* Deze moet er blijven, anders doet css raar*/}
+                        <textarea className="textarea" placeholder="Optionele beschrijving van het project"
+                                  value={description}
+                                  onChange={e => setDescription(e.target.value)}/>
                     </div>
                 </div>
             </div>
@@ -90,33 +81,29 @@ export function CreateProject(): JSX.Element {
                 <div className="field-label">
                     <label className="label">Docker file:</label>
                 </div>
-                <div className="field-body">
-                    <div className="field">
-                        <div className="file has-name">
-                            <label className="file-label">
-                                <input className="file-input" type="file" name="resume"/>
-                                <span className="file-cta">
-                                        <span className="file-icon">
-                                            <FaUpload/>
-                                        </span>
-                                            <span className="file-label">
-                                                Kies een bestand
-                                            </span>
-                                    </span>
-                                <span className="file-name">
-                                        C:\home\files\docker_file.dockerfile
-                                    </span>
-                            </label>
-                        </div>
-                    </div>
+                <div className="field-body field file has-name">
+                    <label className="file-label">
+                        <input className="file-input" type="file" name="resume"/>
+                        <span className="file-cta">
+                            <span className="file-icon">
+                                <FaUpload/>
+                            </span>
+                            <span className="file-label">
+                                Kies een bestand
+                            </span>
+                        </span>
+                        <span className="file-name">
+                            C:\home\files\docker_file.dockerfile
+                        </span>
+                    </label>
                 </div>
             </div>
             <div className="field is-horizontal">
                 <div className="field-label">
                     <label className="label">Indiening files:</label>
                 </div>
-                <div className="field-body">
-                    <div className="field">
+                <div className="field-body field">
+                    <div className="field"> {/* Deze moet er blijven, anders doet css raar*/}
                         <label>Specifieer welke files de ingediende zip moet bevatten. Splits per komma.</label>
                         <br/>
                         <Inputfield placeholder="vb: diagram.dgr,verslag.pdf,textbestand.txt"/>
@@ -155,14 +142,12 @@ export function CreateProject(): JSX.Element {
                                         onderstaande):</label>
                                 </div>
                                 <br/>
-                                <div className="field-body">
-                                    <div className="field is-horizontal">
-                                        <div className="field-label">
-                                            <input type="checkbox"/>
-                                        </div>
-                                        <div className="field-body">
-                                            <label className="label is-fullwidth">random</label>
-                                        </div>
+                                <div className="field-body field is-horizontal">
+                                    <div className="field-label">
+                                        <input type="checkbox"/>
+                                    </div>
+                                    <div className="field-body">
+                                        <label className="label is-fullwidth">random</label>
                                     </div>
                                 </div>
                                 <div className="field is-horizontal">
@@ -170,7 +155,6 @@ export function CreateProject(): JSX.Element {
                                         <input type="checkbox"/>
                                     </div>
                                     <div className="field-body">
-
                                         <label className="label is-fullwidth">studenten kiezen zelf</label>
                                     </div>
                                 </div>
diff --git a/frontend/src/components/FieldWithLabel.tsx b/frontend/src/components/FieldWithLabel.tsx
index 54e1c288..7d6a1e40 100644
--- a/frontend/src/components/FieldWithLabel.tsx
+++ b/frontend/src/components/FieldWithLabel.tsx
@@ -6,10 +6,8 @@ export default function FieldWithLabel(props: { fieldLabel: string, fieldBody: s
             <div className="field-label">
                 <label className="label">{props.arrow && "> "} {props.fieldLabel}: </label>
             </div>
-            <div className="field-body">
-                <div className="field">
-                    <label>{props.fieldBody}</label>
-                </div>
+            <div className="field-body field">
+                <label>{props.fieldBody}</label>
             </div>
         </div>
     );
diff --git a/frontend/src/components/ViewProjectStudent.tsx b/frontend/src/components/ViewProjectStudent.tsx
index 5a688668..acdfa59f 100644
--- a/frontend/src/components/ViewProjectStudent.tsx
+++ b/frontend/src/components/ViewProjectStudent.tsx
@@ -14,10 +14,8 @@ export default function ViewProjectStudent(): JSX.Element {
                 <div className="field-label">
                     <label className="label">{"> "}Status: </label>
                 </div>
-                <div className="field-body">
-                    <div className="field">
-                        <label className={"has-text-danger"}>Failed</label>
-                    </div>
+                <div className="field-body field">
+                    <label className={"has-text-danger"}>Failed</label>
                 </div>
             </div>
             <FieldWithLabel fieldLabel={"Beschrijving"}
@@ -28,7 +26,7 @@ export default function ViewProjectStudent(): JSX.Element {
                     <label className="label">Indiening moet bevatten:</label>
                 </div>
                 <div className="field-body">
-                    <div className="field">
+                    <div className="field"> {/*Deze moet blijven, anders gaan de elementen in elkaar*/}
                         <li>Diagram.dgr</li>
                         <li>verslag.pdf</li>
                     </div>
@@ -38,36 +36,33 @@ export default function ViewProjectStudent(): JSX.Element {
                 <div className="field-label">
                     <label className="label">Groepsleden(3/4): </label>
                 </div>
-                <div className="field-body">
-                    <div className="field">
-                        <table className={"table is-fullwidth"}>
-                            <thead>
-                            <tr>
-                                <th>Naam</th>
-                                <th>Email</th>
-                                <th>Laatste indiening</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr>
-                                <td>Jan</td>
-                                <td>jan@ugent.be</td>
-                                <td> -</td>
-                            </tr>
-                            <tr>
-                                <td>Peter</td>
-                                <td>peter@ugent.be</td>
-                                <td> -</td>
-                            </tr>
-                            <tr>
-                                <td>Erik</td>
-                                <td>erik@ugent.be</td>
-                                <td><FaCheck/></td>
-                            </tr>
-
-                            </tbody>
-                        </table>
-                    </div>
+                <div className="field-body field">
+                    <table className={"table is-fullwidth"}>
+                        <thead>
+                        <tr>
+                            <th>Naam</th>
+                            <th>Email</th>
+                            <th>Laatste indiening</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>Jan</td>
+                            <td>jan@ugent.be</td>
+                            <td> -</td>
+                        </tr>
+                        <tr>
+                            <td>Peter</td>
+                            <td>peter@ugent.be</td>
+                            <td> -</td>
+                        </tr>
+                        <tr>
+                            <td>Erik</td>
+                            <td>erik@ugent.be</td>
+                            <td><FaCheck/></td>
+                        </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
             <div className="field is-horizontal">
@@ -75,8 +70,7 @@ export default function ViewProjectStudent(): JSX.Element {
                     <label className="label">Indiening(zip)</label>
                 </div>
                 <div className="field-body">
-                    <div className="field">
-
+                    <div className="field"> {/* Deze moet blijven */}
                         <li className={"mb-3"}>
                             <label className={"mr-3"}>My_files.zip </label>
                             <button className="button">
@@ -89,22 +83,14 @@ export default function ViewProjectStudent(): JSX.Element {
                                     <label className="file-label">
                                         <input className="file-input" type="file" name="resume"/>
                                         <span className="file-cta">
-                                        <span className="file-icon">
-                                            <FaUpload/>
+                                            <span className="file-icon"><FaUpload/></span>
+                                            <span className="file-label">Kies een bestand</span>
                                         </span>
-                                            <span className="file-label">
-                                                Kies een bestand
-                                            </span>
-                                    </span>
-                                        <span className="file-name">
-                                        This_is_the_file.zip
-                                    </span>
+                                        <span className="file-name">This_is_the_file.zip</span>
                                     </label>
                                 </div>
                                 <div className="field-body">
-                                    <button className="button">
-                                        <FaDownload/>
-                                    </button>
+                                    <button className="button"><FaDownload/></button>
                                 </div>
 
                             </div>
@@ -112,12 +98,8 @@ export default function ViewProjectStudent(): JSX.Element {
                     </div>
                 </div>
             </div>
-            <div className="columns is-mobile is-centered">
-                <div className="column is-half">
-                    <button className="button is-medium is-center" style={{backgroundColor: "#9c9afd"}}>Bevestigen
-                    </button>
-                </div>
-
+            <div className="columns is-mobile is-centered column is-half">
+                <button className="button is-medium is-center" style={{backgroundColor: "#9c9afd"}}>Bevestigen</button>
             </div>
         </>
     );