@pmidc/upyog-css 1.1.9 → 1.1.11

package/src/components/card.scss

@@ -1,17 +1,15 @@
 
 
 .card {
-  background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
-  margin: 8px;
   padding: 20px 24px 28px 24px;
   max-width: 95vw;
   width: 100%;
   border-radius: 14px;
-  border: 1px solid #e1e8f0;
   box-shadow: 0 12px 32px rgba(30, 58, 138, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: visible;
+  margin-bottom: 15px;
 
 
   .card-header {
@@ -32,6 +30,7 @@
     color: #1e293b;
     text-align: left;
     margin-bottom: 8px;
+    margin-top: 20px;
     text-transform: uppercase;
     letter-spacing: 0.4px;
   }
@@ -69,12 +68,13 @@
   }
 
   .card-label {
-    font-size: 12px;
+    font-size: 16px;
     color: #0f172a;
     margin-bottom: 8px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    width: 100%;
   }
 
   .card-label-error {
@@ -94,25 +94,7 @@
     letter-spacing: 0.3px;
   }
 
-  .card-link {
-    display: inline-block;
-    text-align: center;
-    color: #2563eb;
-    margin-top: 16px;
-    cursor: pointer;
-    font-weight: 700;
-    font-size: 13px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    background: rgba(37, 99, 235, 0.08);
-    transition: all 0.2s ease;
-    text-decoration: none;
 
-    &:hover {
-      background: rgba(37, 99, 235, 0.16);
-      transform: translateX(2px);
-    }
-  }
 }
 
 .validation-error {
@@ -207,7 +189,7 @@
   }
 
   .card-label {
-    font-size: 12px;
+    font-size: 16px;
     color: #0f172a;
     margin-bottom: 8px;
     font-weight: 700;
@@ -232,25 +214,7 @@
     letter-spacing: 0.3px;
   }
 
-  .card-link {
-    display: inline-block;
-    text-align: left;
-    color: #2563eb;
-    margin-top: 12px;
-    cursor: pointer;
-    font-weight: 700;
-    font-size: 13px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    background: rgba(37, 99, 235, 0.08);
-    transition: all 0.2s ease;
-    text-decoration: none;
 
-    &:hover {
-      background: rgba(37, 99, 235, 0.16);
-      transform: translateX(2px);
-    }
-  }
 
   .card-search-heading {
     margin-right: 0px !important;
@@ -287,7 +251,39 @@
   border: 1px solid #e1e8f0;
 }
 
-.submit-bar {
+.card-link{
+   height: 40px;
+  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+  color: white;
+  text-align: center;
+  outline: none;
+  width: 175px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 700;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  header {
+    font-weight: 600;
+    font-size: 12px;
+    color: white;
+    line-height: 40px;
+  }
+}
+
+.submit-bar, .bpa-owner-submit-back {
   height: 40px;
   background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
   color: white;
@@ -343,6 +339,56 @@
   }
 }
 
+.submit-bar-back {
+  background: transparent !important;
+  color: #2563eb !important;
+  border: 1px solid #2563eb !important;
+  box-shadow: none !important;
+  margin-right: 10px;
+
+  &:hover {
+    background: rgba(37, 99, 235, 0.08) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
+  }
+}
+
+/* LinkButton styled as SubmitBar */
+.card-link.submit-bar,
+button.card-link.submit-bar {
+  height: 40px !important;
+  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
+  color: white !important;
+  text-align: center !important;
+  outline: none !important;
+  width: 175px !important;
+  border-radius: 8px !important;
+  border: none !important;
+  font-weight: 700 !important;
+  font-size: 13px !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24) !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 0 16px !important;
+  margin: 0 !important;
+  text-decoration: none !important;
+
+  &:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32) !important;
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
+    color: white !important;
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+}
+
+
 @media (min-width: 1024px) {
   .submit-bar,
   .submit-bar-disabled {
@@ -372,9 +418,7 @@
       font-size: 16px;
     }
 
-    .card-link {
-      text-align: left;
-    }
+
   }
 
   .employeeCard {
@@ -431,9 +475,6 @@
       font-size: 16px;
     }
 
-    .card-link {
-      text-align: left;
-    }
 
     .label-field-pair {
       display: flex;

package/src/components/custombtn.scss

@@ -1,5 +1,5 @@
 .customBtn {
-  @apply bg-white text-text-primary  box-border inline-block outline-none px-sm border border-solid border-primary-main;
+  @apply bg-white box-border inline-block outline-none px-sm border border-solid border-primary-main;
   margin: 0px 4.65% 0px 0px;
   height: 30px;
   line-height: 30px;

package/src/components/multiLink.scss

@@ -5,7 +5,7 @@
 
 .multilink-link-button{
     margin: 0;
-    @apply text-heading-s text-primary-light
+    @apply text-heading-s
 }
 
 .multilink-optionWrap{

package/src/components/navbar.scss

@@ -27,6 +27,45 @@
   }
 }
 
+.notification-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .notification-count {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #ef4444;
+    color: white;
+    font-size: 10px;
+    font-weight: 600;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+  }
+
+  svg {
+    width: 22px;
+    height: 22px;
+        background: #ffdc00;
+    border-radius: 50%;
+  }
+}
+
 .img-circle {
   border-radius: 50%;
 }

package/src/components/selectdropdown.scss

@@ -24,7 +24,7 @@
 .employee-select-wrap .select {
   background-color: white;
   border-radius: 5px;
-  border-color:1px solid blue;
+  border-color: 1px solid blue;
   height: 50px;
 }
 .employee-select-wrap {
@@ -36,12 +36,11 @@
     border-color: rgb(46, 46, 236);
     height: 50px;
 
-
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
-     
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {
@@ -70,8 +69,8 @@
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
-     
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {
@@ -97,12 +96,13 @@
   }
 
   .options-card {
-    width: 100% !important;
+    right: 0px;
+    width: 144px;
     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
     max-height: 250px !important;
     overflow: auto;
     z-index: 1000 !important;
-    @apply absolute z-20 mt-xs bg-white max-w-full;
+    @apply absolute z-20 mt-xs bg-white;
 
     p {
       padding-top: 14px;
@@ -156,7 +156,7 @@
       width: calc(100% - 32px);
       background-color: transparent;
 
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {
@@ -194,8 +194,8 @@
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
-    
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {

package/src/components/textfields.scss

@@ -37,6 +37,8 @@
   background: #eeeeee;
   border-right: 0;
   padding-right: 5px;
+  position: relative;
+  z-index: 0 !important;
 }
 .employee-card-input-error {
   @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
@@ -117,3 +119,20 @@
     box-shadow: 0 0 0 3px rgba(13, 78, 255, 0.03);
   }
 }
+
+/* Mobile Number Input Styles */
+.mobile-number-prefix {
+  position: absolute;
+  left: 12px;
+  top: 34%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  font-weight: 500;
+  color: #666;
+  pointer-events: none;
+  z-index: 0 !important;
+}
+
+.mobile-number-input-with-prefix {
+  padding-left: 45px !important;
+}

package/src/index.scss

@@ -134,6 +134,8 @@
 @import "./pages/citizen/CitizenLogin.scss";
 @import "./components/NewAccordianCitizen.scss";
 @import "./modules/rentAndLease/index.scss";
+@import "./components/SurveyModal.scss";
+
 
 @import "./modules/adv/index.scss";
 .display-none {

package/src/modules/rentAndLease/index.scss

@@ -169,8 +169,9 @@
 }
 
 .ral-app-details-docs-card {
-  display: flex;
-  flex-wrap: wrap;
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
   gap: 30px;
   margin-bottom: 26px;
 }

package/src/pages/citizen/InboxCard.scss

@@ -159,10 +159,7 @@
 }
 
 .bpa-newbuilding-bpa-section {
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  padding-bottom: 50px;
+
 }
 .bpa-newbuilding-label-field-pair {
   display: flex;
@@ -212,116 +209,170 @@
 }
 
 .bpa-owner-error-message {
-  color: red;
+  color: #dc2626;
   font-size: 12px;
-  margin-top: 4px;
+  margin-top: 6px;
+  font-weight: 500;
 }
+
 .bpa-owner-delete-icon {
   position: relative;
-  bottom: 5px;
+  bottom: 0;
 }
+
 .bpa-owner-link-delete-button {
-  width: 50px;
+  width: 40px;
+  height: 40px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  background: black;
+  background: #fee2e2;
+  border-radius: 8px;
   float: right;
+  margin-top: -10px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #fecaca;
+  }
 }
-.bpa-owner-owner-card {
-  border: 1px solid;
-  border-radius: 5px;
-  padding: 10px;
-  padding-top: 20px;
-  margin-top: 10px;
-  border-color: #f3f3f3;
-  background: #fafafa;
-}
+
+
+
 .bpa-owner-cardlabel-negative-margin {
-  margin-bottom: -15px;
+  margin-bottom: 8px;
 }
+
 .bpa-owner-mobile-row {
-  margin-top: 30px;
+  margin-top: 8px;
+  margin-bottom: 16px;
 }
-.bpa-owner-country-prefix {
-  margin-bottom: 24px;
-  padding: 3px 2px;
-  border: 1px solid #b4b4b4;
-  border-radius: 8px 0 0 8px;
-  display: inline-block;
-}
-.bpa-owner-phone-input {
-  background: #fafafa;
-  padding: 0 4px;
-  border-radius: 0 8px 8px 0;
-  width: 96%;
+
+.bpa-owner-field-container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  
+  .field-container {
+    margin-bottom: 0;
+  }
+  
+  .text-input input {
+    padding-right: 44px !important;
+  }
 }
+
 .bpa-owner-search-icon-container {
-  position: relative;
-  z-index: 100;
-  right: 44px;
-  margin-top: -24px;
-  margin-right: -20px;
+  position: absolute;
+  right: 12px;
+  top: 36%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+  z-index: 2;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: #2563eb;
+  }
+
+  &:hover svg {
+    fill: #1e40af;
+  }
 }
+
 .bpa-owner-cardlabel-margin-top {
-  margin-top: 30px;
+  margin-top: 20px;
 }
+
 .bpa-owner-upload-row {
   display: flex;
-  gap: 15px;
+  gap: 16px;
   flex-direction: row;
+  align-items: flex-start;
 }
+
 @media (max-width: 768px) {
-  .upload-row {
+  .bpa-owner-upload-row {
     flex-direction: column;
   }
+  
+  .bpa-owner-field-container {
+    max-width: 100%;
+  }
 }
+
 .bpa-owner-input-bg-fa {
   background: #fafafa;
+  border-radius: 8px;
 }
+
 .bpa-owner-owner-textarea {
   background: #fafafa;
   width: 100%;
   min-height: 80px;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
   resize: vertical;
+  font-size: 14px;
+
+  &:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+  }
 }
+
 .bpa-owner-checkbox-top {
-  padding-top: 10px;
+  padding-top: 16px;
 }
+
 .bpa-owner-add-owner-row {
   display: flex;
-  padding-bottom: 15px;
-  color: #ff8c00;
+  padding: 16px 0;
 }
+
 .bpa-owner-add-owner-button {
-  padding-top: 10px;
+  padding: 10px 20px;
   background: transparent;
-  border: none;
-  color: inherit;
+  border: 2px dashed #2563eb;
+  border-radius: 8px;
+  color: #2563eb;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(37, 99, 235, 0.05);
+    border-style: solid;
+  }
 }
+
 .bpa-owner-submit-back {
-  border: 1px solid;
-  background: transparent;
-  color: #2947a3;
-  margin-right: 5px;
+  margin-right: 12px;
 }
+
 .bpa-owner-label-field-pair {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px dashed #e0e0e0;
-  padding: 0.5rem 0;
-  color: #333;
+  border-bottom: 1px dashed #e5e7eb;
+  padding: 12px 0;
+  color: #374151;
 }
+
 .bpa-owner-bold-label {
-  font-weight: 700;
-  color: #555;
+  font-weight: 600;
+  color: #4b5563;
 }
+
 .bpa-owner-newbuilding-error-message {
-  color: red;
-  margin-top: 4px;
-  font-size: 0.9rem;
+  color: #dc2626;
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 500;
 }