fix(Pages): Refactor Tailwind && fix href Github icon | JIRA: PT-208

src/assets/css/el-button.scss

@@ -13,38 +13,46 @@ body {
   }
 
   .el-button.el-button--large {
-    @apply h-[51px] rounded-md font-semibold text-sm tracking-wide px-[11px] #{!important};
+    @apply h-12.6 rounded-md font-semibold text-sm tracking-wide px-2.75 #{!important};
   }
 
   .el-button.el-button--small {
     @apply rounded text-xs font-semibold tracking-wide p-0.5 py-3.25 #{!important};
   }
 
   .el-button.el-button--default.el-button--small {
-    @apply rounded max-w-fit h-[25px] #{!important};
+    @apply rounded max-w-fit h-6.2 #{!important};
   }
 
   .el-button.el-button--default.is-plain {
+    @apply transition-all duration-150 ;
+    &::before {
+      @apply opacity-0;
+    }
+    &:hover::before {
+      @apply opacity-100;
+    }
+
     @apply bg-transparent text-dark border-dark shadow-none;
 
     &:hover {
-      @apply bg-dark text-white drop-shadow-lg;
+      @apply bg-dark text-white drop-shadow-lg border-dark;
     }
 
     &:active {
-      @apply drop-shadow-none;
+      @apply drop-shadow-none text-white;
     }
   }
 
   .el-button.el-button--primary.is-plain {
     @apply bg-transparent text-indigo-410 border-indigo-410 shadow-none #{!important};
 
     &:hover {
-      @apply bg-indigo-410 text-white drop-shadow-lg #{!important};
+      @apply bg-indigo-410 text-white drop-shadow-lg border-indigo-410 #{!important};
     }
 
     &:active {
-      @apply drop-shadow-none #{!important};
+      @apply drop-shadow-none text-white #{!important};
     }
   }
 
@@ -56,7 +64,7 @@ body {
     }
 
     &:active {
-      @apply drop-shadow-none bg-secondary #{!important};
+      @apply drop-shadow-none text-black bg-secondary #{!important};
     }
   }
 
@@ -68,7 +76,7 @@ body {
     }
 
     &:active {
-      @apply drop-shadow-none #{!important};
+      @apply drop-shadow-none text-white #{!important};
     }
   }
 
@@ -80,7 +88,7 @@ body {
     }
 
     &:active {
-      @apply drop-shadow-none #{!important};
+      @apply drop-shadow-none text-white #{!important};
     }
   }
 
@@ -92,7 +100,7 @@ body {
     }
 
     &:active {
-      @apply drop-shadow-none #{!important};
+      @apply drop-shadow-none text-white #{!important};
     }
   }
 
@@ -104,7 +112,7 @@ body {
     }
 
     &:active {
-      @apply drop-shadow-none #{!important};
+      @apply drop-shadow-none text-white #{!important};
     }
   }
 

src/assets/css/el-card.scss

@@ -1,6 +1,6 @@
 body {
   .el-card {
-    @apply relative flex flex-col bg-clip-border break-words min-w-0 rounded-[5px] shadow-card cursor-auto text-primary-dark #{!important};
+    @apply relative flex flex-col bg-clip-border break-words min-w-0 rounded-5 shadow-card cursor-auto text-primary-dark #{!important};
     --el-card-bg-color: white !important;
   }
   .el-card .card-header {
@@ -9,7 +9,7 @@ body {
     }
   }
   .el-card .el-card__header {
-    @apply w-full py-[20px] px-6 mb-0 border-b-dark-4;
+    @apply w-full py-5 px-6 mb-0 border-b-dark-4;
   }
   .el-card .el-card__body {
     @apply w-full py-6 px-6 grow shrink;

src/assets/css/el-menu.scss

@@ -24,7 +24,7 @@
 
   .el-sub-menu {
     .el-sub-menu__title {
-      @apply rounded-md px-2 pr-0 h-[45px] text-dark-20 #{!important};
+      @apply rounded-md px-2 pr-0 h-11.25 text-dark-20 #{!important};
       .el-icon.el-sub-menu__icon-arrow {
         @apply text-indigo-410;
       }
@@ -43,7 +43,7 @@
   }
 
   .el-menu-item {
-    @apply rounded-md px-2 pr-0 h-[45px] text-dark-20 #{!important};
+    @apply rounded-md px-2 pr-0 h-11.25 text-dark-20 #{!important};
     &:hover {
       @apply bg-white;
     }

src/assets/css/el-popper.scss

@@ -3,4 +3,101 @@
 }
 .el-dropdown-menu {
   @apply p-0;
+}
+
+.ava-column-popper.el-popover.el-popper {
+  @apply p-1 min-w-fit rounded-md text-white bg-black border-slate-600 #{!important};
+  .el-popper__arrow::before {
+    @apply bg-black #{!important};
+  }
+}
+.action-column-popper {
+  @apply rounded-lg -mt-3 #{!important};
+  .el-popper__arrow {
+    @apply hidden;
+  }
+  .el-dropdown-menu__item {
+    @apply mx-0 text-zinc-800 #{!important};
+    &:hover {
+      @apply bg-secondary;
+    }
+  }
+}
+
+.icon-popper.el-popover.el-popper {
+  @apply transition-all duration-300 p-1 min-w-fit min-h-fit rounded-md #{!important};
+  .el-popper__arrow::before {
+    @apply bg-white #{!important};
+  }
+}
+.auth-menu-popper.el-popper {
+  @apply border shadow-card w-[94%] md:w-[95.5%] lg:hidden rounded-md p-6;
+  @apply top-2.5 mx-2 inset-x-1 #{!important};
+  .el-dropdown-menu.el-dropdown-menu--default {
+    @apply p-0;
+  }
+  .el-dropdown-menu__item--divided {
+    @apply border-[#e4e4e5];
+  }
+  .el-dropdown-menu__item {
+    @apply p-0 m-0;
+    &:hover {
+      @apply bg-white;
+    }
+  }
+  .el-popper__arrow {
+    @apply hidden;
+  }
+}
+
+.menu-popper {
+  @apply lg:w-80 md:w-80 sm:w-80 w-97/100 border-none bg-[#182c4e] top-4 sm:top-1 rounded-lg #{!important};
+  .el-dropdown-menu__item--divided {
+    @apply m-0;
+  }
+}
+.notification-popper {
+  @apply lg:w-98 md:w-98 sm:w-98 w-97/100 top-9/100 sm:top-16 rounded-lg #{!important};
+  .el-popper__arrow {
+    @apply hidden;
+  }
+  .el-dropdown-menu {
+    @apply p-0 #{!important};
+  }
+  .el-dropdown-menu__item--divided {
+    @apply m-0;
+  }
+  .el-dropdown-menu__item:first-child {
+    @apply m-0 bg-white rounded-lg;
+    &:hover {
+      @apply bg-white #{!important};
+    }
+  }
+  .el-dropdown-menu__item {
+    @apply m-0;
+    &:hover {
+      @apply bg-secondary #{!important};
+    }
+  }
+}
+.profile-popper {
+  @apply lg:w-48 md:w-48 sm:w-48 w-97/100 top-9/100 sm:top-18 rounded-lg #{!important};
+  .el-popper__arrow {
+    @apply hidden;
+  }
+  .el-dropdown-menu {
+    @apply py-2 #{!important};
+    .el-dropdown-menu__item:first-child {
+      @apply m-0 rounded-lg;
+      &:hover {
+        @apply bg-white #{!important};
+      }
+    }
+    .el-dropdown-menu__item {
+      @apply m-0;
+      &:hover {
+        @apply bg-secondary text-black #{!important};
+      }
+    }
+  }
 }

src/assets/css/el-progress.scss

@@ -1,3 +1,3 @@
 .el-progress-bar .el-progress-bar__outer {
-  @apply h-[3px] #{!important};
+  @apply h-0.75 #{!important};
 }

src/assets/css/el-table.scss

@@ -47,7 +47,7 @@
 }
 
 .is-dark.el-table th.is-leaf {
-  @apply border-y-[0.5px] border-[#1f3a68] #{!important};
+  @apply border-y-0.5 border-[#1f3a68] #{!important};
 }
 
 .is-dark.el-table td,

src/assets/css/form.scss

@@ -1,13 +1,13 @@
 body {
   // Default
   hr {
-    @apply border-0 border-b-[1px] border-b-light-10 my-6;
+    @apply border-0 border-b border-b-light-10 my-6;
   }
   .el-form-item__content:last-child .el-button {
     @apply mt-6;
   }
   .el-input__inner {
-    @apply h-[46px] rounded-[0.25rem] border border-light placeholder:text-muted text-sm;
+    @apply h-11.5 rounded border border-light placeholder:text-muted text-sm;
   }
   .el-input-group__append {
     @apply text-base text-muted bg-white font-normal;
@@ -16,7 +16,7 @@ body {
     @apply text-base font-medium placeholder:text-muted;
   }
   .el-input__inner:focus {
-    @apply border-[1px] outline-0 border-indigo-410 ring-0 shadow-[0_3px_9px_transparent] drop-shadow-[3px_4px_8px_rgb(94,114,228,0.10)];
+    @apply border outline-0 border-indigo-410 ring-0 shadow-[0_3px_9px_transparent] drop-shadow-[3px_4px_8px_rgb(94,114,228,0.10)];
   }
 
   .el-upload.el-upload--text {
@@ -32,7 +32,7 @@ body {
   }
   // Notification - Form popup
   .el-dialog.sign-in {
-    @apply rounded-md w-[90%] sm:w-[380px] sm:-top-10 #{!important};
+    @apply rounded-md w-[90%] sm:w-95 sm:-top-10 #{!important};
 
     .el-dialog__body {
       @apply flex flex-col items-center justify-center bg-secondary pt-0 rounded-md text-muted p-0 text-center;
@@ -48,7 +48,7 @@ body {
       @apply rounded;
     }
     .el-form-item__content .el-icon {
-      @apply block flex-none text-lg leading-[1.6rem] mx-2.5 #{!important};
+      @apply block flex-none text-lg leading-1.6 mx-2.5 #{!important};
     }
     .el-input.el-input--default {
       @apply flex-1;
@@ -57,7 +57,7 @@ body {
       @apply w-full border-0 p-0 drop-shadow-sm;
     }
     .el-input.el-input--default .el-input__inner {
-      @apply h-[46px] p-0 text-sm rounded bg-white border-transparent placeholder:text-muted focus:text-muted focus:font-normal text-slate-400 focus:ring-0 focus:bg-white #{!important};
+      @apply h-11.5 p-0 text-sm rounded bg-white border-transparent placeholder:text-muted focus:text-muted focus:font-normal text-slate-400 focus:ring-0 focus:bg-white #{!important};
     }
     .el-form-item__content {
       @apply justify-center;
@@ -85,7 +85,7 @@ body {
       @apply will-change-transform #{!important};
     }
     .el-checkbox__inner::after {
-      @apply border-[2.5px];
+      @apply border-2.5;
     }
   }
   .authentication-form {
@@ -95,7 +95,7 @@ body {
 
     .el-input {
       .el-input__inner {
-        @apply transition-all duration-300 rounded-md shadow-form-input border-none h-[46px] pl-10 text-muted text-sm placeholder:font-normal #{!important};
+        @apply transition-all duration-300 rounded-md shadow-form-input border-none h-11.5 pl-10 text-muted text-sm placeholder:font-normal #{!important};
         &:focus {
           @apply border-none shadow-md ring-0 #{!important};
         }
@@ -109,7 +109,7 @@ body {
         @apply rounded h-4 w-4 border-0 shadow #{!important};
       }
       .el-checkbox__inner::after {
-        @apply border-[3px] w-0.5	h-[5px] mt-0.5 ml-0.5  #{!important};
+        @apply border-3 w-0.5	h-1.25 mt-0.5 ml-0.5  #{!important};
       }
     }
     .el-checkbox.is-checked {

src/assets/css/notifications.scss

@@ -36,7 +36,7 @@ body {
 
   // Notifications
   .el-message {
-    @apply py-4 pl-6 pr-20 min-w-0 w-[90%] max-w-[600px] items-start rounded-md;
+    @apply py-4 pl-6 pr-20 min-w-0 w-[90%] max-w-1.5xl items-start rounded-md;
   }
   .el-message.default {
     @apply bg-dark-50 border-dark-50 text-white #{!important};
@@ -138,7 +138,7 @@ body {
     }
 
     .el-dialog__header {
-      @apply p-5 h-[60px];
+      @apply p-5 h-15;
     }
     .el-dialog__title {
       @apply inline-block text-1.0625 font-semibold h-[18.7px];
@@ -154,7 +154,7 @@ body {
       @apply text-base #{!important};
     }
     .el-dialog__body p {
-      @apply text-base leading-[1.7rem];
+      @apply text-base leading-1.7;
     }
 
     .el-dialog__footer {