@djb25/digit-ui-css 1.0.40 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djb25/digit-ui-css",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "satyam",

package/src/components/SearchForm.scss

@@ -68,7 +68,7 @@
 .formcomposer-section-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  gap: 16px;
   column-gap: 24px;
   width: 100%;
   .grid-title {

package/src/components/body.scss

@@ -1,9 +1,9 @@
 body {
-  @apply bg-grey-bg;
+  background-color: #e7e7e7;
 }
 
 .body-container {
-  @apply bg-grey-bg h-full min-h-screen overflow-x-hidden;
+  @apply  h-full min-h-screen overflow-x-hidden;
 }
 
 .navbar {

package/src/components/card.scss

@@ -214,6 +214,24 @@
     background: linear-gradient(278deg, rgba(110, 191, 221, 0.925) -24.44%, rgba(97, 119, 236, 0.9) 93.53%);
   }
 }
+
+.label-field-pair .field .text-input .select .select-active .master-active input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+.label-field-pair .field .text-input .select .master-active .select-active input:focus-within {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.employee-card-input:focus-within {
+  outline: none;
+  border-color: #007bff !important;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
 @screen dt {
   .submit-bar,
   .submit-bar-disabled {
@@ -247,7 +265,9 @@
   }
 
   .label-field-pair {
-    align-items: center;
+    display: flex;
+    gap: 4px;
+    flex-direction: column;
   }
 
   .employeeCard {
@@ -331,7 +351,7 @@
     .label-field-pair {
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 4px;
       justify-content: flex-start;
       align-items: center;
       /* Adjust spacing between label and field */

package/src/components/datatable.scss

@@ -33,7 +33,22 @@
 }
 
 .employee-data-table {
+  .employee-role-list-value {
+    max-height: 150px;
+    overflow-y: scroll;
+  }
+  .row-content {
+    display: flex !important;
+    width: 30% !important;
+    @media (max-width: 768px) {
+      width: fit-content !important;
+    }
+  }
+
   .row {
+    @media (max-width: 768px) {
+      justify-content: space-between;
+    }
     @apply flex pb-sm mb-sm;
 
     span {
@@ -51,7 +66,10 @@
       @apply text-heading-s;
       white-space: break-spaces !important;
       word-break: break-all;
-      text-align: center;
+      text-align: start;
+      @media (max-width: 768px) {
+        width: fit-content !important;
+      }
     }
 
     .caption {

package/src/components/multiSelectDropdown.scss

@@ -2,9 +2,10 @@
   @apply relative text-form-field text-text-primary w-full;
   .master,
   .master-active {
-    @apply relative border border-solid border-input-border h-10 w-full;
+    border: 2px solid #e5e5e7;
+    @apply rounded-md relative h-10 w-full;
     input[type="text"] {
-      @apply absolute top-0 left-0 min-h-full opacity-0;
+      @apply rounded-l-md absolute top-0 left-0 min-h-full opacity-0;
       &:focus {
         @apply outline-none;
       }
@@ -17,12 +18,24 @@
     }
 
     &:hover {
-      @apply border-2 border-solid border-primary-main;
+      border: 2px solid #a1a1aa;
+      @apply rounded-md;
+    }
+    &:focus-within {
+      border: 2px solid #007bff !important;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
     }
   }
 
   .master-active {
-    @apply border-2 border-primary-main;
+    &:hover {
+      border: 2px solid #a1a1aa;
+      @apply rounded-md;
+    }
+    &:focus-within {
+      border: 2px solid #007bff !important;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
     input[type="text"] {
       @apply opacity-100;
     }

package/src/components/radiobtn.scss

@@ -1,10 +1,10 @@
 .radio-wrap {
   flex-wrap: wrap;
   .radio-btn-outer-wrap {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
   }
-  @apply my-sm block leading-10 mb-lg;
+  @apply block leading-10;
 
   .radio-btn-wrap {
     @apply block float-left relative;
@@ -35,16 +35,16 @@
     @apply border-2 border-primary-main;
   }
 
-.radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
-  @apply block bg-primary-main h-3 w-3 rounded-full absolute;
+  .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
+    @apply block bg-primary-main h-3 w-3 rounded-full absolute;
 
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
-.reverse-radio-selection-wrapper{
-  div{
-    @apply flex flex-row-reverse place-content-between items-center;    ;
+.reverse-radio-selection-wrapper {
+  div {
+    @apply flex flex-row-reverse place-content-between items-center;
   }
-}
+}

package/src/components/selectdropdown.scss

@@ -50,7 +50,10 @@
   }
 
   .select-active {
-    @apply relative block w-full h-10 border-2 border-solid border-primary-main rounded-md;
+    outline: none;
+    border: 2px solid #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    @apply relative block w-full h-10 rounded-md;
 
     input[type="text"] {
       width: calc(100% - 32px);
@@ -130,7 +133,10 @@
   }
 
   .select-active {
-    @apply relative block w-full h-10 border-2 border-solid border-primary-main rounded-md;
+    outline: none;
+    border: 2px solid #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    @apply relative block w-full h-10 rounded-md;
 
     input[type="text"] {
       width: calc(100% - 32px);

package/src/components/textfields.scss

@@ -9,6 +9,9 @@
 .employee-card-input {
   border: 2px solid #e5e5e7;
   @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field text-text-primary rounded-md;
+  &:hover {
+    border: 2px solid #a1a1aa;
+  }
 }
 
 .employee-card-input:disabled {
@@ -31,7 +34,11 @@
 
 .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 rounded-md;
+  border: 2px solid #e5e5e7;
+  @apply block outline-none w-full bg-white h-24 text-form-field text-text-primary p-sm rounded-md;
+  &:hover {
+    border: 2px solid #a1a1aa;
+  }
 }
 
 .inputWrapper {

package/src/components/topbar.scss

@@ -15,6 +15,26 @@
     width: 100%;
   }
 
+
+  .btx {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px; /* controls space between lines */
+
+    h1 {
+      margin: 0;
+      line-height: 1.1;
+    }
+
+    p {
+      margin: 0;
+      line-height: 1.1;
+    }
+
+
+}
+
   img {
     display: inline;
 
@@ -110,6 +130,27 @@
       }
     }
   }
+
+  @media (max-width: 780px) {
+    padding: 10px 16px; // Reduce padding for mobile
+
+    .brand-mark {
+      width: 40px !important;
+      height: 40px !important;
+      img {
+        max-width: 32px;
+      }
+    }
+
+    .btx {
+      h1 {
+        font-size: 15px !important;
+      }
+      p {
+        font-size: 9px !important;
+      }
+    }
+  }
 }
 
 .cp {
@@ -235,3 +276,155 @@ video::-webkit-media-controls-panel {
     flex-shrink: 0;
   }
 }
+
+.topbar-right-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  gap: 15px;
+
+  @media (max-width: 1024px) {
+    gap: 8px;
+    margin-right: 0px !important;
+    margin-left: 0px !important;
+  }
+}
+
+.topbar-item-wrapper {
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  padding: 8px 14px !important;
+  border-radius: 8px !important;
+  border: 1px solid #e5e7eb !important;
+  background-color: #ffffff !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #1f2937 !important;
+  white-space: nowrap !important;
+
+  @media (max-width: 1024px) {
+    padding: 6px 10px !important;
+    gap: 6px !important;
+    font-size: 12px !important;
+  }
+
+  @media (max-width: 780px) {
+    padding: 4px 6px !important;
+    font-size: 11px !important;
+    svg {
+      width: 14px !important;
+      height: 14px !important;
+    }
+  }
+
+  @media (max-width: 450px) {
+    padding: 3px 5px !important;
+    font-size: 10px !important;
+    gap: 4px !important;
+    svg {
+      width: 12px !important;
+      height: 12px !important;
+    }
+  }
+}
+
+.hide-on-mobile {
+  @media (max-width: 500px) {
+    display: none !important;
+  }
+}
+
+.vertical-divider {
+  width: 2px;
+  height: 28px;
+  background-color: rgb(203, 213, 225);
+
+  @media (max-width: 1024px) {
+    height: 20px;
+  }
+  @media (max-width: 780px) {
+    height: 16px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .user-profile-pill {
+    padding: 4px !important;
+    gap: 0 !important;
+    .user-profile-info {
+      display: none !important;
+    }
+  }
+
+  .topbar img.spect-icon {
+    max-height: 40px !important;
+    padding-right: 10px !important;
+  }
+}
+
+@media (max-width: 780px) {
+  .topbar img.spect-icon {
+    display: none !important;
+  }
+
+  .user-profile-pill {
+    .user-profile-avatar,
+    .user-profile-img {
+      width: 32px !important;
+      height: 32px !important;
+      font-size: 14px !important;
+    }
+  }
+}
+
+@media (max-width: 360px) {
+  .topbar {
+    padding: 8px 10px !important;
+  }
+  .topbar-content {
+    gap: 0 !important;
+  }
+  .topbar .brand {
+    gap: 6px !important;
+  }
+  .topbar .brand-mark {
+    width: 34px !important;
+    height: 34px !important;
+    border-radius: 6px !important;
+    min-width: 34px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+  .topbar .brand-mark img {
+    max-width: 24px !important;
+    height: auto !important;
+    object-fit: contain !important;
+  }
+  .topbar .btx p {
+    display: none !important;
+  }
+  .topbar .btx h1 {
+    font-size: 14px !important;
+    line-height: 1 !important;
+    white-space: nowrap !important;
+  }
+  .user-profile-pill {
+    padding: 2px 6px 2px 2px !important;
+    gap: 4px !important;
+    border: none !important;
+    .user-profile-avatar,
+    .user-profile-img {
+      width: 28px !important;
+      height: 28px !important;
+      font-size: 13px !important;
+    }
+  }
+  .topbar-item-wrapper {
+    padding: 4px !important;
+    border: none !important;
+  }
+}

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

@@ -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 {

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);
   }
 }
 

package/src/pages/employee/inbox.scss

@@ -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;

package/src/pages/employee/index.scss

@@ -658,6 +658,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 +692,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);
   }