#588 rearrange quick add elements

NBISweden · Sep 7, 2022 · 9a4b3a3 · 9a4b3a3
1 parent 4ef2c73
commit 9a4b3a3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 41 deletions.
diff --git a/frontend/src/components/QuickAdd.tsx b/frontend/src/components/QuickAdd.tsx
@@ -185,7 +185,7 @@ export const QuickAdd = ({
   };
 
   const getSearchClasses = () => {
-    let classes = "col-3 footer-field ";
+    let classes = "quick-add-input ";
     if (search.text != "") classes += issue ? "valid" : "invalid";
     return classes;
   };
@@ -242,17 +242,11 @@ export const QuickAdd = ({
   };
 
   return (
-    <div>
-      <h2> Add a new row</h2>
-      <div className="row">
-        <label htmlFor="input-issue" className="col-3 input-label hidden">
+    <div className="row quick-add">
+      <div className="col-4 quick-add-input-wrapper">
+        <label htmlFor="input-issue" className="hidden">
           Issue (e.g. 3499) / free text
         </label>
-        <label htmlFor="select-activity" className="col-3 select-label hidden">
-          Select activity
-        </label>
-      </div>
-      <div className="row">
         <input
           id="input-issue"
           aria-keyshortcuts="ctrl+a"
@@ -278,12 +272,17 @@ export const QuickAdd = ({
           alt="Validity"
           aria-label="Indicator for validity of issue number - x for not valid, check for valid."
         />
+      </div>
+
+      <div className="col-4">
+        <label htmlFor="select-activity" className="hidden">
+          Select activity
+        </label>
         <select
-          className="col-3 footer-field"
+          className="quick-add-input"
           name="activity"
           id="select-activity"
           onChange={handleSetActivity}
-          style={{ width: "50%" }}
         >
           {activities &&
             activities.map((activity) => {
@@ -294,8 +293,10 @@ export const QuickAdd = ({
               );
             })}
         </select>
-        <button className="col-3 basic-button plus-button" onClick={handleAdd}>
-          <img src={plus} alt="Add line" />
+      </div>
+      <div className="col-4">
+        <button className="basic-button add-button" onClick={handleAdd}>
+          Add row
         </button>
       </div>
       {search.suggestions.length > 0 && isAutoCompleteVisible && (

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -179,20 +179,6 @@ Other button classes are defined further down together with other classes for th
   }
 }
 
-.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%);
@@ -362,7 +348,7 @@ Other button classes are defined further down together with other classes for th
 
 .footer-container {
   margin-top: 0.2rem;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1rem 1rem 1rem;
   background-color: hsl(0deg 0% 97%);
   display: flex;
 }
@@ -438,7 +424,6 @@ Other button classes are defined further down together with other classes for th
 }
 
 .save-button {
-  margin: 1rem 2rem 2rem;
   min-width: 10rem;
   padding: 1rem 1.5rem;
 }
@@ -448,20 +433,17 @@ Other button classes are defined further down together with other classes for th
   text-align: end;
 }
 
-.plus-button {
-  width: 4.5rem;
+.add-button {
   background-color: hsl(288deg 46% 22%);
   margin-left: 1rem;
+  padding: 0 1rem;
+  height: 2rem;
 }
 
-.plus-button:hover {
+.add-button:hover {
   background-color: hsl(276deg 46% 16%);
 }
 
-.plus-button img {
-  width: 1.8rem;
-}
-
 .star-icon {
   width: 1.7rem;
 }
@@ -497,9 +479,18 @@ Other button classes are defined further down together with other classes for th
   height: 2rem;
 }
 
+.quick-add {
+  height: 100%;
+  align-items: flex-end;
+}
+
 .quick-add-input {
-  padding: 0.5rem 0.75rem;
-  margin: 0 0 0 3.75rem;
+  width: 100%;
+  height: 2rem;
+}
+
+.quick-add-input-wrapper {
+  position: relative;
 }
 
 .autocomplete-container {
@@ -544,8 +535,9 @@ Other button classes are defined further down together with other classes for th
 }
 
 .validation-icon {
-  width: 3.5rem;
-  margin-left: -3.8rem;
+  position: absolute;
+  height: 2rem;
+  right: 1rem;
 }
 
 .hiden {