@djb25/digit-ui-css 1.0.2 → 1.0.3

package/src/digitv2/typography.scss

@@ -0,0 +1,241 @@
+@import url("../index.scss");
+
+.typography {
+  &.text-heading-xl {
+    font-family: theme(digitv2.fontFamily.rc);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.heading-xl.desktop);
+    }
+
+    @media (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.heading-xl.tablet);
+    }
+
+    @media (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.heading-xl.mobile);
+    }
+  }
+
+  &.text-heading-l {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.heading-l.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.heading-l.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.heading-l.mobile);
+    }
+  }
+  &.text-heading-m {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.heading-m.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.heading-m.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.heading-m.desktop);
+    }
+  }
+  &.text-heading-s {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+  }
+  &.text-heading-xs {
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.heading-xs.mobile);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.bold);
+      color: theme(digitv2.lightTheme.text-color-primary);
+      line-height: theme(digitv2.lineHeight.normal);
+    }
+  }
+  &.text-caption-l {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.italic);
+    font-weight: theme(digitv2.fontWeight.medium);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.caption-l.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.caption-l.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.caption-l.mobile);
+    }
+  }
+
+  &.text-caption-m {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.italic);
+    font-weight: theme(digitv2.fontWeight.medium);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.caption-m.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.caption-m.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.caption-m.mobile);
+    }
+  }
+
+  &.text-caption-s {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.italic);
+    font-weight: theme(digitv2.fontWeight.medium);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.caption-s.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.caption-s.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.caption-s.desktop);
+    }
+  }
+  &.text-body-l {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.italic);
+    font-weight: theme(digitv2.fontWeight.regular);
+    color: theme(digitv2.lightTheme.text-color-primary);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.body-l.desktop);
+      line-height: theme(digitv2.lineHeight.line-height-body-l.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.body-l.tablet);
+      line-height: theme(digitv2.lineHeight.line-height-body-l.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.body-l.mobile);
+      line-height: theme(digitv2.lineHeight.line-height-body-l.mobile);
+    }
+  }
+  &.text-body-s {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.italic);
+    font-weight: theme(digitv2.fontWeight.regular);
+    color: theme(digitv2.lightTheme.text-color-primary);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+      line-height: theme(digitv2.lineHeight.line-height-body-s.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+      line-height: theme(digitv2.lineHeight.line-height-body-s.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+      line-height: theme(digitv2.lineHeight.line-height-body-s.mobile);
+    }
+  }
+  &.text-body-xs {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.italic);
+    font-weight: theme(digitv2.fontWeight.regular);
+    color: theme(digitv2.lightTheme.text-color-primary);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.body-xs.desktop);
+      line-height: theme(digitv2.lineHeight.line-height-body-xs.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.body-xs.tablet);
+      line-height: theme(digitv2.lineHeight.line-height-body-xs.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.body-xs.mobile);
+      line-height: theme(digitv2.lineHeight.line-height-body-xs.mobile);
+    }
+  }
+  &.text-label {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.italic);
+    font-weight: theme(digitv2.fontWeight.regular);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.label.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.label.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.label.mobile);
+    }
+  }
+  &.text-link {
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    color: theme(digitv2.lightTheme.text-color-primary);
+    line-height: theme(digitv2.lineHeight.normal);
+    text-decoration: theme(digitv2.textDecorationLine.underline);
+
+    @media screen and (min-width: theme(digitv2.screens.desktop)) {
+      font-size: theme(digitv2.fontSize.link.desktop);
+    }
+    @media screen and (min-width: theme(digitv2.screens.tablet)) {
+      font-size: theme(digitv2.fontSize.link.tablet);
+    }
+
+    @media screen and (min-width: theme(digitv2.screens.mobile)) {
+      font-size: theme(digitv2.fontSize.link.mobile);
+    }
+  }
+}

package/src/index.scss

@@ -81,6 +81,7 @@
 @import "./components/staticDynamicMessages.scss";
 @import "./components/toggleSwitch.scss";
 @import "./components/plusMinus.scss";
+@import "./components/financeUi.scss";
 @import "./components/landingpage.scss";
 
 @import "./pages/employee/index.scss";
@@ -107,17 +108,30 @@
 @import "./pages/citizen/updatePropertyNumber.scss";
 @import "./pages/citizen/citizenDocument.scss";
 @import "./pages/employee/surveys.scss";
+@import "./digitv2/index.scss";
+/* @import "./digitv2/typography.scss"; */
+@import "./components/inboxv2/index.scss";
+@import "./components//sidebar.scss";
 
 .display-none {
   display: none;
 }
-.primary-label-btn{
-  margin: 10px auto 0px !important;
-}
+
 .p-unset {
   padding: unset !important;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+
 .flex-one {
   @apply flex-1;
 }
@@ -125,6 +139,7 @@
 .display-flex-gap-2 {
   @apply flex gap-3;
 }
+
 .rm-mb {
   margin-bottom: unset !important;
 }
@@ -177,17 +192,24 @@
   @apply mb-sm;
 }
 
+.employeeCard {
+  /*  TODO need to revisit that we need mx-md NABEEL/ANIL
+   @apply mb-md mx-md !important;
+  */
+  @apply mb-md !important;
+}
+
 .home-link {
   margin-left: 16px;
   margin-bottom: 16px;
 
   a {
-    color: #1d70b8;
+    color: theme(colors.link.normal);
   }
 }
 
 .clear-search-label {
-  color: #a82227;
+  color: theme(colors.primary.main);
   cursor: pointer;
 }
 
@@ -200,7 +222,7 @@
   @apply flex justify-between items-center;
 
   .download-button {
-    color: a82227;
+    color: theme(colors.primary.main);
     margin-left: 8px;
   }
 }
@@ -209,15 +231,13 @@
   @apply flex mb-sm;
 
   .download-button {
-    color: #a82227;
+    color: theme(colors.primary.main);
     margin-left: 8px;
-    white-space: nowrap;
-
   }
 }
 
 .check-page-link-button {
-  color: #a82227 !important;
+  color: theme(colors.primary.main) !important;
 }
 
 .pt-application-download-btn {
@@ -231,6 +251,7 @@
     position: unset;
   }
 }
+
 .application-table-container {
   @apply mt-lg ml-lg flex-1;
 }
@@ -240,10 +261,10 @@
   gap: 10px;
 
   svg {
-    fill: #a82227;
+    fill: theme(colors.primary.main);
   }
 
-  color: #5a1166;
+  color: theme(colors.primary.main);
 
   cursor: pointer;
   font-weight: 500;
@@ -251,7 +272,20 @@
 }
 
 .primaryColor {
-  color: #0b0c0c !important;
+  color: theme(colors.text.primary) !important;
+}
+
+input[readonly] {
+  @apply border-grey-dark !important;
+  background-color: theme(digitv2.lightTheme.background);
+  border-color: theme(digitv2.lightTheme.text-color-secondary);
+  color: theme(digitv2.lightTheme.text-color-secondary);
+}
+
+.hide-input-type-file {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none !important;
 }
 
 @media (hover: hover) {
@@ -284,14 +318,17 @@
 .react-time-picker {
   width: 194px;
   height: 2.5rem;
+
   &__wrapper {
-    border: 2px solid #0b0c0c;
+    border: 2px solid theme(colors.text.primary);
     padding-left: 16px;
   }
+
   &__inputGroup__input {
     @apply px-sm;
     line-height: 2.5rem;
     min-width: 16px;
+
     &:focus {
       outline: 2px solid black;
     }
@@ -308,10 +345,12 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
 input[type="number"] {
   -moz-appearance: textfield;
 }
 
+
 .static {
   @apply flex flex-col;
   min-height: 85vh;
@@ -320,8 +359,10 @@ input[type="number"] {
     flex: 1;
     max-height: 75vh;
     overflow: scroll;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
 
     &::-webkit-scrollbar {
       display: none;
@@ -389,7 +430,7 @@ input[type="number"] {
 
 .cheque-date {
   @apply flex items-center mb-lg;
-  border: 2px solid #0b0c0c;
+  border: 2px solid theme(colors.text.primary);
   border-radius: 2px;
 
   input {
@@ -414,7 +455,7 @@ input[type="number"] {
 
 .ifsc-field {
   @apply flex items-center mb-lg;
-  border: 2px solid #0b0c0c;
+  border: 2px solid theme(colors.text.primary);
   border-radius: 2px;
 
   input {
@@ -424,6 +465,7 @@ input[type="number"] {
     text-indent: 5px;
     padding: 6px 0px;
   }
+
   button {
     @apply outline-none;
     border: 0px;
@@ -434,9 +476,11 @@ input[type="number"] {
 
 .text-input {
   @apply relative w-full;
+
   input {
     &:hover {
-      @apply border-2 border-solid border-primary-main;
+      --border-opacity: 1;
+      border: 1px solid #667eea;
     }
   }
 }
@@ -506,12 +550,10 @@ input[type="number"] {
   width: 100% !important;
 }
 
-
-.edcr-citizen-inbox{ 
-   thead th:first-child{
-  min-width:100px; 
-}
-
+.edcr-citizen-inbox {
+  thead th:first-child {
+    min-width: 155px;
+  }
 }
 
 .error-boundary {
@@ -523,17 +565,19 @@ input[type="number"] {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  position: absolute !important;
+
   .error-container {
     display: flex;
     width: 400px;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+
     h1 {
       font-size: 32px;
       font-weight: bold;
     }
+
     button {
       height: 40px;
       width: 153px;
@@ -541,7 +585,7 @@ input[type="number"] {
       padding: 8px 24px;
       color: white;
       cursor: pointer;
-      background-color: #a82227;
+      background-color: theme(colors.primary.main);
     }
   }
 }
@@ -559,10 +603,17 @@ input[type="number"] {
 .full-width-card {
   width: 92vw !important;
 }
+
 .full-employee-card-link {
   width: 100% !important;
   margin: 7px 0px;
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
 }
+
 .full-employee-card-height {
   height: unset !important;
 }
@@ -571,15 +622,18 @@ input[type="number"] {
   .full-employee-card-height {
     height: 196px !important;
   }
+
   .full-employee-card-link {
     width: 30% !important;
   }
+
   .full-width-card {
     @apply w-full !important;
   }
 }
-.applications-list-container {
-}
+
+.applications-list-container {}
+
 .complaint-summary {
   @media (min-width: 780px) {
     flex: 1 0 auto;
@@ -598,6 +652,7 @@ input[type="number"] {
     padding-right: 16px;
   }
 }
+
 @media (min-width: 780px) {
   .citizen-card-container {
     padding-left: 15px;
@@ -607,9 +662,9 @@ input[type="number"] {
 }
 
 @media (min-width: 780px) {
+
   .citizen-obps-wrapper,
   .selection-card-wrapper,
-  .fsm-citizen-wrapper,
   .pgr-citizen-wrapper,
   .pt-citizen,
   .bill-citizen,
@@ -626,12 +681,15 @@ input[type="number"] {
     margin-top: 1rem;
   }
 }
+
 @media only screen and (max-width: 768px) {
+
   /* For mobile phones: */
   .error-boundary {
     height: 75vh;
   }
 }
+
 .employee-app-wrapper {
   min-height: calc(100vh - 8em);
 }
@@ -642,9 +700,11 @@ input[type="number"] {
     flex-direction: row-reverse !important;
     width: 100% !important;
     align-items: center;
+
     button {
       width: 240px !important;
     }
+
     p {
       width: unset;
       margin-right: 1rem;
@@ -669,6 +729,7 @@ input[type="number"] {
     padding-bottom: 8px;
     margin-bottom: 8px;
   }
+
   .row {
     color: #b1b4b6;
     font-weight: 700;
@@ -687,11 +748,13 @@ input[type="number"] {
 .connection-details-old-value-wrapper,
 .plumber-details-old-value-wrapper {
   flex: 1 1 auto;
+
   .old-value-null-wrapper {
     visibility: hidden;
     padding-bottom: 8px;
     margin-bottom: 8px;
   }
+
   .row {
     color: #b1b4b6;
     font-weight: 700;
@@ -703,67 +766,39 @@ input[type="number"] {
   padding: 1rem;
   font-weight: 400;
 }
+
 .modal-body-ws {
   padding: 1rem;
   font-weight: 700;
-  color: #0b0c0c;
+  color: theme(colors.text.primary);
   font-size: 24px;
   margin-bottom: 1rem;
 }
+
 .privacy-icon {
   cursor: pointer;
 }
+
 .privacy-icon:hover {
   path {
     fill: rgba(244, 119, 56, 1);
   }
 }
 
-.employee-app-wrapper{
-min-height: calc(100vh - 8em);
-}
-.submit-bar header{
-  line-height: 2.0rem !important;
-}
-.logo-removeBorderRadiusLogo svg{
-  width: 50px;
-  height: 60px;
-}
-
-.icon-banner-employee {
-    background-color:#d7aefc !important;
-}
-.icon-banner-employee svg{
-  background-color:#bf2f3b !important;
-  width: 40px;
-  height: 40px;
-}
-.inboxButton{
-    border: none;
-    color: white;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 14px;
-    margin: 4px 2px;
-    cursor: pointer;
-    height: fit-content;
-    border-radius: 5px;
-    font-family: sans-serif;
-    font-weight: 700;
-}
-.employee .inboxButton{
-  padding: 5px 15px;
-  background: #ba2b36
-}
-.citizen .inboxButton{
-  padding: 15px;
-  font-size: 1.2rem
+.privacy-icon-2 {
+  cursor: pointer;
 }
 
-@media screen and (max-width: 768px) {
-  .citizen .inboxButton{
-    font-size: 1rem;
+.privacy-icon-2:hover {
+  path {
+    fill: none;
   }
 }
 
+.audit-card {
+  width: 80%;
+  margin-left: -260px;
+  margin-right: -27%;
+  max-height: 120px;
+  margin-top: 90px;
+}