Updated main page

src/pages/MainPage/Main.sass

@@ -1,4 +1,5 @@
 @use '/src/styles/variables.sass' as vars
+@use '/src/styles/classes.sass'
 @use 'sass:color'
 
 .padding
@@ -15,107 +16,7 @@ h1
 .name
   font-size: 1.25rem
 
-.tabs
-  width: 100%
 
-  &[data-orientation="vertical"]
-    display: flex
-
-  &__list
-    position: relative
-    display: flex
-    gap: 5rem
-
-  &__list[data-orientation="horizontal"]
-    align-items: center
-
-  &__list[data-orientation="vertical"]
-    flex-direction: column
-    align-items: stretch
-
-  &__indicator
-    position: absolute
-    background-color: color.adjust(vars.$background, $lightness: 20%)
-    transition: all 250ms
-
-  &__indicator[data-orientation="horizontal"]
-    bottom: -1px
-    height: 3px
-
-  &__indicator[data-orientation="vertical"]
-    right: -1px
-    width: 2px
-
-  &__trigger
-    // display: inline-block
-    // padding: 8px 16px
-    // outline: none
-    // cursor: pointer
-    background-color: vars.$background
-    border: none
-    border-radius: 6px 6px 0 0
-    color: vars.$textColor
-    padding: 0.75rem 1.75rem
-    width: 10rem
-    text-align: center
-    text-decoration: none
-    display: inline-block
-    font-size: 1rem
-    font-weight: 500
-    cursor: pointer
-    // transition: all 0.2s ease-out
-
-  &__trigger:hover
-    background-color: color.adjust(vars.$background, $lightness: 20%)
-    // color: hsl(240 5% 34%)
-
-  &__trigger:focus-visible
-    // background-color: hsl(240 5% 96%)
-
-.tabs__trigger[data-disabled],
-.tabs__trigger[data-disabled]:hover
-  opacity: 0.5
-  background-color: transparent
-
-.tabs__content
-  padding: 16px
-
-.table
-  width: 90%
-  border-collapse: collapse
-  margin: 2rem
-  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
-
-  th, td
-    // border: 1px solid vars.$tableBorderColor
-    padding: 0.75rem
-    text-align: left
-    font-size: 1rem
-
-  th
-    background-color: vars.$tableHeaderBackground
-    color: vars.$textColor
-    padding: 1rem
-
-  th:nth-child(1)
-    text-align: center
-    border-radius: 1rem 0 0 0
-
-  th:nth-child(3)
-    border-radius: 0 1rem 0 0
-
-  td
-    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
-
-  td:nth-child(1)
-    width: 10rem
-    text-align: center
-
-  td:nth-child(3)
-    width: 8.75rem
-
-  tbody tr:nth-child(even) 
-    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
 
 .modal
   font-weight: 500

src/pages/MainPage/Main.tsx

@@ -7,6 +7,7 @@ import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
 import { checkConnection, createPdf } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
+import { _employeeName } from '../../stores/employee'
 // @ts-ignore
 // import * as openssl from 'openssl-nodejs'
 
@@ -184,9 +185,12 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">Login Name</span>
+              <span class="name">{_employeeName.get()}</span>
               <Link to="/">
-                <FiLogOut size={25} />
+                <Row gap={0.5}>
+                  <FiLogOut size={25} />
+                  <span>Logout</span>
+                </Row>
               </Link>
             </Row>
           </Row>
@@ -245,7 +249,7 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2 onClick={openPDF}>List of Ready to Approve and Sign Electrical Order of Payments</h2>
+                  <h2 onClick={openPDF}>List of Ready to Approve and Sign in Electrical Order of Payments</h2>
                 </Row>
 
                 <Row>