@pmidc/upyog-css 1.1.5 → 1.1.6

package/src/components/topbar.scss

@@ -1,128 +1,195 @@
+
 .topbar {
-  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
   width: 100%;
-  padding: 10px 24px;
-  background: white;
-  box-shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;
+  padding: 12px 24px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.98));
+  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+  backdrop-filter: blur(6px);
   z-index: 9999999;
-  @apply flex items-center;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: box-shadow 0.25s ease;
+}
 
-  img {
-    display: inline;
+.topbar img {
+  display: inline;
+}
 
-    &.city {
-      margin-right: 8px;
-      height: 48px;
-      width: 48px;
-    }
+.topbar img.city {
+  margin-right: 12px;
+  height: 48px;
+  width: 48px;
+  border-radius: 8px;
+  transition: transform 0.2s ease;
+}
 
-    &.state {
-      min-height: 50px;
-      width: 80px;
-    }
-  }
+.topbar img.city:hover {
+  transform: scale(1.05);
+}
 
-  .ulb {
-    font-weight: bold;
-    display: inline-block;
-  }
+.topbar img.state {
+  min-height: 50px;
+  width: 80px;
+  display: none;
+}
 
-  .right {
-    float: right;
-    margin-top: 12px;
-    position: relative;
-
-    svg {
-      display: inline;
-    }
-
-    .user-img-txt {
-      background: #a82227;
-      padding: 10px 15px;
-      border-radius: 50%;
-      color: white;
-      font-weight: 700;
-    }
-  }
+.topbar .ulb {
+  font-weight: 600;
+  display: inline-block;
+  color: #1f2937;
+  font-size: 15px;
+  letter-spacing: -0.3px;
+}
 
-  .left {
-    float: left;
-  }
+.topbar .right {
+  float: unset;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 0;
+  position: relative;
+}
 
-  .w-80 {
-    width: 70%;
-  }
+.topbar .right svg {
+  display: inline;
+  color: #6b7280;
+  fill: #6b7280;
+  transition: color 0.2s ease;
+}
 
-  .width-20 {
-    width: 30%;
-  }
+.topbar .right svg:hover {
+  color: #2563eb;
+  fill: #2563eb;
+}
 
-  .margin-top-6 {
-    margin-top: 6px;
-  }
+.topbar .right .user-img-txt {
+  background: linear-gradient(135deg, #2563eb, #7c3aed);
+  padding: 10px 15px;
+  border-radius: 50%;
+  color: white;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
 
-  .margin-right-30 {
-    margin-right: 30px;
-  }
+.topbar .right .user-img-txt:hover {
+  transform: scale(1.08);
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
+}
 
-  .margin-top-10 {
-    margin-top: 10px;
-  }
+.topbar .left {
+  float: unset;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 
-  .icon {
-    display: block;
-    color: rgb(117, 117, 117);
-    fill: rgb(117, 117, 117);
-    height: 21px;
-    width: 21px;
-  }
+.topbar .w-80 {
+  width: auto;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
 
-  .column-gap-15 {
-    column-gap: 15px;
-  }
+.topbar .width-20 {
+  width: auto;
+}
 
-  .column-gap-5 {
-    column-gap: 5px;
-  }
+.topbar .margin-top-6 {
+  margin-top: 0;
+}
+
+.topbar .margin-right-30 {
+  margin-right: 16px;
+}
 
-  .select-wrap,
-  .employee-select-wrap {
-    margin-bottom: 0px;
-    .profile-dropdown--item {
-      span {
-        white-space: pre;
-      }
-    }
+.topbar .margin-top-10 {
+  margin-top: 0;
+}
+
+.topbar .icon {
+  display: block;
+  color: #6b7280;
+  fill: #6b7280;
+  height: 21px;
+  width: 21px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.topbar .icon:hover {
+  color: #2563eb;
+  fill: #2563eb;
+}
+
+.topbar .column-gap-15 {
+  column-gap: 16px;
+}
+
+.topbar .column-gap-5 {
+  column-gap: 8px;
+}
+
+.topbar .select-wrap,
+.topbar .employee-select-wrap {
+  margin-bottom: 0px;
+}
+
+.topbar .select-wrap .profile-dropdown--item span,
+.topbar .employee-select-wrap .profile-dropdown--item span {
+  white-space: pre;
+}
+
+@media (max-width: 768px) {
+  .topbar {
+    padding: 10px 16px;
+  }
+  .topbar .right {
+    gap: 12px;
+  }
+  .topbar .left {
+    gap: 8px;
+  }
+  .topbar img.city {
+    height: 40px;
+    width: 40px;
   }
 }
 
 .cp {
   cursor: pointer;
-  .hamburger {
-    display: none;
-  }
+}
 
-  @media (max-width: 780px) {
-    .hamburger {
-      display: none;
-    }
-  }
+.cp .hamburger {
+  display: none;
 }
 
-.citizen {
-  .right {
-    margin-top: 5px;
-    margin-bottom: 5px;
+@media (max-width: 780px) {
+  .cp .hamburger {
+    display: none;
   }
+}
 
-  .topbar-select-wrap {
-    margin-bottom: 0;
-  }
+.citizen .right {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
 
-  .flex-between {
-    @apply flex items-center justify-between;
-  }
+.citizen .topbar-select-wrap {
+  margin-bottom: 0;
+}
+
+.citizen .flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .profile-dropdown--item {
@@ -131,16 +198,19 @@
   padding: 10px;
   column-gap: 10px;
   color: #505a5f;
+}
 
-  &:hover {
-    background: #eeeeee;
-  }
+.profile-dropdown--item:hover {
+  background: #eeeeee;
 }
 
 .flex-right {
-  @apply flex items-center justify-end;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   min-width: 85px;
 }
+
 video::-webkit-media-controls-panel {
   top: 55%;
   position: absolute;

package/src/index.scss

@@ -125,7 +125,13 @@
 @import "./pages/common/sanctionFeeTable.scss";
 @import "./pages/citizen/loaderMessage.scss";
 @import "./pages/employee/disconnection.scss";
+@import "./pages/citizen/InboxCard.scss";
+@import "./pages/employee/header.scss";
+
 @import "./pages/common/pgrUICssfix.scss";
+@import "./components/newFooter.scss";
+@import "./pages/citizen/CitizenLogin.scss";
+@import "./components/NewAccordianCitizen.scss";
 
 .display-none {
   display: none;
@@ -639,7 +645,7 @@
     width: calc(100% - 219px);
     padding-left: 16px;
     padding-right: 16px;
-    margin-top: 1rem;
+    margin-top: 3rem;
   }
 }
 @media only screen and (max-width: 768px) {

package/src/pages/citizen/CitizenLogin.scss

@@ -0,0 +1,50 @@
+.newLoginlanguageWrapper {
+  width: 100%;
+  margin-bottom: 24px;
+}
+
+.newLoginlabel {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 25px;
+  color: #686677;
+  margin-bottom: 8px;
+}
+
+.newLoginrequired {
+  color: #ff1515;
+}
+
+.newLoginlanguageButtonContainer {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+
+/* Default button style */
+.newLoginlanguageButton {
+  flex: 1;
+  padding: 12px 20px;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  background-color: #ffffff;
+  color: #344054;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.newLogin2s ease;
+}
+
+/* Hover state */
+.newLoginlanguageButton:hover {
+  border-color: #98a2b3;
+  background-color: #f9fafb;
+}
+
+/* Selected button state */
+.newLoginselected {
+  border: 2px solid #5b68f0;
+  background-color: #f0f1ff;
+  color: #5b68f0;
+  font-weight: 600;
+}

package/src/pages/citizen/DocumentList.scss

@@ -6,6 +6,22 @@
     margin-top: 0.5em;
   }
 }
+.document-required-options{
+  display: flex;
+  .document-index{
+    min-width:20px;
+    text-align: right;
+    padding: 5px;
+  }
+  .document-description{
+    flex-grow:1;
+    word-break: break-word;
+    padding: 5px;
+    
+
+  }
+}
+
 .accordion-item {
   overflow: hidden;
   transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
@@ -281,7 +297,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
+.documentation-list{
+  display: flex;
+}
 .Docs_CardWrapper{
   @apply bg-white m-sm px-md pt-md pb-lg shadow-card;
   border-radius: 4px;
@@ -302,4 +320,130 @@
   .documentDetails_row_items{
     @apply grid grid-cols-2 gap-4;
   }
+}
+
+
+/* When there are no documents */
+.obps-document-detail-no-doc {
+  padding: 10px 0px;
+}
+
+/* Row (Label) */
+.obps-document-detail-row {
+  padding-top: 10px;
+  width: 100%;
+}
+
+/* Outer container for files */
+.obps-document-detail-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+/* Each document block */
+.obps-document-detail-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: center;
+}
+
+/* Clickable link */
+.obps-document-detail-link {
+  min-width: 100px;
+  max-width: 100px;
+  margin-right: 10px;
+  height: auto;
+  text-decoration: none;
+}
+
+/* SVG icon wrapper */
+.obps-document-detail-icon-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+/* Document Title */
+.obps-document-detail-title {
+  margin-top: 8px;
+  text-align: center;
+  color: #505a5f;
+  font-weight: 400;
+  line-height: 19px;
+  font-size: 16px;
+}
+
+/* Divider line */
+.obps-document-detail-divider {
+  color: #d6d5d4;
+  background-color: #d6d5d4;
+  height: 2px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: none;
+}
+
+.clu-doc-required-card {
+    background: #FAFAFA;
+    border: 1px solid #D6D5D4;
+    padding: 8px;
+    border-radius: 4px;
+    max-width: 600px;
+    min-width: 280px;
+    margin-bottom: 15px;
+    padding-top: 15px;
+}
+
+.clu-doc-required-wrapper {
+    margin-bottom: 24px;
+}
+
+.clu-doc-required-label {
+    width: 100%;
+}
+
+.clu-doc-required-field {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.clu-doc-required-coordinates {
+    padding: 10px;
+    font-size: 14px;
+}
+.clu-doc-view-container {
+    margin-top: 19px;
+}
+
+.clu-doc-view-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.clu-doc-view-link {
+    width: 120px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+}
+
+.clu-doc-view-pdf-icon {
+    background: #f6f6f6;
+    padding: 8px;
+}
+
+.clu-doc-view-label {
+    margin-top: 8px;
+    font-size: 12px;
+    word-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }

package/src/pages/citizen/HomePageWrapper.scss

@@ -1,6 +1,7 @@
 .HomePageWrapper {
   margin-top: -25px;
-
+  margin: 0 auto;
+  padding: 0 40px;
   .BannerWithSearch {
     margin-bottom: 40px;
     width: 100%;
@@ -15,6 +16,54 @@
       @apply w-full object-cover;
     }
   }
+.hero-banner-styles {
+  background: linear-gradient(135deg, #4f65d8 0%, #00157a 100%);
+  border-radius: 16px;
+  padding: 60px 40px;
+  margin: 24px 0;
+  text-align: center;
+  color: #fff;
+}
+
+.hero-title-styles {
+  font-size: 42px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  letter-spacing: -0.5px;
+}
+
+.heroSubtitleStyles {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: 32px;
+  opacity: 0.95;
+}
+
+.searchBarStyles {
+  max-width: 600px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.searchInputStyles {
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 16px;
+  margin-left: 12px;
+  color: black;
+}
+
+.searchIconStyles {
+  color: #9ca3af;
+  font-size: 20px;
+}
+
 
   .ServicesSection {
     @apply flex flex-wrap;
@@ -46,12 +95,12 @@
     }
   }
 
-  .WhatsAppBanner{
+  .WhatsAppBanner {
     width: 100%;
     padding: 0px 20px 0px 20px;
     margin: auto;
     cursor: pointer;
-    display:none;
+    display: none;
     img {
       width: 100%;
     }
@@ -75,6 +124,8 @@
 }
 
 .HomePageContainer {
+  width: 100%;
+  padding: 0;
   @media (min-width: 780px) {
     display: flex;
     width: 100% !important;
@@ -89,12 +140,11 @@
   margin-top: -25px;
   img {
     height: 33vw;
-    background: linear-gradient(#000000,#000000);
+    background: linear-gradient(#000000, #000000);
     @apply object-cover;
-    width:100vw;
+    width: 100vw;
   }
   h1 {
-    position: absolute;
     top: 100px;
     left: 21px;
     @apply text-heading-xl text-white font-bold;
@@ -103,9 +153,9 @@
     border: none;
     top: 76px;
     svg {
-      fill: #ffffff;
+      fill: #000000;
     }
-    @apply absolute text-white text-heading-s ml-md;
+    @apply text-black text-heading-s ml-md;
   }
 }
 
@@ -136,12 +186,11 @@
 
     .WhatsAppBanner {
       width: 100%;
-      img{
+      img {
         height: 20vw;
         width: 100%;
       }
     }
-
   }
   .moduleLinkHomePage {
     img {
@@ -160,6 +209,6 @@
 
   .moduleLinkHomePageModuleLinks {
     max-width: unset;
-    width:100%
+    width: 100%;
   }
-}
+}