From 1fbf8df44bc36289bdd293e2ebfee2ed894f61cb Mon Sep 17 00:00:00 2001
From: Thibaud Collyn <thibaudcollyn@gmail.com>
Date: Wed, 22 May 2024 14:51:55 +0200
Subject: [PATCH] Tooltip + repositioning of StatusButton

---
 frontend/app/[locale]/components/StatusButton.tsx     |  7 +++++--
 .../[locale]/components/general/RequiredFilesList.tsx | 11 +++++++++--
 frontend/locales/en/common.json                       |  3 ++-
 frontend/locales/nl/common.json                       |  3 ++-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/app/[locale]/components/StatusButton.tsx b/frontend/app/[locale]/components/StatusButton.tsx
index 888c6599..49ef4eb0 100644
--- a/frontend/app/[locale]/components/StatusButton.tsx
+++ b/frontend/app/[locale]/components/StatusButton.tsx
@@ -33,10 +33,13 @@ function StatusButton(
     <Button
       variant="contained"
       onClick={handleClick}
-      style={{
+      sx={{
           border: 'none',
           backgroundColor: 'transparent',
-          margin: 10,
+          minWidth: '30px',  // Ensure the button is square by setting equal width and height
+          minHeight: '30px',  // Adjust the size as needed
+          padding: 0,
+          margin: 1,
       }}
     >
       {statuses[statusIndex].icon}
diff --git a/frontend/app/[locale]/components/general/RequiredFilesList.tsx b/frontend/app/[locale]/components/general/RequiredFilesList.tsx
index e795b6db..5cd34792 100644
--- a/frontend/app/[locale]/components/general/RequiredFilesList.tsx
+++ b/frontend/app/[locale]/components/general/RequiredFilesList.tsx
@@ -1,10 +1,11 @@
 "use client"
 
-import {Button, IconButton, List, ListItem, ListItemText, TextField, Typography} from "@mui/material";
+import {Button, IconButton, List, ListItem, ListItemText, Tooltip, TextField, Typography} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import React, {useState} from "react";
 import Box from "@mui/material/Box";
 import StatusButton from "@app/[locale]/components/StatusButton";
+import {useTranslation} from "react-i18next";
 
 interface ItemsListProps {
     items: string[],
@@ -27,6 +28,7 @@ const ItemsList = ({
                    }: ItemsListProps) => {
     const [newItem, setNewItem] = useState('')
     const [noInput, setNoInput] = useState(false)
+    const {t} = useTranslation();
 
     const handleDelete = (index: number) => {
         const newFields = [...items];
@@ -66,10 +68,10 @@ const ItemsList = ({
                 >
                     {items.map((field, index) => (
                         <ListItem
+                            disablePadding={true}
                             key={index}
                             secondaryAction={
                                 <div>
-                                    <StatusButton files={items_status} setFiles={setItemsStatus} fileIndex={index}/>
                                     <IconButton
                                         edge="end"
                                         aria-label="delete"
@@ -80,6 +82,11 @@ const ItemsList = ({
                                 </div>
                             }
                         >
+                            <Tooltip title={t("status_button_tooltip")} placement="top">
+                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    <StatusButton files={items_status} setFiles={setItemsStatus} fileIndex={index} />
+                                </div>
+                            </Tooltip>
                             <ListItemText
                                 primary={field}
                             />
diff --git a/frontend/locales/en/common.json b/frontend/locales/en/common.json
index 4730716c..7f4cbf02 100644
--- a/frontend/locales/en/common.json
+++ b/frontend/locales/en/common.json
@@ -138,5 +138,6 @@
   "join/leave": "Join/Leave",
   "group_nr": "Group nr",
   "join_leave": "Join/Leave",
-  "not_in_group": "Join a group to submit"
+  "not_in_group": "Join a group to submit",
+  "status_button_tooltip": "Required, optional or forbidden file"
 }
\ No newline at end of file
diff --git a/frontend/locales/nl/common.json b/frontend/locales/nl/common.json
index 16a66b81..c3cabb1a 100644
--- a/frontend/locales/nl/common.json
+++ b/frontend/locales/nl/common.json
@@ -141,5 +141,6 @@
   "join/leave": "Toetreden/Verlaten",
   "group_nr": "Groep nr",
   "join_leave": "Toetreden/Verlaten",
-  "not_in_group": "Je kan niet indienen zonder in een groep te zitten"
+  "not_in_group": "Je kan niet indienen zonder in een groep te zitten",
+  "status_button_tooltip": "Verplicht, optioneel of verboden bestand"
 }
\ No newline at end of file