Issue #596: Adjustments to the styling of the table

NBISweden · Sep 6, 2022 · 03b3bf3 · 03b3bf3
1 parent 9db19f9
commit 03b3bf3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -855,21 +855,39 @@ Other button classes are defined further down together with other classes for th
   margin: 3rem;
 }
 
+.table-wrapper {
+  padding: 1.5rem 0px;
+}
+
 table {
   border-collapse: collapse;
   width: 70%;
 }
 
-td, th {
-  border: 1px solid #dddddd;
+td {
+  border: none;
   text-align: left;
   padding: 8px;
 }
 
+th {
+  border-top: 1px solid hsl(0deg 0% 90%);
+  text-align: left;
+  padding: 8px;
+  background-color: hsl(185deg 92% 20%);
+  color: white;
+
+}
+
 tr:nth-child(even) {
-  background-color: #dddddd;
+  background-color: hsl(186deg 30% 94%);
 }
 
+tr:last-of-type td {
+  border-bottom: 1px solid hsl(0deg 0% 90%);
+}
+
+
 .image-container {
   display: flex;
   align-items: center;

diff --git a/frontend/src/pages/VacationPlanner.tsx b/frontend/src/pages/VacationPlanner.tsx
@@ -459,20 +459,24 @@ export const VacationPlanner = () => {
     },
   ];
 
+  //The empty heading tags make the top border go all the way out
   const VacationHeadings = () => (
     <tr>
       <th>Start date</th>
       <th>End date</th>
-      <th>Actions</th>
+      <th></th>
+      <th></th>
     </tr>
   );
   const vacationTable = data.map((element) => {
     return (
       <tr>
         <td>{element.StartDate}</td>
         <td>{element.EndDate}</td>
-        <td className="image-container">
+        <td>
           <img src={pencil} className="pencil-icon" alt="pencil to edit" />
+        </td>
+        <td>
           <img src={trash} className="trash-icon" alt="trash icon to delete" />
         </td>
       </tr>