@chipstcp/upyog-css 1.0.0

package/src/components/SurveyModal.scss

@@ -0,0 +1,195 @@
+.survey-modal-wrapper {
+  padding: 0;
+  background-color: #f9fafb;
+}
+
+.survey-modal-loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+/* Cards Container */
+.survey-cards-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
+  padding: 24px;
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}
+
+/* Individual Survey Card */
+.survey-card {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid #e5e7eb;
+}
+
+.survey-card:hover {
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.15);
+  transform: translateY(-4px);
+  border-color: #2563eb;
+}
+
+/* Card Header */
+.survey-card-header {
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  padding: 16px 20px;
+  color: white;
+  border-bottom: 3px solid #1d4ed8;
+}
+
+.survey-card-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+/* Card Content */
+.survey-card-content {
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.survey-card-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.survey-card-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.survey-card-value {
+  font-size: 14px;
+  color: #1f2937;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* Card Footer */
+.survey-card-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+.survey-card-footer button {
+  width: 100%;
+}
+
+/* Empty State */
+.survey-modal-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  padding: 40px 20px;
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}
+
+.survey-modal-empty-state-text {
+  margin: 0;
+  text-align: center;
+  color: #6b7280;
+  line-height: 1.6;
+}
+
+.survey-modal-empty-state-text:first-child {
+  font-size: 16px;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .survey-cards-container {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .survey-card {
+    border-radius: 8px;
+  }
+
+  .survey-card-title {
+    font-size: 15px;
+  }
+
+  .survey-card-content {
+    padding: 16px;
+    gap: 12px;
+  }
+
+  .survey-card-footer {
+    padding: 12px 16px;
+  }
+
+  .survey-card-label {
+    font-size: 11px;
+  }
+
+  .survey-card-value {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .survey-cards-container {
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .survey-card-header {
+    padding: 12px 16px;
+  }
+
+  .survey-card-content {
+    padding: 12px 16px;
+  }
+
+  .survey-card-footer {
+    padding: 10px 16px;
+  }
+}
+
+/* Animation */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.survey-card {
+  animation: slideIn 0.3s ease-out;
+}
+
+/* Loading State */
+.survey-modal-loader {
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}

package/src/components/TimeLine.scss

@@ -0,0 +1,96 @@
+.timeline-container {
+  @apply flex;
+  margin: 0px 8px 15px;
+  .timeline-checkpoint {
+    @apply relative flex-1;
+    z-index: 1;
+  }
+
+  .timeline-content {
+    @apply flex flex-col items-center;
+
+    span {
+      text-align: center;
+      color: white;
+    }
+
+    .secondary-color {
+      color: #2947A3;
+      padding: 5px;
+      font-size: small;
+    }
+  }
+
+  .line {
+    @apply absolute;
+    top: 12px;
+    left: calc(50% + 8px);
+    right: calc(-50% + 8px);
+    border-top: 4px solid #D6D5D4;
+    z-index: -1;
+  }
+
+  .circle {
+    width: 24px;
+    height: 24px;
+    background-color: #B1B4B6;
+    border-radius: 50%;
+    text-align: center;
+  }
+
+  .active {
+    background-color: #1359C8;
+    border-color: #1359C8;
+  }
+} 
+
+.TLComments{
+  max-width: 360px;
+  @apply mb-sm p-sm bg-grey-light;
+  h3{
+    @apply font-bold text-caption-m;
+  }
+  p{
+    @apply text-body-l;
+  }
+}
+
+@screen dt{
+  .TLComments{
+    width: 360px;
+    h3{
+      @apply text-caption-m-dt;
+    }
+    p{
+      @apply text-body-l-dt;
+    }
+  }
+}
+
+
+
+.obps-timeline-header {
+  margin-bottom: 16px;
+  margin-top: 32px;
+}
+
+.obps-timeline-action-bar {
+  padding: 12px 0;
+}
+
+.obps-timeline-submit-feedback {
+  margin-top: 16px;
+}
+
+.obps-timeline-toggle {
+  margin-top: 12px;
+  font-weight: 600;
+}
+.obps-timeline-table .obps-timeline-cell {
+  padding: 20px 18px;
+  font-size: 16px;
+}
+
+.obps-timeline-table .obps-timeline-large-cell {
+  min-width: 240px;
+}

package/src/components/WhatsNewCard.scss

@@ -0,0 +1,13 @@
+.WhatsNewCard{
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+    @apply rounded bg-white border-primary-main border-l-4 border-solid p-sm;
+    h2{
+        @apply text-body-l text-text-primary font-medium mb-xs;
+    }
+    p{
+        @apply text-form-field text-text-secondary mb-sm;
+    }
+    a{
+        @apply block text-form-field text-primary-main mb-sm
+    }
+}

package/src/components/actionLink.scss

@@ -0,0 +1,3 @@
+.action-link {
+  @apply text-primary-main text-text-btn mr-lg !important;
+}

package/src/components/actionbar.scss

@@ -0,0 +1,100 @@
+.action-bar-wrap {
+  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+  z-index: 100;
+  height: 75px;
+  
+  @apply left-0 bottom-0 w-full bg-white py-lg px-xxl fixed text-right;
+
+  div {
+    @apply w-full;
+  }
+  .menu-wrap {
+    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
+    bottom: 45px;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+    width: auto;
+    min-width: 200px;
+    max-width: calc(100% - 16px);
+    padding: 2px;
+    right: 8px;
+  
+    div {
+      @apply h-12 pl-sm py-md text-body-l text-text-primary;
+  
+      &:hover {
+        @apply bg-grey-mid w-full;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .action-bar-wrap {
+    box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+    left: 0;
+    max-width: none;
+    z-index: 999;
+
+    @apply fixed bottom-0 bg-white py-lg pr-lg text-right;
+
+    div {
+      width: calc(100% - 16px);
+    }
+
+    .menu-wrap {
+      bottom: 45px;
+      top: unset;
+      box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+      @apply absolute h-auto bg-white text-left mb-xs z-30;
+      width: 240px;
+      right: 24px;
+  
+      div {
+        @apply h-12 pl-sm py-md text-body-l text-text-primary;
+  
+        &:hover {
+          @apply bg-grey-mid w-full;
+        }
+      }
+    }
+  }
+}
+
+.action-bar-wrap-registry {
+
+  div {
+    @apply w-full;
+  }
+  .menu-wrap {
+    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+    width: 160px;
+    right: 60px;
+  
+    div {
+      @apply h-12 pl-sm py-md text-body-l text-text-primary;
+  
+      &:hover {
+        @apply bg-grey-mid w-full;
+      }
+    }
+  }
+
+  .search-add {
+    padding: 12px 16px;
+    color: rgb(244, 119, 56);
+    display: flex;
+    cursor: pointer;
+  }
+
+  .search-add-icon {
+    background: rgb(244, 119, 56);
+    border-radius: 50%;
+    height: 24px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+  }
+}

package/src/components/bannercomponents.scss

@@ -0,0 +1,137 @@
+.success-wrap,
+.emp-success-wrap {
+  @apply block bg-success w-full text-center text-white pt-md pb-sm mb-md;
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  div {
+    img {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg.payment-svg {
+      border: unset;
+      background-color: unset;
+      @apply rounded-full;
+    }
+
+    h2 {
+      @apply font-bold text-caption-m mb-sm;
+    }
+
+    p {
+      @apply font-bold text-caption-l;
+    }
+  }
+}
+
+.error-wrap,
+.emp-error-wrap {
+  @apply block bg-error w-full text-center text-white pt-md pb-sm mb-md;
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  img {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+
+  svg {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+}
+
+@screen dt {
+  .success-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+  .emp-success-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .error-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .emp-error-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+}
+
+.photos-wrap {
+  max-width: 640px;
+  @apply flex pt-md;
+
+  img {
+    width: calc(33% - 9.333px);
+    margin-right: 14px;
+  }
+
+  svg {
+    width: calc(33% - 9.333px);
+    margin-right: 14px;
+  }
+
+  .last {
+    width: calc(33% - 9.333px);
+  }
+}
+
+.banner {
+  @apply flex justify-center items-center;
+  height: calc(100vh - 80px);
+  position: relative;
+
+  .bannerCard {
+    min-width: 400px;
+  }
+  .bannerLogo {
+    width: 80px;
+    height: 40px;
+    object-fit: contain;
+    padding-right: 10px;
+    margin-right: 10px;
+    border-right: 1px solid #0b0c0c;
+  }
+  .bannerHeader {
+    @apply flex justify-center items-center;
+    margin-bottom: 24px;
+  }
+}
+
+.banner-container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center !important;
+}