@djb25/digit-ui-css 1.0.13 → 1.0.15

package/package.json

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

package/src/components/body.scss

@@ -130,6 +130,7 @@ body {
     flex-direction: column;
     gap: 12px;
     padding: 20px;
+    padding-bottom: 0px;
     width: 100%;
 
     .header {

package/src/components/card.scss

@@ -180,6 +180,7 @@
 }
 
 @screen dt {
+
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
@@ -342,7 +343,7 @@
     }
 
     /* Remove any default margins that might interfere */
-    .label-field-pair > * {
+    .label-field-pair>* {
       margin: 0;
     }
 
@@ -373,8 +374,7 @@
       margin-right: auto;
     }
 
-    .header-content {
-    }
+    .header-content {}
 
     .header-end {
       margin-left: auto;
@@ -415,8 +415,7 @@
     margin-bottom: 24px;
   }
 
-  .info-banner-wrap-citizen-override {
-  }
+  .info-banner-wrap-citizen-override {}
 
   .oc-aknowledgement-screen {
     width: auto;
@@ -475,9 +474,16 @@
   gap: 24px;
   width: 100%;
   max-width: 426px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  min-height: 210px;
+  box-shadow: 0 14px 10px -6px rgba(0, 0, 0, 0.12), 0 8px 12px -8px rgba(0, 0, 0, 0.08);
   font-family: "Inter", -apple-system, sans-serif;
   overflow: hidden;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.new-employee-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 24px 36px -8px rgba(0, 0, 0, 0.18), 0 12px 20px -10px rgba(0, 0, 0, 0.12);
 }
 
 .new-employee-card::before {
@@ -487,7 +493,7 @@
   background-image: url("https://objectstorage.ap-hyderabad-1.oraclecloud.com/n/axn3czn1s06y/b/djb-dev-asset-bucket/o/dashboard_card_img.png");
   background-size: cover;
   background-position: center;
-  opacity: 0.2;
+  opacity: 0.5;
   z-index: 0;
 }
 
@@ -500,6 +506,18 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
+  padding-bottom: 12px;
+}
+.card-header-row::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #1a67a3 0%, rgba(26, 103, 163, 0) 100%);
+  border-radius: 2px;
 }
 
 .module-title {
@@ -512,7 +530,7 @@
 .module-icon-wrap {
   width: 36px;
   height: 36px;
-  background-color: #2563eb;
+  background-color: #1a67a3;
   border-radius: 8px;
   display: flex;
   justify-content: center;
@@ -535,7 +553,7 @@
 .main-kpi-number {
   font-size: 4.5rem;
   font-weight: 700;
-  color: #1d4ed8;
+  color: #1a67a3;
   line-height: 0.8;
   letter-spacing: -2px;
 }
@@ -560,7 +578,7 @@
 }
 
 .main-kpi-label {
-  color: #1d4ed8;
+  color: #1a67a3;
   font-weight: 500;
   font-size: 1.1rem;
 }
@@ -574,9 +592,9 @@
 
 .secondary-kpi-item {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
-  gap: 24px;
+  gap: 8px;
   width: 100%;
 }
 
@@ -629,7 +647,7 @@
 
 .pill-link {
   background-color: #eff6ff;
-  color: #2563eb;
+  color: #1a67a3;
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 0.75rem;
@@ -649,22 +667,25 @@
 .details-btn {
   background-color: #1e293b;
   color: #ffffff;
-  padding: 8px 20px;
-  border-radius: 20px;
-  font-size: 0.8rem;
+  padding: 6px 20px;
+  border-radius: 6px;
+  font-size: 0.75rem;
   font-weight: 600;
   border: none;
   cursor: pointer;
+  transition: background-color 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
   flex-shrink: 0;
-  margin-bottom: 2px;
 }
 
 .details-btn:hover {
   background-color: #0f172a;
 }
 
-/* --- EXISTING CARD STYLES (Keep your existing styles) --- */
-/* Ensure .new-employee-card, .card-header-row, etc. remain as they were */
+
 
 /* --- NEW: EXPANDED VIEW OVERLAY --- */
 .expanded-overlay {
@@ -674,7 +695,6 @@
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
-  /* Dim background */
   z-index: 9999;
   display: flex;
   justify-content: center;
@@ -693,7 +713,6 @@
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
 
-/* --- LEFT SIDEBAR --- */
 .expanded-sidebar {
   width: 20%;
   background-color: #ffffff;
@@ -749,10 +768,8 @@
   background-color: #f3f4f6;
 }
 
-/* Active State matches the screenshot (Blue bg, White text) */
 .sidebar-item.active {
   background-color: #00adef;
-  /* Match the Property Tax highlight */
   color: #ffffff;
   box-shadow: 0 4px 6px rgba(0, 173, 239, 0.2);
   padding: 6px;
@@ -769,7 +786,6 @@
 
 .sidebar-item.active .sidebar-icon-placeholder svg {
   stroke: #ffffff;
-  /* Make icon white when active */
 }
 
 /* --- RIGHT CONTENT --- */
@@ -847,12 +863,8 @@
 .expanded-page-container {
   display: flex;
   width: 100%;
-  /* Adjust height to fit within the layout minus header/footer if needed, 
-     or just let it flow. 
-     For a "page" feel similar to the modal, let's give it min-height.
-  */
+  
   min-height: calc(100vh - 100px);
-  /* border-radius: 8px; */
   overflow: hidden;
   gap: 20px;
 }
@@ -877,7 +889,6 @@
   max-width: 1200px;
   height: 80vh;
   background-color: #f7f8fa;
-  /* Light grey background like screenshot */
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
@@ -937,7 +948,6 @@
   background-color: #f3f4f6;
 }
 
-/* Active State: Blue Background, White Text */
 .sidebar-item.active {
   background-color: #00adef;
   color: #ffffff;
@@ -962,15 +972,13 @@
 .sidebar-icon {
   width: 18px;
   height: 18px;
-  color: #2563eb;
-  /* Professional blue */
+  color: #1a67a3;
   transition: all 0.25s ease;
   opacity: 0.75;
 }
 
 .sidebar-item.active .sidebar-icon {
-  color: #1d4ed8;
-  /* Slightly deeper blue when active */
+  color: #1a67a3;
   transform: scale(1.1);
   opacity: 1;
 }
@@ -981,7 +989,6 @@
   background-color: #ffffff;
   padding: 30px;
   overflow-y: auto;
-  /* Gap between sidebar and content */
   border-radius: 8px;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.02);
 }
@@ -1013,7 +1020,6 @@
   margin-top: 16px;
 }
 
-/* Link Wrapper to handle <a> or <Link> tags */
 .link-wrapper a {
   text-decoration: none;
   color: inherit;
@@ -1042,7 +1048,7 @@
   top: 0;
   bottom: 0;
   width: 4px;
-  background: linear-gradient(135deg, #00adef, #2563eb);
+  background: linear-gradient(135deg, #00adef, #1a67a3);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -1070,7 +1076,7 @@
 }
 
 .module-link-card:hover .link-card-label {
-  color: #2563eb;
+  color: #1a67a3;
 }
 
 .link-card-count {
@@ -1078,7 +1084,7 @@
   align-items: center;
   justify-content: center;
   background-color: #eff6ff;
-  color: #2563eb;
+  color: #1a67a3;
   font-size: 0.8rem;
   font-weight: 700;
   padding: 2px 8px;
@@ -1100,7 +1106,7 @@
 
 .module-link-card:hover .link-card-arrow {
   background-color: #dbeafe;
-  color: #2563eb;
+  color: #1a67a3;
   transform: translateX(4px);
 }
 
@@ -1122,7 +1128,7 @@
   --text-muted: #64748b;
   --hover-bg: #f8fafc;
   --active-bg: #eff6ff;
-  --active-text: #2563eb;
+  --active-text: #1a67a3;
 
   /* Animations */
   --transition-slow: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1167,14 +1173,13 @@
 .brand-container {
   display: flex;
   align-items: center;
-  /* Gap removed to allow for smooth width reduction */
 }
 
 .brand-icon {
   width: 36px;
   height: 36px;
   border-radius: 10px;
-  background: linear-gradient(135deg, #2563eb, #3b82f6);
+  background: linear-gradient(135deg, #1a67a3, #3b82f6);
   color: white;
   display: flex;
   justify-content: center;
@@ -1188,10 +1193,8 @@
   font-weight: 700;
   color: var(--text-main);
   margin: 0 0 0 16px;
-  /* Spacing applied here instead of flex gap */
   transition: opacity var(--transition-fast), width var(--transition-fast), margin var(--transition-fast);
   overflow: hidden;
-  /* Prevents text squishing */
 }
 
 .collapse-toggle {
@@ -1213,7 +1216,6 @@
   color: var(--text-main);
 }
 
-/* --- Navigation --- */
 .sidebar-nav {
   display: flex;
   flex-direction: column;
@@ -1234,8 +1236,7 @@
   display: flex;
   align-items: center;
   padding: 12px;
-  /* Gap removed here as well */
-}
+          }
 
 .nav-icon-wrapper {
   width: 24px;
@@ -1251,7 +1252,6 @@
   font-weight: 700;
   letter-spacing: 0.5px;
   background-color: var(--border-color);
-  /* Added a subtle background circle for initials */
   color: var(--text-muted);
   width: 100%;
   height: 100%;
@@ -1273,7 +1273,6 @@
   overflow: hidden;
 }
 
-/* Hover & Active States */
 .nav-link:hover {
   background-color: var(--hover-bg);
   color: var(--text-main);
@@ -1295,7 +1294,6 @@
 
 /* --- COLLAPSED STATE STYLES --- */
 
-/* Smoothly shrink and hide text */
 .collapsed .brand-name,
 .collapsed .nav-text {
   opacity: 0;
@@ -1324,4 +1322,4 @@
 .collapsed .nav-item-content {
   justify-content: center;
   padding: 12px 0;
-}
+}

package/src/components/moduleHeader.scss

@@ -1,5 +1,4 @@
 .module-header {
-  display: flex;
   justify-content: center;
   align-items: center;
 
@@ -10,17 +9,34 @@
     border-radius: 11px;
     margin-inline: 42px;
 
-    display: flex;
+
     align-items: center;
     justify-content: center;
 
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    /* 3D Box Shadow with Bevel Highlight */
+    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4),
+      0 8px 16px -4px rgba(0, 0, 0, 0.15),
+      0 4px 8px -4px rgba(0, 0, 0, 0.1);
+    /* Modern Glass Effect */
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    /* Hover Lift Effect */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
+        0 12px 20px -4px rgba(0, 0, 0, 0.2),
+        0 6px 10px -4px rgba(0, 0, 0, 0.15);
+    }
 
     .title {
       margin: 0;
       font-size: 25px;
       font-weight: 700;
       color: #000000;
+      text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5);
     }
   }
 
@@ -34,7 +50,13 @@
     align-items: center;
     justify-content: flex-start;
     color: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    /* Matching 3D Shadow and Bevel for Bottom Section */
+    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3),
+      0 4px 8px -2px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-top: none;
     font-size: 14px;
     font-weight: 500;
 
@@ -88,4 +110,4 @@
       padding-right: 20px;
     }
   }
-}
+}

package/src/index.scss

@@ -703,7 +703,7 @@ input[type="number"] {
 
 .employee-app-wrapper {
   min-height: calc(100vh - 8em);
-  height: calc(100vh - 125px);
+  height: calc(100vh - 105px);
 }
 
 .ws-custom-wrapper {

package/src/pages/citizen/HomePageWrapper.scss

@@ -62,6 +62,113 @@
       width: 100%;
     }
   }
+
+  /* ===== Citizen Theme (Matching Employee Dashboard) ===== */
+  .citizen-app-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 24px;
+    margin-top: 45px;
+  }
+
+  .citizen-module-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+    .citizen-header-top-section {
+      width: 100% !important;
+      background: #7a99f1 !important;
+      padding: 16px 32px !important;
+      border-radius: 8px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: flex-end !important;
+      min-height: 56px !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    .citizen-header-title {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 600;
+      color: #ffffff;
+    }
+  }
+
+  .citizen-module-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    padding: 0;
+    width: 100%;
+
+    @media (max-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (max-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 480px) {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
+    }
+  }
+
+  .citizen-service-card {
+    background: #ffffff !important;
+    border-radius: 12px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+    padding: 24px !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+    border: 1px solid #eeeeee !important;
+    min-height: 100px !important;
+    gap: 16px !important;
+
+    &:hover {
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+      transform: translateY(-2px);
+    }
+
+    &__icon {
+      width: 40px !important;
+      height: 40px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex-shrink: 0 !important;
+
+      svg {
+        width: 100% !important;
+        height: 100% !important;
+      }
+
+      img {
+        width: 100% !important;
+        height: 100% !important;
+      }
+    }
+
+    &__label {
+      margin: 0 !important;
+      font-size: 16px !important;
+      font-weight: 500 !important;
+      color: #333333 !important;
+      text-align: left !important;
+      width: auto !important;
+      flex: 1 !important;
+    }
+  }
 }
 
 @media (min-width: 780px) {

package/src/pages/employee/container.scss

@@ -72,6 +72,13 @@
   width: 100%;
 }
 
+.gridModuleWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 10px;
+}
+
 @screen dt {
   .employee-app-wrapper {
     flex-direction: row;

package/src/pages/employee/ekyc.scss

@@ -2,13 +2,15 @@
     .inbox-main-container {
         flex: 1;
         padding-right: -24px;
-        background-color: #f4f7f9;
+        background-color: #ffffff;
+        border-radius: 12px;
     }
 
     .inbox-wrapper {
         min-width: 100%;
         padding: 24px;
         background-color: rgb(241 241 241);
+        border-radius: 12px;
     }
 
     .ekyc-header-container {
@@ -58,9 +60,11 @@
         margin-bottom: 24px;
         padding: 20px;
         background-color: #fff;
+        border-radius: 12px;
     }
 
     .ekyc-search-container {
+        width: 100%;
         flex: 1;
 
         .search-inner {
@@ -69,18 +73,67 @@
             border: none;
         }
 
-        .input-grid {
-            display: grid;
-            gap: 20px;
-            align-items: end;
-            grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
+        .search-field-wrapper {
+            display: flex;
+            align-items: flex-end;
+            gap: 24px;
+            width: 100%;
         }
 
-        .submit-wrapper {
+        .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;
-            height: 40px;
+            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;
+            }
         }
     }