@djb25/digit-ui-css 1.0.5 → 1.0.6

package/src/components/navbar.scss

@@ -8,12 +8,15 @@
     min-width: 78px;
     height: 24px;
   }
+
   .nav {
     display: flex;
     justify-content: space-between;
   }
+
   .nav-wrapper {
     display: flex;
+
     @media (min-width: 780px) {
       .hamburger-span {
         display: none;
@@ -48,6 +51,7 @@
     .label-text {
       color: #767676;
     }
+
     &.name-Profile {
       .label-text {
         letter-spacing: 0.6px;
@@ -57,6 +61,7 @@
       }
     }
   }
+
   .profile-divider {
     border-top: 1px solid theme(colors.border);
     margin-left: 20px;
@@ -71,6 +76,7 @@
   position: relative;
   min-height: 1px;
   overflow: auto;
+
   .menu-item {
     border: 10px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -87,6 +93,7 @@
     min-height: 48px;
     white-space: initial;
     background: none;
+
     .icon {
       display: block;
       color: rgb(117, 117, 117);
@@ -96,25 +103,31 @@
       float: left;
       margin-top: 12px;
     }
-    .edit-btn-ico{
+
+    .edit-btn-ico {
       height: 17px;
       width: 17px;
       margin-top: 16px;
     }
-    .icon + .menu-label {
+
+    .icon+.menu-label {
       margin-left: 36px;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
   }
+
   .sidebar-list {
     padding-right: 16px;
     padding-left: 16px;
+
     &.active {
       border-left: 5px solid theme(colors.primary.main);
+
       .menu-label {
         color: theme(colors.primary.main);
       }
+
       .icon {
         fill: theme(colors.primary.main);
       }
@@ -124,11 +137,12 @@
       cursor: pointer;
       display: flex;
       flex-direction: column;
-      
+
       .sidebar-link {
         display: flex;
         justify-content: space-between;
         align-items: center;
+
         svg {
           width: 21px;
           height: 21px;
@@ -136,6 +150,7 @@
           fill: rgb(117, 117, 117);
         }
       }
+
       .actions {
         display: flex;
         align-items: center;
@@ -149,6 +164,7 @@
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
         input {
           border: none;
           outline: none;
@@ -164,12 +180,14 @@
     .actions {
       display: flex;
       padding: 1em;
+
       svg {
         width: 21px;
         height: 21px;
         color: rgb(117, 117, 117);
         fill: rgb(117, 117, 117);
       }
+
       span {
         color: #5f5c62;
       }
@@ -179,6 +197,7 @@
 
 .drawer-desktop {
   overflow: auto;
+
   .menu-item {
     border: 10px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -195,6 +214,7 @@
     min-height: 48px;
     white-space: initial;
     background: none;
+
     .icon {
       display: block;
       color: rgb(117, 117, 117);
@@ -204,28 +224,34 @@
       float: left;
       margin-top: 12px;
     }
+
     .edit-btn-ico {
       height: 17px;
       width: 17px;
       margin-top: 16px;
     }
-    .icon + .menu-label {
+
+    .icon+.menu-label {
       margin-left: 36px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
   }
+
   @media (min-width: 780px) {
     .sidebar-list {
       padding-right: 16px;
       padding-left: 16px;
+
       &.active {
         border-left: 5px solid theme(colors.primary.main);
         padding-left: 11px;
+
         .menu-label {
           color: theme(colors.primary.main);
         }
+
         .icon {
           fill: theme(colors.primary.main);
         }
@@ -236,23 +262,26 @@
         cursor: pointer;
         display: flex;
         flex-direction: column;
-        
+
         .sidebar-link {
           display: flex;
           justify-content: space-between;
           align-items: center;
+
           svg {
             width: 21px;
             height: 21px;
             color: rgb(117, 117, 117);
             fill: rgb(117, 117, 117);
           }
+
           .actions {
             .tooltip {
               margin-left: 16px;
             }
           }
         }
+
         .actions {
           display: flex;
           align-items: center;
@@ -274,12 +303,14 @@
       .actions {
         display: flex;
         padding: 1em;
+
         svg {
           width: 21px;
           height: 21px;
           color: rgb(117, 117, 117);
           fill: rgb(117, 117, 117);
         }
+
         span {
           color: #5f5c62;
         }
@@ -306,7 +337,8 @@
 
 .digit-footer {
   @apply flex h-4 mb-sm;
+
   img {
     @apply mr-sm;
   }
-}
+}

package/src/components/staticSideBar.scss

@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
   color: #757575;
 
   .menu-item {
@@ -12,6 +10,7 @@
     min-height: 48px;
     margin: 0;
     padding: 0;
+
     .menu-item-icon {
       svg {
         color: #757575;
@@ -20,8 +19,9 @@
         height: 21px;
       }
     }
+
     .menu-item-text {
       margin-left: 1em;
     }
   }
-}
+}

package/src/components/topbar.scss

@@ -2,6 +2,7 @@
   position: fixed;
   top: 0;
   width: 100%;
+  padding: 10px 24px;
   background: white;
   box-shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;
   z-index: 9999999;
@@ -16,8 +17,9 @@
     }
 
     &.state {
-      min-height: 50px;
-      width: 80px;
+      height: 50px;
+      width: auto;
+      object-fit: contain;
     }
   }
 
@@ -89,6 +91,7 @@
   .select-wrap,
   .employee-select-wrap {
     margin-bottom: 0px;
+
     .profile-dropdown--item {
       span {
         white-space: pre;
@@ -99,6 +102,7 @@
 
 .cp {
   cursor: pointer;
+
   .hamburger {
     display: none;
   }
@@ -141,6 +145,7 @@
   @apply flex items-center justify-end;
   min-width: 85px;
 }
+
 video::-webkit-media-controls-panel {
   top: 55%;
   position: absolute;
@@ -149,4 +154,4 @@ video::-webkit-media-controls-panel {
 
 .topbarOptionsClassName {
   right: -3rem !important;
-}
+}

package/src/digitv2/components/appContainerV2.scss

@@ -3,19 +3,23 @@
 .app-container {
   @extend .light-background;
   width: 100%;
+
   form {
     .card {
       max-width: 960px;
+
       h2 {
         @extend .light-text-color-primary;
         text-align: left;
       }
-      .field-container {
-      }
+
+      .field-container {}
+
       button {
         @extend .light-primary-button;
         max-width: 240px;
       }
+
       .input-otp-wrap,
       .card-text-button {
         @extend .light-primary-button;
@@ -28,22 +32,28 @@
 @screen dt {
   .employee-app-container {
     @apply w-full;
+    padding-inline: 0px;
   }
 
   .app-container {
     width: 100%;
+
     form {
       .card {
         max-width: 960px;
+
         h2 {
           text-align: left;
         }
+
         .field-container {
           max-width: 540px;
         }
+
         button {
           max-width: 240px;
         }
+
         .input-otp-wrap,
         .card-text-button {
           text-align: left;
@@ -51,4 +61,4 @@
       }
     }
   }
-}
+}

package/src/index.scss

@@ -113,6 +113,8 @@
 /* @import "./digitv2/typography.scss"; */
 @import "./components/inboxv2/index.scss";
 @import "./components//sidebar.scss";
+@import "./components/moduleHeader.scss";
+@import "./components/VerticalTimeline.scss";
 
 .display-none {
   display: none;
@@ -132,7 +134,6 @@ h6 {
   font-weight: inherit;
 }
 
-
 .flex-one {
   @apply flex-1;
 }
@@ -351,7 +352,6 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-
 .static {
   @apply flex flex-col;
   min-height: 85vh;
@@ -665,7 +665,6 @@ input[type="number"] {
 @media (min-width: 780px) {
 
   .citizen-obps-wrapper,
-  .selection-card-wrapper,
   .pgr-citizen-wrapper,
   .pt-citizen,
   .bill-citizen,
@@ -681,6 +680,13 @@ input[type="number"] {
     padding-right: 16px;
     margin-top: 1rem;
   }
+
+  .selection-card-wrapper {
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: 2rem;
+    width: 96%;
+  }
 }
 
 @media only screen and (max-width: 768px) {

package/src/pages/citizen/HomePageWrapper.scss

@@ -5,11 +5,13 @@
     margin-bottom: 40px;
     width: 100%;
     @apply relative;
+
     .Search {
       width: calc(100% - 32px);
       bottom: -18px;
       @apply mx-md absolute;
     }
+
     img {
       height: 33vw;
       @apply w-full object-cover;
@@ -18,13 +20,13 @@
 
   .ServicesSection {
     @apply flex flex-wrap;
-    padding: 40px 15px 0 15px;
+    padding: 100px 15px 0 15px;
   }
 
   @screen dt {
     .ServicesSection {
       @apply flex flex-wrap;
-      padding: 40px 15px 0 15px;
+      padding: 100px 15px 0 15px;
       width: 100%;
     }
   }
@@ -32,25 +34,30 @@
   .WhatsNewSection {
     @apply m-sm;
     padding: 0 15px;
+
     .headSection {
       @apply flex mb-sm justify-between;
+
       h2 {
         @apply text-heading-s font-bold text-text-primary pl-sm;
       }
+
       p {
         @apply text-link text-primary-main font-medium cursor-pointer;
       }
     }
+
     @media (min-width: 780px) {
       padding: 0 15px;
     }
   }
 
-  .WhatsAppBanner{
+  .WhatsAppBanner {
     width: 100%;
     padding: 0px 20px 0px 20px;
     margin: auto;
     cursor: pointer;
+
     img {
       width: 100%;
     }
@@ -61,6 +68,7 @@
   .SideBarStatic {
     width: 219px;
     background: theme(colors.white);
+    margin-top: 22px;
   }
 }
 
@@ -69,6 +77,7 @@
     display: none;
   }
 }
+
 .HomePageContainer {
   @media (min-width: 780px) {
     display: flex;
@@ -81,30 +90,37 @@
   @media (min-width: 780px) {
     width: calc(100% - 219px);
   }
+
   margin-top: -25px;
+
   img {
     height: 33vw;
     filter: grayscale(100%);
     @apply w-full object-cover;
   }
+
   h1 {
     position: absolute;
     top: 100px;
     left: 21px;
     @apply text-heading-xl text-white font-bold;
   }
+
   .moduleLinkHomePageBackButton {
     border: none;
     top: 76px;
+
     svg {
       fill: theme(colors.white);
     }
+
     @apply absolute text-white text-heading-s ml-md;
   }
 }
 
 .moduleLinkHomePageModuleLinks {
   @apply mt-md;
+
   .CitizenHomeCard {
     .header {
       @apply hidden;
@@ -115,14 +131,17 @@
 @screen dt {
   .HomePageWrapper {
     width: 100%;
+
     .BannerWithSearch {
       margin-bottom: 56px;
       width: 100% !important;
+
       .Search {
         width: 100%;
         margin: 0;
         padding: 0 15px 0 15px;
       }
+
       img {
         height: 20vw;
       }
@@ -130,22 +149,26 @@
 
     .WhatsAppBanner {
       width: 100%;
-      img{
+
+      img {
         height: 20vw;
         width: 100%;
       }
     }
 
   }
+
   .moduleLinkHomePage {
     img {
       min-width: 100vw;
       height: 20vw;
     }
+
     h1 {
       top: calc(10vw + 40px);
       left: 15.8rem;
     }
+
     .moduleLinkHomePageBackButton {
       top: calc(10vw + 16px);
       @apply ml-md;
@@ -155,4 +178,4 @@
   .moduleLinkHomePageModuleLinks {
     width: 100%;
   }
-}
+}

package/src/pages/employee/container.scss

@@ -10,6 +10,7 @@
 .heading-m {
   @apply font-bold text-text-primary text-heading-m ml-md pt-sm;
 }
+
 .BPAheading-m {
   margin-left: 22px;
 }
@@ -20,17 +21,21 @@
 
 .employee-home-footer {
   @apply flex h-10 pb-md pt-sm justify-center w-full;
+
   img {
     height: 100%;
   }
 }
-.employee-login-home-footer{
+
+.employee-login-home-footer {
   @apply flex fixed bottom-0 h-10 bg-grey-bg pb-md pt-sm justify-center w-full;
-  img{
+
+  img {
     @apply ml-sm
   }
 }
-.fieldInspectionWrapper{
+
+.fieldInspectionWrapper {
   border: 1px solid theme(colors.border);
   padding: 16px;
   margin-top: 8px;
@@ -49,24 +54,30 @@
 @screen dt {
   .ground-container {
     margin-bottom: 56px;
+    padding-left: 0px;
     /* @apply p-md; */
   }
+
   .heading-m {
     @apply text-heading-m-dt;
   }
+
   .BPAheading-m {
     margin-left: 22px;
   }
+
   .break-line {
     margin-top: 40px;
     margin-bottom: 40px;
   }
-  .employee-home-footer {
-  }
+
+  .employee-home-footer {}
+
   .moduleCardWrapper {
     /* @apply flex flex-row flex-wrap !important; */
   }
+
   .gridModuleWrapper {
     @apply grid grid-cols-4 gap-1;
   }
-}
+}

package/src/pages/employee/inbox.scss

@@ -9,7 +9,7 @@
       width: 56px;
       height: 56px;
       @apply bg-focus;
-      padding: 12px;
+      padding: 0px;
       border-radius: 4px;
 
       svg {
@@ -169,7 +169,6 @@
     }
 
     .search-complaint-container {
-      width: 100%;
       @apply items-center bg-white p-md;
 
       .complaint-input-container {
@@ -227,7 +226,7 @@
 
       .logo {
         @apply bg-focus;
-        padding: 12px;
+        padding: 0px;
         border-radius: 4px;
       }
 
@@ -317,6 +316,7 @@
       width: 874px;
 
       .search-complaint-container {
+        width: 100%;
         margin: auto;
         @apply flex flex-col items-start mb-md bg-white p-md;