@djb25/digit-ui-css 1.0.40 → 1.0.42

package/src/digitv2/components/FormComposerV2.scss

@@ -75,7 +75,7 @@
 
 .card-textarea,
 .employee-card-textarea {
-  @apply block outline-none border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm;
+  @apply block outline-none w-full bg-white h-24 text-form-field text-text-primary p-sm;
   @extend .light-input-border;
 }
 

package/src/digitv2/pages/employee/workbench.scss

@@ -544,11 +544,11 @@
     text-decoration: none;
     .browse-text {
       text-decoration: none;
-      color: #f47738;
+      color: #3a8dcc;
       transition: color 0.3s;
     }
     .browse-text:hover {
-      color: #f47738;
+      color: #3a8dcc;
       text-decoration: underline;
       cursor: pointer;
     }
@@ -718,9 +718,6 @@ button:hover {
   display: block;
   width: 100%;
   height: 2.5rem;
-  --border-opacity: 1;
-  border: 1px solid #f47738;
-  border-color: rgba(244, 119, 56, var(--border-opacity));
 }
 
 .modal-content .label-field-pair {
@@ -741,7 +738,7 @@ button:hover {
     flex-direction: row-reverse;
     .add-new {
       position: relative;
-      color: #f47738;
+      color: #3a8dcc;
       cursor: pointer;
       margin-right: 1em;
       font-weight: bolder;
@@ -788,7 +785,7 @@ button:hover {
 
   .view-all-link {
     background-color: #bdc5d1;
-    color: #f47738;
+    color: #3a8dcc;
     font-size: 16px;
     text-decoration: underline;
     cursor: pointer;
@@ -842,7 +839,7 @@ button:hover {
     .success-container {
       display: flex;
       flex-direction: row;
-      background-color: #00703c;
+      background-color: #2e9e8f;
       color: #fff;
       padding: 5px 10px;
       border-radius: 5px;
@@ -851,7 +848,7 @@ button:hover {
 
       .success-count {
         background-color: #fff;
-        color: #00703c;
+        color: #2e9e8f;
         padding: 3px 5px;
         border-radius: 3px;
         margin-left: 5px;
@@ -902,7 +899,7 @@ button:hover {
     cursor: pointer;
 
     &:hover {
-      background-color: #d4351c;
+      background-color: #d83a2f;
       color: white;
       /* Yellowish color on hover */
     }

package/src/index.scss

@@ -308,6 +308,10 @@ input[readonly] {
   @apply border-grey-dark text-grey-dark !important;
   pointer-events: none !important;
 }
+.disabled-label {
+  @apply border-grey-dark text-grey-dark !important;
+  pointer-events: none !important;
+}
 
 .card-date-input {
   @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0;
@@ -342,7 +346,7 @@ input[readonly] {
 .border-none {
   border: none;
   justify-content: space-between;
-  max-width: 450px;
+  max-width: 600px;
 }
 
 input[type="number"]::-webkit-inner-spin-button,
@@ -489,7 +493,28 @@ input[type="number"] {
   }
 
   input {
-    border: 1px solid #e5e5e7;
+    border: 2px solid #a1a1aa;
+    color: #a1a1aa;
+    &:focus-within {
+      outline: none;
+      border-color: #007bff;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
+  }
+}
+
+.phone-input-wrapper:focus-within {
+  .employee-card-input--front {
+    outline: none;
+    border-color: #007bff;
+    border-right: 0;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    z-index: 1;
+  }
+  input {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
   }
 }
 
@@ -567,7 +592,7 @@ input[type="number"] {
   display: flex;
   flex-direction: column;
   overflow-x: scroll;
-  border-radius: 6px;
+  border-radius: 12px;
   flex: 1 1 0%;
   scrollbar-width: none;
 }
@@ -888,6 +913,20 @@ input[type="number"] {
   height: 100%;
 }
 
+.flex-gap-1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.flex-gap-2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
 .bc-white {
   background-color: #fff;
 }

package/src/pages/citizen/Register.scss

@@ -220,7 +220,7 @@
     }
 
     .error-text {
-      color: #d4351c;
+      color: #d83a2f;
       font-size: 14px;
       margin-top: 4px;
     }

package/src/pages/employee/ekyc.scss

@@ -1,191 +1,191 @@
 .ekyc-employee-container {
-    .inbox-main-container {
-        flex: 1;
-        padding-right: -24px;
-        border-radius: 12px;
+  .inbox-main-container {
+    flex: 1;
+    padding-right: -24px;
+    border-radius: 12px;
+  }
+
+  .inbox-wrapper {
+    min-width: 100%;
+    padding: 24px;
+    border-radius: 12px;
+  }
+
+  .ekyc-header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+
+  .ekyc-status-container {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 32px;
+  }
+
+  .ekyc-status-card {
+    flex: 1;
+    text-align: center;
+    padding: 8px 24px;
+    border-right: 1px solid #eaecf0;
+
+    &:last-child {
+      border-right: none;
     }
 
-    .inbox-wrapper {
-        min-width: 100%;
-        padding: 24px;
-        border-radius: 12px;
-    }
+    .count {
+      font-size: 32px;
+      font-weight: 700;
+      color: #101828;
+
+      &.pending {
+        color: #b54708;
+      }
 
-    .ekyc-header-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 24px;
+      &.completed {
+        color: #027a48;
+      }
     }
 
-    .ekyc-status-container {
-        display: flex;
-        gap: 24px;
-        margin-bottom: 32px;
+    .label {
+      color: #667085;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  .ekyc-search-card {
+    margin-bottom: 24px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 12px;
+  }
+
+  .ekyc-search-container {
+    width: 100%;
+    flex: 1;
+
+    .search-inner {
+      padding: 0px;
+      background-color: #fff;
+      border: none;
     }
 
-    .ekyc-status-card {
-        flex: 1;
-        text-align: center;
-        padding: 8px 24px;
-        border-right: 1px solid #EAECF0;
-
-        &:last-child {
-            border-right: none;
-        }
-
-        .count {
-            font-size: 32px;
-            font-weight: 700;
-            color: #101828;
-
-            &.pending {
-                color: #B54708;
-            }
-
-            &.completed {
-                color: #027A48;
-            }
-        }
-
-        .label {
-            color: #667085;
-            margin-top: 8px;
-            font-size: 14px;
-            font-weight: 500;
-        }
+    .search-field-wrapper {
+      display: flex;
+      align-items: flex-end;
+      gap: 24px;
+      width: 100%;
     }
 
-    .ekyc-search-card {
-        margin-bottom: 24px;
-        padding: 20px;
-        background-color: #fff;
-        border-radius: 12px;
+    .search-fields-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 24px;
+      flex: 1;
     }
 
-    .ekyc-search-container {
-        width: 100%;
-        flex: 1;
-
-        .search-inner {
-            padding: 0px;
-            background-color: #fff;
-            border: none;
-        }
-
-        .search-field-wrapper {
-            display: flex;
-            align-items: flex-end;
-            gap: 24px;
-            width: 100%;
-        }
-
-        .search-fields-container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 24px;
-            flex: 1;
-        }
-
-        .search-field {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            min-width: 250px;
-            flex: 1;
-
-            label {
-                margin-bottom: 0 !important;
-                margin-top: 20px !important;
-                font-size: 16px !important;
-                font-weight: 600 !important;
-                color: #344054 !important;
-            }
-
-            input,
-            .dropdown-wrapper {
-                border-radius: 12px !important;
-                height: 40px !important;
-            }
-        }
-
-        .search-action-container {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            margin-left: auto;
-            padding-bottom: 4px;
-
-            .submit-bar {
-                height: 40px !important;
-                padding: 0 24px !important;
-                margin-bottom: 0 !important;
-                border-radius: 12px !important;
-                position: relative !important;
-                top: -20px !important;
-            }
-
-            .link-label {
-                margin: 0 !important;
-                font-weight: 600 !important;
-                cursor: pointer !important;
-                white-space: nowrap !important;
-                position: relative !important;
-                top: -20px !important;
-                color: #F47738 !important;
-            }
-        }
+    .search-field {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 250px;
+      flex: 1;
+
+      label {
+        margin-bottom: 0 !important;
+        margin-top: 20px !important;
+        font-size: 16px !important;
+        font-weight: 600 !important;
+        color: #344054 !important;
+      }
+
+      input,
+      .dropdown-wrapper {
+        border-radius: 12px !important;
+        height: 40px !important;
+      }
     }
 
-    .ekyc-table-card {
-        padding: 0px;
-        overflow: hidden;
+    .search-action-container {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      margin-left: auto;
+      padding-bottom: 4px;
+
+      .submit-bar {
+        height: 40px !important;
+        padding: 0 24px !important;
+        margin-bottom: 0 !important;
+        border-radius: 12px !important;
+        position: relative !important;
+        top: -20px !important;
+      }
+
+      .link-label {
+        margin: 0 !important;
+        font-weight: 600 !important;
+        cursor: pointer !important;
+        white-space: nowrap !important;
+        position: relative !important;
+        top: -20px !important;
+        color: #3a8dcc !important;
+      }
+    }
+  }
+
+  .ekyc-table-card {
+    padding: 0px;
+    overflow: hidden;
+  }
+
+  .ekyc-status-tag {
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    &.ALL {
+      background-color: #f4f4f4;
+      color: #505a5f;
     }
 
-    .ekyc-status-tag {
-        padding: 6px 12px;
-        border-radius: 20px;
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-
-        &.ALL {
-            background-color: #F4F4F4;
-            color: #505A5F;
-        }
-
-        &.COMPLETED {
-            background-color: #E7F4E9;
-            color: #0B6623;
-        }
-
-        &.PENDING {
-            background-color: #FFF5E6;
-            color: #945700;
-        }
-
-        &.REJECTED {
-            background-color: #FBEAE9;
-            color: #AF1E11;
-        }
-
-        &.DEFAULT {
-            background-color: #F4F4F4;
-            color: #505A5F;
-        }
+    &.COMPLETED {
+      background-color: #e7f4e9;
+      color: #0b6623;
     }
 
-    .ekyc-metrics-section {
-        margin-bottom: 24px;
+    &.PENDING {
+      background-color: #fff5e6;
+      color: #945700;
     }
 
-    .ekyc-table-cell {
-        padding: 20px 18px;
-        font-size: 16px;
+    &.REJECTED {
+      background-color: #fbeae9;
+      color: #af1e11;
     }
 
-    .ekyc-application-link {
-        font-weight: 600;
-        color: #F47738;
+    &.DEFAULT {
+      background-color: #f4f4f4;
+      color: #505a5f;
     }
-}
+  }
+
+  .ekyc-metrics-section {
+    margin-bottom: 24px;
+  }
+
+  .ekyc-table-cell {
+    padding: 20px 18px;
+    font-size: 16px;
+  }
+
+  .ekyc-application-link {
+    font-weight: 600;
+    color: #3a8dcc;
+  }
+}

package/src/pages/employee/inbox.scss

@@ -32,7 +32,7 @@
 
     .link {
       @apply p-sm items-center;
-      color: #764ba2 !important;
+      color: #0b2e5b !important;
       display: flex !important;
 
       a {
@@ -216,6 +216,26 @@
   }
 }
 
+.hover-button {
+  &:hover {
+    height: 32px;
+    border-radius: 9999999px;
+    border: 2px solid #a82227;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: fit-content;
+    text-decoration: none;
+
+    @media (max-width: 768px) {
+      padding: 0 12px;
+    }
+  }
+}
+
 .generic-button {
   height: 32px;
   border-radius: 9999999px;
@@ -242,7 +262,8 @@
 .clear-search .link-label {
   @apply border-focus text-focus;
   cursor: pointer;
-
+  min-width: 110px;
+  text-align: center;
   &:hover {
     color: #3b59df;
     background-color: #bdc7f3;
@@ -386,7 +407,7 @@
 
       .link {
         @apply p-sm;
-        color: #764ba2 !important;
+        color: #0b2e5b !important;
       }
     }
   }

package/src/pages/employee/index.scss

@@ -142,6 +142,17 @@
   }
 }
 
+.single-page-form-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.form-section-unit {
+  width: 100%;
+}
+
 .employee-form .citizen {
   .main {
     padding-top: 82px;
@@ -658,6 +669,14 @@
   }
 }
 
+.hover-button:hover {
+  border: 2px solid #a82227 !important;
+}
+
+.hover-button-round:hover {
+  padding: 4px !important;
+}
+
 @media (min-width: 640px) {
   .employee {
     display: flex;
@@ -684,6 +703,18 @@
       /* width: calc(100%-83px); */
     }
 
+    .add-details-link {
+      color: #a82227;
+      cursor: pointer;
+      text-decoration: underline;
+      display: flex;
+      width: fit-content;
+      &:hover {
+        padding: 0 32px;
+        margin-left: 0;
+      }
+    }
+
     .citizen-home-container {
       display: flex;
       flex-direction: unset !important;

package/src/pages/employee/userProfile.scss

@@ -9,6 +9,7 @@
 
   &.employee {
     @media (min-width: 768px) {
+      overflow-y: scroll;
       width: 33.33%;
       height: fit-content;
       min-width: 250px;
@@ -104,16 +105,16 @@
   flex-direction: column;
   gap: 16px;
   width: 100%;
-  padding-top: 16px;
-  padding-inline: 20px;
-  margin-bottom: 88px;
-
+  height: 100%;
+  @media (min-width: 768px) {
+    padding-inline: 20px;
+  }
   .generic-button {
     color: #fff;
     cursor: pointer;
     position: relative;
     border-radius: 10px;
-    background-color: #171f1d;
+    background-color: #7696e7;
   }
 }
 
@@ -128,6 +129,15 @@
   position: relative;
 }
 
+.login {
+  .user-profile-wrapper {
+    padding-bottom: 16px;
+    @media (max-width: 768px) {
+      padding-bottom: 76px;
+    }
+  }
+}
+
 .user-profile-wrapper {
   display: flex;
   flex: 1;
@@ -135,6 +145,7 @@
 
   @media (min-width: 768px) {
     flex-direction: row;
+    overflow-y: scroll;
   }
   @media (max-width: 768px) {
     align-items: center;
@@ -192,7 +203,7 @@
   gap: 8px;
 
   &.employee {
-    flex: 7.5;
+    overflow-y: scroll;
     padding: 24px;
     box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
   }

package/svg/check.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#F47738" >
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3A8DCC" >
     <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>

package/svg/close.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px">
-<path d="M0 0h24v24H0V0z" fill="#d4351c"/>
+<path d="M0 0h24v24H0V0z" fill="#D83A2F"/>
 <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
 </svg>