Attendance UI Enchangements

src/app/tabs/more/attendance/attendance.component.html

@@ -78,26 +78,26 @@
                 <tbody>
                     <tr>
                         <th> Month </th>
-                        <th> Present </th>
                         <th> Absent </th>
+                        <th> Present </th>
                     </tr>
 
                     <tr>
                         <td> June 2020 </td>
-                        <td> 20 </td>
                         <td> 2 </td>
+                        <td> 20 </td>
                     </tr>
 
                     <tr>
                         <td> July 2020 </td>
-                        <td> 18 </td>
                         <td> 4 </td>
+                        <td> 18 </td>
                     </tr>
 
                     <tr>
                         <td> August 2020 </td>
-                        <td> 20 </td>
                         <td> 6 </td>
+                        <td> 20 </td>
                     </tr>
                 </tbody>
             </table>
@@ -113,26 +113,26 @@
                 <tbody>
                     <tr>
                         <th> Month </th>
-                        <th> Present </th>
                         <th> Absent </th>
+                        <th> Present </th>
                     </tr>
 
                     <tr>
                         <td> June 2020 </td>
-                        <td> 20 </td>
                         <td> 2 </td>
+                        <td> 20 </td>
                     </tr>
 
                     <tr>
                         <td> July 2020 </td>
-                        <td> 18 </td>
                         <td> 4 </td>
+                        <td> 18 </td>
                     </tr>
 
                     <tr>
                         <td> August 2020 </td>
-                        <td> 20 </td>
                         <td> 6 </td>
+                        <td> 20 </td>
                     </tr>
                 </tbody>
             </table>

src/app/tabs/more/attendance/attendance.component.scss

@@ -152,10 +152,12 @@
     background-color: var(--ash-black);
     display: flex;
     align-items: stretch;
-    height: 50px;
-    box-shadow: 0px 0px 5px var(--black);
+    height: 40px;
     position: relative;
-    margin-bottom: 2px;
+    margin: 20px auto;
+    width: 90%;
+    overflow: hidden;
+    border-radius: 7px;
 
     button {
         font-size: 14px;
@@ -163,9 +165,11 @@
         border: 0px;
         background-color: transparent;
         color: var(--light-grey);
+        border-radius: 7px;
 
         &.active {
-            color: var(--teal-green);
+            background-color: var(--teal-green);
+            color: white;
         }
     }
 }