From 23a46caf56e723f236b9303c0a3498117d33e850 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Tue, 17 May 2022 19:08:56 +0200
Subject: [PATCH 01/12] #333: Replaced placeholder with label according to
 accessibility guidelines

---
 frontend/src/components/QuickAdd.tsx | 2 +-
 frontend/src/index.css               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
index 69b38e0f..83741dce 100644
--- a/frontend/src/components/QuickAdd.tsx
+++ b/frontend/src/components/QuickAdd.tsx
@@ -109,6 +109,7 @@ export const QuickAdd = ({
   return (
     <div className="row">
       <h2> Add a new issue</h2>
+      <label>Type issue number e.g. 3499</label>
       <input
         aria-labelledby="input-issue"
         id="input-issue"
@@ -119,7 +120,6 @@ export const QuickAdd = ({
           setSearch(e.target.value);
           setIssue(null);
         }}
-        placeholder="Type issue number..."
         title={(issue && issue.subject) || ""}
       />
       <img
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4cb05029..aa366165 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -401,7 +401,7 @@ Other button classes are defined further down together with other classes for th
 
 .quick-add-input {
   padding: 0.5rem 0.75rem;
-  margin: 0 0 0 3.75rem;
+  margin: 0 0 0 2rem;
   outline: none;
 }
 

From 8573b2c8b078bedf319d92241193459d88926be4 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Wed, 18 May 2022 10:16:42 +0200
Subject: [PATCH 02/12] #333: Correcting aria label according to accessibility
 guidelines

---
 frontend/src/pages/Report.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx
index dda40d46..17618aee 100644
--- a/frontend/src/pages/Report.tsx
+++ b/frontend/src/pages/Report.tsx
@@ -666,7 +666,7 @@ export const Report = () => {
                     return (
                       <div key={dateStr} className="col-1 cell-container">
                         <input
-                          aria-labelledby={`total of hours spent during the day ${dateStr}`}
+                          aria-label={`total of hours spent during the day ${dateStr}`}
                           type="text"
                           id={dateStr}
                           className="cell not-outline"

From b4529871e58fdccb2f1c18312eac0c16776be224 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Wed, 18 May 2022 12:57:14 +0200
Subject: [PATCH 03/12] #333: Correcting from code review

---
 frontend/src/components/QuickAdd.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
index 83741dce..92337d10 100644
--- a/frontend/src/components/QuickAdd.tsx
+++ b/frontend/src/components/QuickAdd.tsx
@@ -109,9 +109,8 @@ export const QuickAdd = ({
   return (
     <div className="row">
       <h2> Add a new issue</h2>
-      <label>Type issue number e.g. 3499</label>
+      <label htmlFor="input-issue">Type issue number e.g. 3499</label>
       <input
-        aria-labelledby="input-issue"
         id="input-issue"
         className={getSearchClasses()}
         type="number"
@@ -120,6 +119,7 @@ export const QuickAdd = ({
           setSearch(e.target.value);
           setIssue(null);
         }}
+        placeholder="e.g. 3499"
         title={(issue && issue.subject) || ""}
       />
       <img
@@ -129,7 +129,6 @@ export const QuickAdd = ({
         aria-label="Indicator for validity of issue number - x for not valid, check for valid."
       />
       <select
-        aria-label="Activity"
         className="col-3"
         name="activity"
         id="select-activity"

From 0454957c4c2f6ca2fa69a34de21918c24040069c Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Wed, 18 May 2022 14:49:19 +0200
Subject: [PATCH 04/12] #333: Adding a label for activity according to review

---
 frontend/src/components/QuickAdd.tsx | 25 +++++++++++++++++++------
 frontend/src/index.css               |  8 +-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
index 92337d10..e23b9479 100644
--- a/frontend/src/components/QuickAdd.tsx
+++ b/frontend/src/components/QuickAdd.tsx
@@ -95,7 +95,7 @@ export const QuickAdd = ({
   };
 
   const getSearchClasses = () => {
-    let classes = "col-2 quick-add-input ";
+    let classes = "col-2 mx-3 ";
     if (search != "") classes += issue ? "valid" : "invalid";
     return classes;
   };
@@ -107,9 +107,20 @@ export const QuickAdd = ({
   };
 
   return (
-    <div className="row">
-      <h2> Add a new issue</h2>
-      <label htmlFor="input-issue">Type issue number e.g. 3499</label>
+    <div>
+      <h2 className="mx-1"> Add a new issue</h2>
+      <div className="row">
+      <label htmlFor="input-issue"
+      className="col-2 mx-1"
+      >Type issue e.g. 3499
+      </label>
+       <label 
+      htmlFor="select-activity"
+      className="col-3 mx-4" 
+      >Select activity
+      </label>
+      </div>
+      <div className="row">
       <input
         id="input-issue"
         className={getSearchClasses()}
@@ -129,7 +140,7 @@ export const QuickAdd = ({
         aria-label="Indicator for validity of issue number - x for not valid, check for valid."
       />
       <select
-        className="col-3"
+        className="col-3 mx-3"
         name="activity"
         id="select-activity"
         onChange={handleSetActivity}
@@ -144,9 +155,11 @@ export const QuickAdd = ({
             );
           })}
       </select>
-      <button className=" basic-button plus-button" onClick={handleAdd}>
+      <button className="col-2 basic-button plus-button" onClick={handleAdd}>
         <img src={plus} alt="Add line" />
       </button>
+      </div>
+     
     </div>
   );
 };
diff --git a/frontend/src/index.css b/frontend/src/index.css
index aa366165..5e6dc8e2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -399,12 +399,6 @@ Other button classes are defined further down together with other classes for th
   height: 2rem;
 }
 
-.quick-add-input {
-  padding: 0.5rem 0.75rem;
-  margin: 0 0 0 2rem;
-  outline: none;
-}
-
 .not-outline {
   outline: none;
 }
@@ -419,7 +413,7 @@ Other button classes are defined further down together with other classes for th
 
 .validation-icon {
   width: 3.5rem;
-  margin-left: -2.8rem;
+  margin-left: -3.8rem;
 }
 
 .hiden {

From 55cb401ba1cb7a9a95126fda6316842cf0729ddf Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Fri, 20 May 2022 16:10:02 +0200
Subject: [PATCH 05/12] #333: Adjustments in the whole footer in order to make
 elements visible even in zoomed state

---
 frontend/src/components/QuickAdd.tsx | 10 +++++-----
 frontend/src/index.css               | 14 ++++++++++----
 frontend/src/pages/Report.tsx        | 18 +++++++++---------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
index 267bf1a5..0ae44f2a 100644
--- a/frontend/src/components/QuickAdd.tsx
+++ b/frontend/src/components/QuickAdd.tsx
@@ -95,7 +95,7 @@ export const QuickAdd = ({
   };
 
   const getSearchClasses = () => {
-    let classes = "col-2 mx-3 ";
+    let classes = "col-3 mx-3 ";
     if (search != "") classes += issue ? "valid" : "invalid";
     return classes;
   };
@@ -111,12 +111,12 @@ export const QuickAdd = ({
       <h2 className="mx-1"> Add a new row</h2>
       <div className="row">
       <label htmlFor="input-issue"
-      className="col-2 mx-1"
-      >Type issue e.g. 3499
+      className="col-3 mx-1 hidden">
+        Issue e.g. 3499
       </label>
        <label 
       htmlFor="select-activity"
-      className="col-3 mx-4" 
+      className="col-3 mx-4 hidden" 
       >Select activity
       </label>
       </div>
@@ -155,7 +155,7 @@ export const QuickAdd = ({
             );
           })}
       </select>
-      <button className="col-2 basic-button plus-button" onClick={handleAdd}>
+      <button className="col-3 basic-button plus-button" onClick={handleAdd}>
         <img src={plus} alt="Add line" />
       </button>
       </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7803df50..bd94c34f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -143,9 +143,8 @@ Other button classes are defined further down together with other classes for th
 .footer {
   z-index: 100;
   width: 100%;
-  top: calc(100vh - 120px);
+  bottom:0;
   position: fixed;
-  height: 120px;
   background-color: white;
 }
 
@@ -343,7 +342,7 @@ Other button classes are defined further down together with other classes for th
 }
 
 .save-button {
-  margin: 2rem;
+  margin: 1rem 2rem 2rem; 
   min-width: 10rem;
   padding: 1rem 1.5rem;
 }
@@ -421,8 +420,9 @@ Other button classes are defined further down together with other classes for th
 /* The unsaved changes alert message box */
 .unsaved-alert-p {
   color: hsl(26deg 91% 42%); /* Red */
-  margin: 3rem 1rem 2rem;
+  /* margin: 3rem 1rem 2rem; */
   text-align: right;
+  min-height: 2rem;
 }
 
 .comment-container {
@@ -608,3 +608,9 @@ Other button classes are defined further down together with other classes for th
   display: flex;
   justify-content: center;
 }
+
+@media (max-width: 992px) {
+  .hidden{
+    visibility: hidden;
+  }
+}
diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx
index ec37dbe6..36c8c40e 100644
--- a/frontend/src/pages/Report.tsx
+++ b/frontend/src/pages/Report.tsx
@@ -680,20 +680,20 @@ export const Report = () => {
         </main>
         <div className="footer">
           <section className="footer-container">
-            <div className="col-7">
+            <div className="col-8">
               <QuickAdd addIssueActivity={addIssueActivityHandler}></QuickAdd>
             </div>
-            <div className="col-3 ">
+            {toastList.length > 0 && (
+                <Toast onCloseToast={handleCloseToast} toastList={toastList} />
+              )}
+            <div className="col-4 save-changes">
+            <div className="unsaved-alert-p">
               {showUnsavedWarning && (
-                <div className="unsaved-alert-p">
+                
                   <p role="status">⚠ You have unsaved changes</p>
-                </div>
-              )}
-              {toastList.length > 0 && (
-                <Toast onCloseToast={handleCloseToast} toastList={toastList} />
+                
               )}
-            </div>
-            <div className="col-2 save-changes">
+              </div>
               <button className="basic-button save-button" onClick={handleSave}>
                 Save changes
               </button>

From 4719282882cd87ae99f704f98f1b2b10bf385fdd Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Fri, 20 May 2022 17:07:32 +0200
Subject: [PATCH 06/12] #333: Finaladjustment of unsaved changes text

---
 frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index bd94c34f..aa537ee1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -420,7 +420,7 @@ Other button classes are defined further down together with other classes for th
 /* The unsaved changes alert message box */
 .unsaved-alert-p {
   color: hsl(26deg 91% 42%); /* Red */
-  /* margin: 3rem 1rem 2rem; */
+  margin-right: 2rem;
   text-align: right;
   min-height: 2rem;
 }

From 48f67d114c893c5a9d1b1994f6ee2e495ff0efb9 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Fri, 20 May 2022 17:49:25 +0200
Subject: [PATCH 07/12] #333: Lint checks fixes

---
 frontend/src/index.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 75f8dbba..c5dd62b4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -143,7 +143,7 @@ Other button classes are defined further down together with other classes for th
 .footer {
   z-index: 100;
   width: 100%;
-  bottom:0;
+  bottom: 0;
   position: fixed;
   background-color: white;
 }
@@ -350,7 +350,7 @@ Other button classes are defined further down together with other classes for th
 }
 
 .save-button {
-  margin: 1rem 2rem 2rem; 
+  margin: 1rem 2rem 2rem;
   min-width: 10rem;
   padding: 1rem 1.5rem;
 }
@@ -628,11 +628,10 @@ Other button classes are defined further down together with other classes for th
   top: 3px;
   right: 3px;
   width: 0.7rem;
-
 }
 
 @media (max-width: 992px) {
   .hidden{
-    visibility: hidden;
+   visibility: hidden;
   }
 }
\ No newline at end of file

From b600a0fbd0be60cb49b9bfa0026c6cc831ba0c01 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Fri, 20 May 2022 17:57:20 +0200
Subject: [PATCH 08/12] #333: Lint checks fixes

---
 frontend/src/index.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index c5dd62b4..0d88107d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -631,7 +631,7 @@ Other button classes are defined further down together with other classes for th
 }
 
 @media (max-width: 992px) {
-  .hidden{
-   visibility: hidden;
+  .hidden {
+    visibility: hidden;
   }
 }
\ No newline at end of file

From 2103bf5ca381dc884e3f7dee0d67a67fb2d3eeac Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Fri, 20 May 2022 18:07:11 +0200
Subject: [PATCH 09/12] #333: Lint checks end of source newline

---
 frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0d88107d..58f7a570 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -634,4 +634,4 @@ Other button classes are defined further down together with other classes for th
   .hidden {
     visibility: hidden;
   }
-}
\ No newline at end of file
+}

From 49434ce6816cff9f739685a0be50159883fe0438 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Mon, 23 May 2022 13:23:58 +0200
Subject: [PATCH 10/12] #333: More space between heading and labels

---
 frontend/src/components/QuickAdd.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
index 0ae44f2a..3475b66f 100644
--- a/frontend/src/components/QuickAdd.tsx
+++ b/frontend/src/components/QuickAdd.tsx
@@ -108,7 +108,7 @@ export const QuickAdd = ({
 
   return (
     <div>
-      <h2 className="mx-1"> Add a new row</h2>
+      <h2 className="mx-1 mb-2"> Add a new row</h2>
       <div className="row">
       <label htmlFor="input-issue"
       className="col-3 mx-1 hidden">

From 7978eedf4a4f28c158297ba62c6649f9b3ffdb17 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Mon, 23 May 2022 16:46:54 +0200
Subject: [PATCH 11/12] #333: Spacing fixes and css classes, fixing bug of not
 seing total row

---
 frontend/src/components/QuickAdd.tsx | 10 +++++-----
 frontend/src/index.css               | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
index 3475b66f..f1ca2b1a 100644
--- a/frontend/src/components/QuickAdd.tsx
+++ b/frontend/src/components/QuickAdd.tsx
@@ -95,7 +95,7 @@ export const QuickAdd = ({
   };
 
   const getSearchClasses = () => {
-    let classes = "col-3 mx-3 ";
+    let classes = "col-3 footer-field";
     if (search != "") classes += issue ? "valid" : "invalid";
     return classes;
   };
@@ -108,15 +108,15 @@ export const QuickAdd = ({
 
   return (
     <div>
-      <h2 className="mx-1 mb-2"> Add a new row</h2>
+      <h2> Add a new row</h2>
       <div className="row">
       <label htmlFor="input-issue"
-      className="col-3 mx-1 hidden">
+      className="col-3 input-label hidden">
         Issue e.g. 3499
       </label>
        <label 
       htmlFor="select-activity"
-      className="col-3 mx-4 hidden" 
+      className="col-3 select-label hidden" 
       >Select activity
       </label>
       </div>
@@ -140,7 +140,7 @@ export const QuickAdd = ({
         aria-label="Indicator for validity of issue number - x for not valid, check for valid."
       />
       <select
-        className="col-3 mx-3"
+        className="col-3 footer-field"
         name="activity"
         id="select-activity"
         onChange={handleSetActivity}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 58f7a570..a9a3e477 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -138,6 +138,7 @@ Other button classes are defined further down together with other classes for th
 
 .spreadsheet {
   min-height: 100vh;
+  margin-bottom: 5rem;
 }
 
 .footer {
@@ -148,6 +149,20 @@ Other button classes are defined further down together with other classes for th
   background-color: white;
 }
 
+.input-label {
+  margin-left: 0.4rem;
+  margin-top: 0.5rem;
+}
+
+.select-label {
+  margin-left: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.footer-field {
+  margin-left: 1rem;
+}
+
 .header-year {
   font-size: 2.25rem;
   color: hsl(186deg 92% 11%);

From eef9829af8338b878af5efc4232ac67a421306c3 Mon Sep 17 00:00:00 2001
From: Katarina Lejonlid <katarina.lejonlid@nbis.se>
Date: Mon, 23 May 2022 17:06:45 +0200
Subject: [PATCH 12/12] #333: Linter fix

---
 frontend/src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index c456b09b..22bb9f12 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -650,6 +650,7 @@ Other button classes are defined further down together with other classes for th
     visibility: hidden;
   }
 }
+
 .row-focused {
   background-color: hsl(186deg 30% 94%);
 }