@djb25/digit-ui-css 1.0.30 → 1.0.32

package/src/pages/employee/login.scss

@@ -1,12 +1,12 @@
 .loginFormStyleEmployee {
   .employeeCard {
-     background-color: transparent !important;
+    background-color: transparent !important;
     .submit-bar {
       @apply w-full;
     }
   }
 }
-.banner .bannerCard{
+.banner .bannerCard {
   min-width: 420px !important;
 }
 .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
@@ -19,10 +19,12 @@
   .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
     padding: 7px;
   }
- .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
+  .loginFormStyleEmployee .employeeCard,
+  .banner .bannerCard {
     min-width: 420px !important;
   }
-  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
+  .employeeForgotPassword .employeeCard,
+  .employeeChangePassword .employeeCard {
     max-width: 420px !important;
     min-width: 420px !important;
   }
@@ -63,7 +65,8 @@
 .employeeCard .card-sub-header {
   font-size: 24px;
 }
-.loginFormStyleEmployee .employeeCard .card-label, .employeeForgotPassword .employeeCard .card-label{
+.loginFormStyleEmployee .employeeCard .card-label,
+.employeeForgotPassword .employeeCard .card-label {
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
@@ -73,15 +76,12 @@
 .banner .bannerHeader {
   margin-bottom: 20px;
 }
-.employeeCard .card-label{
+.employeeCard .card-label {
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
   color: theme(colors.text.primary);
 }
-.profile-label-margin{
-   margin-top: 10px;
-}
 
 .employeeForgotPassword .employeeCard .card-label-desc {
   font-weight: normal;
@@ -114,78 +114,82 @@
   padding-top: 0px !important;
 }
 .banner {
-  height: calc(100vh ) !important;
+  height: calc(100vh) !important;
 }
 
-.employeeChangePassword .employeeCard .field .field-container{
+.employeeChangePassword .employeeCard .field .field-container {
   margin-bottom: 24px;
 }
 
-.employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
+.employeeForgotPassword .employeeCard .employee-card-sub-header,
+.employeeChangePassword .employeeCard .employee-card-sub-header,
+.loginFormStyleEmployee .employeeCard .employee-card-sub-header {
   font-size: 24px !important;
   line-height: 28px !important;
   margin-bottom: 0px !important;
 }
-@media screen and (max-width : 768px){
-  .employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
+@media screen and (max-width: 768px) {
+  .employeeForgotPassword .employeeCard .employee-card-sub-header,
+  .employeeChangePassword .employeeCard .employee-card-sub-header,
+  .loginFormStyleEmployee .employeeCard .employee-card-sub-header {
     font-size: 18px !important;
     line-height: 21px !important;
     margin-bottom: 0px !important;
   }
-  .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
+  .loginFormStyleEmployee .employeeCard,
+  .banner .bannerCard {
     min-width: 340px !important;
     margin: 10px !important;
   }
-  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
+  .employeeForgotPassword .employeeCard,
+  .employeeChangePassword .employeeCard {
     max-width: 360px !important;
     min-width: 340px !important;
     margin: 10px !important;
   }
 }
-.employeeChangePassword .employeeCard .card-text{
+.employeeChangePassword .employeeCard .card-text {
   margin-top: 18px !important;
   margin-bottom: 20px !important;
 }
-.employeeBackbuttonAlign{
+.employeeBackbuttonAlign {
   display: none;
 }
-.resend-otp{
+.resend-otp {
   cursor: pointer;
 }
 
 .employee-select-wrap.login-city-dd {
-  .options-card{
-  max-height: 200px;
+  .options-card {
+    max-height: 200px;
   }
 }
-@media screen and (max-width: 768px){
-  .employeeBackbuttonAlign{
+@media screen and (max-width: 768px) {
+  .employeeBackbuttonAlign {
     display: block;
     position: absolute;
     top: 20px;
     left: 20px;
   }
-  .banner{
+  .banner {
     align-items: flex-end;
     padding-bottom: 40px;
     height: 100vh !important;
   }
-  
-  .employee .loginContainer{
+
+  .employee .loginContainer {
     padding-top: 0px !important;
   }
-  .removeBottomMargin{
+  .removeBottomMargin {
     margin-bottom: 0px !important;
   }
   .employee-select-wrap.login-city-dd {
-    .options-card{
-    max-height: 160px;
+    .options-card {
+      max-height: 160px;
     }
   }
 }
 
-
-
 @media (max-width: 768px) {
   .modernFinanceUIWelcomeContainer,
   .modernFinanceUIWelcomeContent,
@@ -207,22 +211,21 @@
 }
 
 .loginFormStyleEmployee {
-
   .loginCardSubHeaderClassName {
     text-align: center !important;
   }
   .loginCardClassName {
-     background-color: transparent !important;
-    margin: auto !important; 
+    background-color: transparent !important;
+    margin: auto !important;
     min-width: 408px !important;
-    header.employee-card-sub-header{
+    header.employee-card-sub-header {
       text-align: center;
       margin-top: 10px;
     }
   }
   .buttonClassName {
     max-width: 100% !important;
-    width: 100% !important
+    width: 100% !important;
   }
   .field .field-container .text-input input {
     margin-bottom: 5px !important;
@@ -245,7 +248,7 @@
     margin-right: 10px;
     border-right: 1px solid #0b0c0c;
   }
-  
+
   .primary-label-btn {
     margin: 20px auto 0 auto !important;
   }
@@ -255,7 +258,6 @@
   }
 }
 @media screen and (max-width: 768px) {
-  
   /* remove ALL fixed/min widths */
   .loginCardClassName,
   .employeeCard,

package/src/pages/employee/userProfile.scss

@@ -0,0 +1,235 @@
+.profile-card {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  background: #fff;
+  width: fit-content;
+
+  &.employee {
+    @media (min-width: 768px) {
+      width: 33.33%;
+      height: fit-content;
+      min-width: 250px;
+    }
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
+    padding: 8px;
+  }
+
+  &.citizen {
+    flex: 1;
+    box-shadow: none;
+    border: 8px solid #fff;
+    padding: 8px;
+  }
+}
+
+.profile-image-wrapper {
+  &.employee {
+    padding: 16px;
+    height: 100%;
+    width: 100%;
+    max-width: 450px;
+    aspect-ratio: 1/1;
+  }
+
+  &.citizen {
+    height: 114px;
+    width: 114px;
+  }
+}
+
+.profile-image {
+  margin: auto;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  display: block;
+  border-radius: 50%;
+  z-index: 11;
+  position: inherit;
+}
+
+.profile-camera-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  background: #82ade5;
+  border-radius: 50%;
+  z-index: 12;
+  &:hover {
+    background: #395dec;
+  }
+}
+
+.profile-action-bar {
+  height: 88px;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 64px;
+  align-items: center;
+}
+
+.profile-save-btn {
+  margin-top: 24px;
+  background-color: #a82227;
+  height: 40px;
+  float: right;
+  color: white;
+  border-bottom: 1px solid black;
+  cursor: pointer;
+  z-index: 999;
+
+  &.desktop {
+    width: 248px;
+    margin-right: 31px;
+  }
+
+  &.mobile {
+    width: 100%;
+    margin: 0 16px;
+    margin-right: 16px;
+  }
+}
+
+.login {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  padding-top: 16px;
+  padding-inline: 20px;
+  margin-bottom: 88px;
+
+  .generic-button {
+    color: #fff;
+    cursor: pointer;
+    position: relative;
+    border-radius: 10px;
+    background-color: #171f1d;
+  }
+}
+
+@media (min-width: 768px) {
+  .login {
+    padding-inline: 58px;
+  }
+}
+
+.user-profile-container {
+  margin: 24px;
+  position: relative;
+}
+
+.user-profile-wrapper {
+  display: flex;
+  flex: 1;
+  align-self: center;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+  @media (max-width: 768px) {
+    align-items: center;
+  }
+
+  .save-btn {
+    background-color: #7696e7 !important;
+  }
+
+  &.employee {
+    gap: 16px;
+    max-width: unset;
+    box-shadow: none;
+    background: none;
+    border-radius: 0;
+    width: 100%;
+
+    @media (max-width: 767px) {
+      margin: 24px;
+      flex-direction: column;
+      min-width: unset;
+    }
+  }
+
+  &.citizen {
+    @media (max-width: 767px) {
+      margin: 24px;
+      flex-direction: column;
+      min-width: unset;
+    }
+    margin: 8px;
+    gap: unset;
+    max-width: 960px;
+
+    &.default-tab {
+      box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
+      background: white;
+      border-radius: 4px;
+    }
+
+    &.address-tab {
+      box-shadow: none;
+      background: none;
+      border-radius: 0;
+    }
+  }
+}
+
+.profile-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+  padding-bottom: 20px;
+  gap: 8px;
+
+  &.employee {
+    flex: 7.5;
+    padding: 24px;
+    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
+  }
+
+  &.citizen {
+    flex: 1;
+    padding: 8px;
+    box-shadow: none;
+  }
+
+  &.default-tab {
+    border-radius: 12px;
+    background: white;
+  }
+
+  &.address-tab {
+    border-radius: unset;
+    background: none;
+  }
+}
+
+.profile-image-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50%;
+  background: #82ade5;
+  z-index: 10;
+  border-radius: 10px 10px 0 0;
+}
+
+.profile-circle-wrapper {
+  position: relative;
+}
+
+.save-button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}