@selco/selco-css 1.0.2 → 1.8.15

package/src/pages/employee/inbox.scss

@@ -21,8 +21,6 @@
   }
 
   .body {
-    padding-left: 0px;
-    margin-left: 0px;
     padding: 10px;
     @apply flex items-start flex-col;
     margin-left: 46px;
@@ -30,10 +28,6 @@
     .link {
       @apply p-sm text-primary-main items-center;
       display: flex !important;
-      a{
-        color: inherit;
-        text-decoration: inherit
-      }
     }
 
     .inbox-total {
@@ -71,7 +65,7 @@
 
 .employeeCard-info-box {
   @apply flex justify-end ml-md;
-  background-color: theme(colors.grey.light);
+  background-color: #fafafa;
   div {
     margin-right: 32px;
     span:nth-child(2) {
@@ -103,7 +97,7 @@
       @apply font-bold text-heading-l flex gap-3;
       padding-bottom: 6px;
       svg {
-        fill: theme(colors.text.primary);
+        fill: #0b0c0c;
       }
     }
     .sub-filter-label {
@@ -139,7 +133,7 @@
           @apply text-heading-m block flex gap-3 items-center;
           padding-bottom: 6px;
           svg {
-            fill: theme(colors.text.primary);
+            fill: #0b0c0c;
           }
         }
 
@@ -162,7 +156,7 @@
             @apply text-focus;
             display: none;
             &:hover {
-              color: theme(colors.link.hover);
+              color: #003078;
               cursor: pointer;
             }
           }
@@ -215,14 +209,11 @@
     }
 
     .body {
-      padding-left: 0px;
-      margin-left: 0px;
       padding: 10px;
       @apply flex items-start flex-col;
       margin-left: 46px;
 
       .link {
-        padding-left: 0px;
         @apply p-sm text-primary-main;
       }
     }
@@ -238,7 +229,7 @@
         @apply bg-white;
         svg {
           path {
-            fill: theme(colors.primary.main);
+            fill: #f47738;
           }
         }
       }
@@ -269,7 +260,6 @@
       width: 270px;
 
       .filter {
-        margin-top: 0px !important;
         @apply mt-md;
 
         .filter-card {
@@ -369,7 +359,7 @@
               @apply block;
               cursor: pointer;
               &:hover {
-                color: theme(colors.link.hover);
+                color: #003078;
                 cursor: pointer;
               }
             }
@@ -407,26 +397,26 @@
 }
 
 .cell-text {
-  color: theme(colors.text.secondary);
+  color: #505a5f;
 }
 
 .sla-cell-error {
-  color: theme(colors.error);
+  color: #d4351c;
   background-color: rgba(212, 53, 28, 0.12);
   padding: 0 24px;
   border-radius: 11px;
 }
 
 .sla-cell-success {
-  color: theme(colors.success);
+  color: #00703c;
   background-color: rgba(0, 112, 60, 0.12);
-  padding: 0 20px;
+  padding: 0 24px;
   border-radius: 11px;
 }
 
 .complain-no-cell-text {
   margin-top: "4px";
-  color: "theme(colors.text.secondary)";
+  color: "#505A5F";
 }
 
 .search-error-label {
@@ -454,11 +444,8 @@
   }
 }
 .employeeTotalLink {
-  color: #7a2829 !important;
-  font-weight: 700;
-  color: theme(colors.text.secondary);
+  color: #505a5f;
   font-size: 16px;
-  text-decoration: none;
 }
 
 @screen dt {
@@ -473,7 +460,7 @@
           margin-right: 1rem;
           svg {
             path {
-              fill: theme(colors.primary.main);
+              fill: #f47738;
             }
           }
         }
@@ -481,7 +468,7 @@
           font-size: 24px;
           line-height: 28px;
           font-weight: 400;
-          color: theme(colors.primary.main);
+          color: #f47738;
         }
       }
     }
@@ -513,6 +500,10 @@
   }
 }
 
+.inboxLinksFSM {
+  margin: 0 !important;
+}
+
 .plumber-details-new-value-wrapper {
   flex: 2 1 auto;
 }
@@ -579,14 +570,14 @@
   tHead {
     tr {
       th {
-        text-align: center;
+        text-align: left;
       }
     }
   }
   tBody {
     tr {
       td {
-        text-align: center;
+        text-align: left;
       }
     }
   }

package/src/pages/employee/index.scss

@@ -17,7 +17,7 @@
   }
   .home-action-cards {
     height: auto !important;
-    min-height: 200px;
+    min-height: 263px;
   }
   .topbar {
     position: fixed;
@@ -53,7 +53,7 @@
       margin-top: 12px;
 
       .user-img-txt {
-        background: theme(colors.primary.main);
+        background: #f47738;
         padding: 10px 15px;
         border-radius: 50%;
         color: white;
@@ -67,10 +67,6 @@
   }
 
   .loginContainer {
-    background: linear-gradient(#06263e, #1d70b85c), url(https://selco-assets.s3.ap-south-1.amazonaws.com/bg.jpg);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
     padding-top: 88px;
   }
 
@@ -79,7 +75,7 @@
   }
 
   .react-time-picker__wrapper {
-    border: 1px solid theme(colors.inputBorder);
+    border: 1px solid #464646;
   }
 
   .react-time-picker__clock {
@@ -106,7 +102,7 @@
 .citizen {
   .main {
     padding-top: 82px;
-    min-height: calc(100vh - 90px);
+ 
   }
 }
 
@@ -115,11 +111,11 @@
   .sidebar {
     position: fixed;
     left: 0;
-    background: #0B4B66;
+    background: #23316b;
     height: 100%;
-    color: theme(colors.white);
-    margin-top: 83px;
-    z-index: 10000;
+    color: #ffffff;
+    margin-top: 80px;
+    z-index: 10;
     transition: 0.3s ease all;
     white-space: nowrap;
     height: calc(100vh - 36px);
@@ -132,39 +128,29 @@
       .tooltip {
         margin-left: 16px;
       }
-      margin-bottom: 0px;
     }
 
     svg {
       width: 24px;
       height: 24px;
-      fill: theme(colors.white);
+      fill: #ffffff;
     }
     a {
       display: flex;
     }
     .sidebar-link {
       display: flex;
-      color: theme(colors.white);
+      color: #ffffff;
       justify-content: space-between;
       align-items: center;
       padding: 20px;
       font-size: 14px;
-      
-      &.level-0 {
-        margin:0 0.3rem 0 0.3rem;
-        &.select-level{
-          border-top: 1px solid;
-          border-bottom: 1px solid;
-        }
-      }
-
       &.active {
-        color: theme(colors.primary.main) !important;
+        color: #f47738 !important;
 
-        border-right: none;
+        border-right: 4px solid #f47738;
         svg {
-          fill: theme(colors.primary.main) !important;
+          fill: #f47738 !important;
         }
       }
       .employee-search-input {
@@ -184,28 +170,27 @@
       }
 
       svg {
-        fill: theme(colors.white) !important;
+        fill: #ffffff !important;
         width: 21px;
         height: 21px;
       }
 
       &:hover {
-        
-        background-color: #0B4B66;
+        color: #f47738 !important;
+        background-color: #486480;
 
         cursor: pointer;
-        
+        svg {
+          fill: #f47738 !important;
+        }
       }
       .search-icon-wrapper {
-        border: 2px solid theme(colors.white);
-        border-radius: 4px;
-        padding: 5px;
         svg {
-          fill: theme(colors.white) !important;
+          fill: #ffffff !important;
           width: 21px;
           height: 21px;
           path {
-            fill: theme(colors.white) !important;
+            fill: #ffffff !important;
           }
         }
       }
@@ -216,7 +201,7 @@
       margin-left: 40px;
       align-items: center;
       text-decoration: none;
-      color: theme(colors.white);
+      color: #ffffff;
       font-size: 14px;
       .actions {
         .tooltiptext {
@@ -227,37 +212,22 @@
       svg {
         width: 20px;
         height: 20px;
-        fill: theme(colors.white);
+        fill: #ffffff;
       }
       &:hover {
-        background-color: #6A8E9D;
-        opacity: 0.8;
+        color: #fe7a51 !important;
+        background-color: #486480;
         cursor: pointer;
         svg {
           fill: #fe7a51 !important;
         }
       }
-
-
       &.active {
-        border-left: 4px solid theme(colors.primary.main);
-        &.level-0 {
-        
-        }
-        &.level-1 {
-          border-left: 5px solid theme(colors.primary.main);
-        }
-        &.level-2 {
-          border-left: 4px solid theme(colors.primary.main);
-        }
-
-        &.level-3{
+        color: #f47738 !important;
 
-        }
-        color: theme(colors.primary.main) !important;
-        border-right: none;
+        border-right: 4px solid #f47738;
         svg {
-          fill: theme(colors.primary.main) !important;
+          fill: #f47738 !important;
         }
       }
     }
@@ -275,7 +245,7 @@
     padding-top: 10px;
 
     .containerStyles {
-      border: 1px solid theme(colors.text.secondary);
+      border: 1px solid #505a5f;
       padding: 16px;
       margin-bottom: 20px;
     }
@@ -290,7 +260,7 @@
   }
 
   .tableContainerStyles {
-    border: 1px solid theme(colors.text.secondary);
+    border: 1px solid #505a5f;
     padding: 16px;
     margin-bottom: 20px;
   }
@@ -395,7 +365,7 @@
   .select-wrap {
     margin-bottom: unset;
     svg {
-      fill: theme(colors.white);
+      fill: #ffffff;
     }
   }
 }
@@ -403,7 +373,7 @@
 @media (min-width: 640px) {
   .employee {
     .ground-container {
-      @apply block;
+      @apply block ml-md;
     }
     .breadcrumb {
       @apply mb-lg;
@@ -424,8 +394,8 @@
       display: flex;
       flex-direction: column;
       padding-top: 80px;
-      margin-left: 72px;
-      width: calc(100%-83px);
+      margin-left: 200px;
+      width: calc(100%-200px);
     }
     .citizen-home-container {
       display: flex;
@@ -440,7 +410,7 @@
     .main {
       width: 100%;
       padding-top: 58px;
-      height: 100%;
+      
       display: flex;
       justify-content: center;
     }
@@ -495,10 +465,10 @@
 
   .top-back-btn {
     margin-bottom: 0px;
-    color: theme(colors.white);
+    color: #ffffff;
     margin-right: 1em;
     & svg {
-      fill: theme(colors.white);
+      fill: #ffffff;
     }
   }
   .hambuger-back-wrapper {
@@ -525,52 +495,3 @@
     margin-right: 16px;
   }
 }
-
-.link {
-  a{
-    color: inherit;
-    text-decoration: inherit
-    }
-}
-
-.breadcrumb {
-  a{
-    color: inherit;
-    text-decoration: inherit
-    }
-}
-
-.sidebar-link.active{
-.custom-link{
-  text-decoration: none;
-  div{
-    span{
-      color: theme(colors.primary.main) !important;
-      text-decoration: none;
-    }
-  }
-}
-}
-.bread-crumb {
-  a{
-    color: inherit;
-    text-decoration: inherit
-    }
-}
-
-.sidebar-link{
-  .custom-link{
-    text-decoration: none;
-    div{
-      span{
-        color: theme(colors.white);
-        text-decoration: none;
-      }
-    }
-  }
-  }
-  
-/* TODO fix required NABEEL/ANIL for home screen card */
-  .customEmployeeCard {
-    @apply m-sm !important;
-  }

package/src/pages/employee/login.scss

@@ -66,7 +66,7 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
-  color: theme(colors.text.primary);
+  color: #0B0C0C;
   margin-top: 20px;
 }
 .banner .bannerHeader {
@@ -76,7 +76,7 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
-  color: theme(colors.text.primary);
+  color: #0B0C0C;
 }
 .profile-label-margin{
    margin-top: 10px;
@@ -86,13 +86,13 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 24px;
-  color: theme(colors.text.secondary);
+  color: #505a5f;
   margin-top: 15px;
 }
 .employeeChangePassword .employeeCard .card-text {
   margin-bottom: 15px;
   font-size: 16px;
-  color: theme(colors.text.secondary);
+  color: #505a5f;
 }
 @media screen and (max-width: 768px) {
   .employeeChangePassword .employeeCard .card-text {
@@ -110,7 +110,6 @@
   margin-bottom: 10px;
 }
 .employee .loginContainer {
-
   padding-top: 0px !important;
 }
 .banner {
@@ -149,9 +148,6 @@
 .employeeBackbuttonAlign{
   display: none;
 }
-.resend-otp{
-  cursor: pointer;
-}
 
 .employee-select-wrap.login-city-dd {
   .options-card{
@@ -187,36 +183,3 @@
   }
 }
 
-
-.loginFormStyleEmployee {
-
-  .loginCardSubHeaderClassName {
-    text-align: center !important;
-  }
-  .loginCardClassName {
-    margin: auto !important; 
-    min-width: 408px !important;
-    header.employee-card-sub-header{
-      text-align: center;
-      margin-top: 10px;
-    }
-  }
-  .buttonClassName {
-    max-width: 100% !important;
-    width: 100% !important
-  }
-  .field .field-container .text-input input {
-    margin-bottom: 5px !important;
-  }
-  .bannerHeader {
-    margin-bottom: 0px !important;
-  }
-  
-  .primary-label-btn {
-    margin: 20px auto 0 auto !important;
-  }
-
-  .employee-select-wrap .options-card {
-    max-height: 150px !important;
-  }
-}

package/src/pages/employee/popupmodule.scss

@@ -32,3 +32,16 @@
     }
   }
 }
+
+.popup-module-main {
+  iframe #page-container div {
+    width: 99% !important;
+    margin: 5px !important;
+  }
+
+  iframe #page-container {
+    ::-webkit-scrollbar {
+      width: 0px !important;
+    }
+  }
+}

package/src/pages/employee/scroll-table.scss

@@ -66,7 +66,7 @@ top: 0px;
 
 /* Light Theme / Paper */
 
-background: theme(colors.white);
+background: #FFFFFF;
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
 
 /* Inside auto layout */
@@ -79,7 +79,7 @@ color: #B1B4B6;
 .table-switch-card-inactive:hover{
     background: #fffffc;
     font-size: 17px;
-    color: theme(colors.text.secondary);
+    color: #505A5F;
 }
 
 .table-switch-card-active{/* Frame 57 */
@@ -99,10 +99,10 @@ color: #B1B4B6;
     
     /* Light Theme / Paper */
     
-    background: theme(colors.white);
+    background: #FFFFFF;
     /* Light Theme / Primary */
     
-    border: 1px solid theme(colors.primary.main);
+    border: 1px solid #F47738;
     box-sizing: border-box;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
     
@@ -111,9 +111,4 @@ color: #B1B4B6;
     flex: none;
     flex-grow: 0;
     margin: 0px 0px;
-}
-
-.icon-wrapper {
-    margin-left:1rem;
-    cursor:pointer
 }

package/src/pages/employee/surveys.scss

@@ -89,7 +89,7 @@
 .question-title {
   font-size: 18px;
   line-height: 21px;
-  color: theme(colors.text.primary);
+  color: #0b0c0c;
   font-weight: 700;
 }
 
@@ -98,8 +98,8 @@
   flex-direction: column;
   align-items: flex-start;
   padding: 8px 4px; 
-  background-color: theme(colors.grey.light);
-  border: 1px solid theme(colors.border);
+  background-color: #FAFAFA;
+  border: 1px solid #D6D5D4;
   box-sizing: border-box;
   border-radius: 4px;
   margin-top: 20px;
@@ -116,8 +116,8 @@
   position: static;
   left: 0px;
   top: 41px;
-  background: theme(colors.grey.light);
-  border: 1px solid theme(colors.border);
+  background: #FAFAFA;
+  border: 1px solid #D6D5D4;
   box-sizing: border-box;
   border-radius: 4px;
   margin-top: 20px;
@@ -148,8 +148,8 @@ flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 16px 8px;
-background: theme(colors.grey.light);
-border: 1px solid theme(colors.border);
+background: #FAFAFA;
+border: 1px solid #D6D5D4;
 box-sizing: border-box;
 border-radius: 4px;
 @apply gap-y-6;
@@ -203,7 +203,7 @@ border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
         height: 1.75rem;
         width: 1.75rem;
         --border-opacity: 1;
-        border: 1px solid theme(colors.inputBorder);
+        border: 1px solid #464646;
         border-color: rgba(70, 70, 70, var(--border-opacity));
         border-radius: 9999px;
         display: block;
@@ -212,10 +212,10 @@ border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
       .radio-wrap .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
         display: block;
         --bg-opacity: 1;
-        background-color: theme(colors.primary.main);
+        background-color: #f47738;
         background-color: rgba(244, 119, 56, var(--bg-opacity));
-        height: 1rem !important;
-        width: 1rem !important;
+        height: 1.25rem;
+        width: 1.25rem;
         border-radius: 9999px;
         position: absolute;
         top: 4px;

package/svg/check.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#7a2829" >
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a82227" >
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
 </svg>