@djb25/digit-ui-css 1.0.20 → 1.0.22

package/src/pages/employee/inbox.scss

@@ -137,10 +137,21 @@
   }
 }
 
+@media (max-width: 768px) {
+  .inbox-container {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .inbox-container {
   gap: 16px;
 
   .filters-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
     .filter {
       .filter-card {
         border-radius: 6px;
@@ -203,14 +214,38 @@
   }
 }
 
+.generic-button {
+  height: 32px;
+  border-radius: 9999999px;
+  color: #e2e8f0;
+  border: 2px solid #e2e8f0;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #e2e8f0;
+    color: #5d6774;
+  }
+}
+
+@media (max-width: 480px) {
+  .generic-button {
+    padding: 0 12px;
+  }
+}
+
 .clear-search,
 .clear-search .link-label {
-  @apply text-focus;
-  @apply block;
+  @apply border-focus text-focus;
   cursor: pointer;
 
   &:hover {
-    color: #000;
+    color: #3b59df;
+    background-color: #bdc7f3;
   }
 }
 
@@ -257,15 +292,22 @@
     padding: 8px !important;
     background: #fff;
     border-radius: 6px;
+
+    @media (max-width: 768px) {
+      display: none !important;
+    }
+
     .header {
       display: flex;
       border: none;
       @apply justify-start;
       align-items: center;
+
       .logo {
         @apply bg-white;
         display: flex;
         align-items: center;
+
         svg {
           path {
             fill: theme(colors.primary.main);
@@ -296,15 +338,12 @@
   .inbox-container {
     @apply flex;
     height: inherit;
-    padding-bottom: 24px;
 
     .filters-container {
       width: 270px;
       overflow-y: scroll;
-      
-      .filter {
-        @apply mt-md;
 
+      .filter {
         .filter-card {
           @apply p-md bg-white;
 
@@ -467,7 +506,8 @@
 .inbox-action-container {
   display: flex;
   justify-content: flex-end;
-  align-items: flex-start;
+  align-items: center;
+  width: 100%;
 }
 
 /*

package/src/pages/employee/index.scss

@@ -74,6 +74,22 @@
   }
 }
 
+.employee-main-application-details{
+  width: 100%;
+  overflow-y: scroll;
+}
+
+.employee-form-content {
+  flex: 1 1 0%;
+  overflow-y: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+
+
 .citizen {
   .main {
     padding-top: 82px;
@@ -423,12 +439,12 @@
 
     .header-icon-area {
       position: absolute;
-      top: 55%;
+      top: 41%;
       right: 20px;
       transform: translateY(-50%);
       opacity: 0.5;
       pointer-events: none;
-      max-width: 143px;
+      max-width: 157px;
 
       @media (max-width: 768px) {
         right: 10px;
@@ -460,12 +476,12 @@
     }
 
     .greeting-date {
-      margin: 0;
+      margin-left: 40px;
       font-size: 15px;
       font-weight: 500;
       color: rgba(255, 255, 255, 0.9);
       letter-spacing: 0.5px;
-      text-transform: uppercase;
+
     }
 
     /* --- Right: Omni Search Area --- */
@@ -871,8 +887,8 @@
 
 @media (min-width: 1024px) {
   .top-info-cards-wrapper {
-    flex-direction: row;
-    /* 50/50 Split on Desktop */
+    display: grid;
+    grid-template-columns: 3fr 1fr; 
     align-items: stretch;
   }
 }
@@ -880,8 +896,6 @@
 @media (min-width: 375px) {}
 
 .static-card {
-  flex: 1;
-  /* Ensures perfect 50/50 width */
   background: white;
   border-radius: 16px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
@@ -889,13 +903,113 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  max-height: 48vh;
   min-height: 250px;
 }
 
+.custom-tabs-header {
+  display: flex;
+  border-bottom: 1px solid #e2e8f0;
+  margin-bottom: 8px;
+  padding: 0 16px;
+}
+.custom-tab-btn {
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  color: #94a3b8;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.custom-tab-btn.active {
+  color: #2563eb;
+  border-bottom-color: #2563eb;
+}
+
+.compact-list {
+  padding: 0 16px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.compact-list-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.compact-list-item:last-child {
+  border-bottom: none;
+}
+
+.dot-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.compact-title {
+  font-size: 14px;
+  color: #1e293b;
+  font-weight: 500;
+  flex: 1;
+}
+
+.compact-badge {
+  background-color: #e0f2fe;
+  color: #0369a1;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  margin: 0 12px;
+}
+
+.compact-right-text {
+  font-size: 13px;
+  color: #64748b;
+  white-space: nowrap;
+}
+.compact-right-text.danger {
+  color: #ef4444;
+  font-weight: 600;
+}
+
+.ra-compact-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f1f5f9;
+}
+.ra-compact-item:last-child {
+  border-bottom: none;
+}
+
+.ra-icon-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.ra-header-square-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  margin-right: 8px;
+}
 .ra-footer {
   margin-top: auto;   
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
   padding-top: 16px;   
   padding-bottom: 0px; 
   display: flex;