@licklist/design 0.78.5-dev.88 → 0.78.5-dev.9

package/src/v2/components/Customer/CustomersList.scss

@@ -1,890 +0,0 @@
-.waivers-page {
-  padding: 0;
-  background-color: #FFFFFF;
-  min-height: 100vh;
-  font-family: var(--font-family-sans, 'Geist', sans-serif);
-
-
-  &__header {
-    display: none !important;
-  }
-
-  &__tabs-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0;
-
-    .new-tabs {
-      width: 100%;
-      margin-top: 0;
-    }
-  }
-
-  &__title-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
-  }
-
-  &__title {
-    font-size: 24px;
-    font-weight: 700;
-    color: #121E52;
-    margin: 0;
-  }
-
-  .kiosk-link {
-    display: inline-flex !important;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #121E52;
-    text-decoration: none;
-    visibility: visible !important;
-    opacity: 1 !important;
-    padding-right: 0;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    svg {
-      width: 30px;
-      height: 30px;
-      flex-shrink: 0;
-      fill: var(--shade-lighter);
-    }
-  }
-
-  &__tabs {
-    display: flex;
-    gap: 24px;
-    padding: 0;
-  }
-
-  &__tab {
-    position: relative;
-    padding: 12px 0;
-    background: none;
-    border: none;
-    font-size: 16px;
-    font-weight: 500;
-    color: #9399B3;
-    cursor: pointer;
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: #121E52;
-    }
-
-    &--active {
-      color: #121E52;
-      font-weight: 600;
-    }
-  }
-
-  &__tab-indicator {
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    width: 100%;
-    height: 3px;
-    background-color: #121E52;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: 16px 0 16px 0;
-  }
-
-  .filter-section {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-
-    .search-row {
-      width: 100%;
-    }
-
-    .search-input-wrapper {
-      width: 70%;
-
-      .new-form-input__icon {
-        color: var(--shade-lighter);
-      }
-    }
-
-    .search-helper-text {
-      margin-top: 8px;
-      margin-bottom: 0;
-      font-size: 15px;
-      font-weight: 400;
-      line-height: 20px;
-      color: var(--label-secondary, #626A90);
-      font-family: var(--font-family-sans, 'Geist', sans-serif);
-    }
-
-    .filters-actions-row {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 16px;
-      width: 100%;
-
-      @media (min-width: 1024px) {
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        gap: 24px;
-      }
-    }
-
-    .quick-filters-wrapper {
-      width: 100%;
-      flex: 1;
-    }
-
-    .action-buttons {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-
-      .ghost-button {
-        &__icon svg {
-          fill: var(--shade-lighter);
-        }
-      }
-    }
-
-    &__row {
-      display: flex;
-      gap: 24px;
-    }
-
-    &__col {
-      flex: 1;
-
-      &--date {
-        flex: 0 0 50%;
-        max-width: 50%;
-      }
-    }
-  }
-
-  // Cells styling (usually specific to the table in this page)
-  .entity-cell {
-    &__name {
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--label-primary);
-    }
-    &__sub {
-      font-size: 13px;
-      color: var(--label-secondary);
-      display: block !important;
-    }
-    &__id {
-      font-size: 13px;
-      color: var(--label-secondary);
-      display: none !important;
-    }
-
-    &:hover {
-      .entity-cell__id {
-        display: block !important;
-      }
-      .entity-cell__sub {
-        display: none !important;
-      }
-    }
-
-    // Ensure hover state on the row also triggers the same behavior
-    // This addresses potential flickering when moving between cells
-    :is(.new-table__row:hover) & {
-      .entity-cell__id {
-        display: block !important;
-      }
-      .entity-cell__sub {
-        display: none !important;
-      }
-    }
-
-    // When entity-cell__sub is missing (like in template list),
-    // showing entity-cell__id on hover causes height jump.
-    // We only want to swap if both exist, or ensure height is stable.
-    &:not(:has(.entity-cell__sub)) {
-      .entity-cell__id {
-        display: block !important;
-      }
-    }
-
-    :is(.new-table__row:hover) &:not(:has(.entity-cell__sub)) {
-      .entity-cell__id {
-        display: block !important;
-      }
-    }
-  }
-
-  .type-cell {
-    &__main {
-      font-weight: 500;
-      color: #121E52;
-    }
-    &__sub {
-      font-size: 13px;
-      color: #9399B3;
-    }
-  }
-
-  .date-cell {
-    &__next {
-      color: #121E52;
-    }
-    &__expires {
-      font-size: 13px;
-      color: #9399B3;
-
-      &--expired {
-        color: #EF4444;
-      }
-    }
-  }
-
-  .action-button {
-    background: #F0F0F5;
-    border: none;
-    border-radius: 50%;
-    width: 44px;
-    height: 44px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: #6200EE;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: #E0E0EB;
-    }
-
-    svg {
-      width: 30px;
-      height: 30px;
-    }
-  }
-
-  .new-page-header-container {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  &__pagination {
-    margin-top: 16px;
-    padding: 32px 0 32px 0;
-    border-top: 1px solid #E8E9EF;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 12px;
-
-    .pagination__nav {
-      background: none;
-      border: 1px solid #E0E1EA;
-      color: #121E52;
-      padding: 8px 12px;
-      border-radius: 6px;
-      font-size: 14px;
-      cursor: pointer;
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    .pagination__pages {
-      display: flex;
-      gap: 8px;
-    }
-
-    .pagination__page {
-      background: #F8F8FA;
-      border: 1px solid #E0E1EA;
-      color: #121E52;
-      width: 36px;
-      height: 36px;
-      border-radius: 6px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-
-      &--active {
-        background: #121E52;
-        color: #FFFFFF;
-        border-color: #121E52;
-      }
-    }
-
-    .pagination__ellipsis {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      color: #9399B3;
-      font-weight: 600;
-    }
-  }
-
-  .table-section {
-    background-color: #FFFFFF;
-    border-radius: 8px;
-    overflow: visible;
-    position: relative;
-
-    &--loading {
-      opacity: 0.7;
-      pointer-events: none;
-    }
-  }
-
-  .table-loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.3);
-    z-index: 10;
-  }
-
-  .table-loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid #E8E9EF;
-    border-top: 3px solid #121E52;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  .no-results-content {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    padding: 64px 24px;
-    background-color: #FFFFFF;
-    border-radius: 8px;
-    min-height: 200px;
-
-    .no-results-found {
-      font-size: 16px;
-      font-weight: 500;
-      color: #9399B3;
-    }
-  }
-
-  &__simple-header {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    width: 100%;
-  }
-
-  &__add-customer-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
-    background-color: #121E52;
-    color: #FFFFFF;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
-
-    &:hover {
-      background-color: #0f1940;
-    }
-  }
-}
-
-// Mobile styles
-@media (max-width: 768px) {
-  .waivers-page {
-    padding: 0;
-
-    &__header {
-      margin: 12px 0 16px;
-    }
-
-    &__tabs-container {
-      flex-direction: column;
-      gap: 16px;
-      align-items: flex-start;
-      padding: 0;
-    }
-
-    &__tabs {
-      width: 100%;
-      gap: 16px;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      padding: 0;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      scrollbar-width: none;
-    }
-
-    &__tab {
-      font-size: 14px;
-      padding: 8px 0;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-
-    .kiosk-link {
-      width: 100%;
-      justify-content: center;
-      padding: 12px;
-      background-color: #F8F8FA;
-      border-radius: 8px;
-      margin: 0 0 16px 0;
-      width: 100%;
-
-      svg {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    &__simple-header {
-      justify-content: center;
-    }
-
-    &__add-customer-btn {
-      width: 100%;
-      justify-content: center;
-      font-size: 14px;
-      padding: 10px 20px;
-    }
-
-    &__content {
-      gap: 20px;
-    }
-
-    .filter-section {
-      gap: 16px;
-
-      .search-row {
-        max-width: 100%;
-        width: 100%;
-      }
-
-      .search-input-wrapper {
-        max-width: 100%;
-        width: 100%;
-
-        .new-form-input__input-with-icon {
-          width: 100%;
-        }
-      }
-
-      .search-helper-text {
-        font-size: 13px;
-        margin-top: 4px;
-      }
-
-      .filters-actions-row {
-        flex-direction: column;
-        gap: 16px;
-        align-items: stretch;
-      }
-
-    .quick-filters-wrapper {
-      width: 100%;
-    }
-
-      .action-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        width: 100%;
-
-        .ghost-button {
-          flex: 1 0 calc(50% - 4px);
-          justify-content: center;
-
-          &:nth-child(2) {
-            order: -1;
-            flex: 1 0 100%;
-          }
-
-          &__text {
-            font-size: 11px;
-          }
-        }
-      }
-    }
-
-    &__pagination {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 12px;
-      margin-top: 12px;
-      padding: 24px 0 24px 0;
-
-      .pagination__nav {
-        padding: 6px 10px;
-        font-size: 12px;
-      }
-
-      .pagination__pages {
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        gap: 4px;
-      }
-
-      .pagination__page,
-      .pagination__ellipsis {
-        width: 32px;
-        height: 32px;
-        font-size: 12px;
-      }
-    }
-
-    .table-section {
-      overflow-x: visible;
-      overflow: visible;
-
-      .new-table {
-        display: block;
-        min-width: unset;
-
-        &__head {
-          display: none;
-        }
-
-        &__body {
-          display: block;
-        }
-
-        &__row {
-          display: grid;
-          grid-template-areas:
-            "customer bookings"
-            "next last"
-            "divider divider"
-            "status actions";
-
-          :is(.waivers-page--compact) & {
-            grid-template-areas:
-              "customer customer"
-              "divider divider"
-              "status actions";
-          }
-          border: 1px solid var(--border-primary, #E8E9EF);
-          border-radius: 12px;
-          margin-bottom: 16px;
-          padding: 16px;
-          gap: 12px;
-          background: #FFFFFF;
-          position: relative;
-          overflow: visible;
-
-          &::after {
-            content: "";
-            grid-area: divider;
-            height: 1px;
-            background-color: #E8E9EF;
-            margin: 4px 0;
-          }
-        }
-
-        &__cell {
-          display: block;
-          padding: 0;
-          border: none;
-          min-width: 0;
-          overflow: visible;
-
-          &.tw-text-right {
-            grid-area: actions;
-            text-align: right;
-            padding: 0;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-
-            :is(.waivers-page--compact) & {
-              padding-top: 0;
-              border-top: none;
-              margin-top: 0;
-            }
-
-            &.waiver-col {
-              grid-area: status;
-              justify-content: flex-start;
-              border-top: none;
-              padding-top: 0;
-              margin-top: 0;
-            }
-          }
-
-          &:first-child {
-            grid-area: customer;
-          }
-
-          &.age-col {
-            display: none;
-          }
-
-          &.next-booking-col {
-            grid-area: next;
-          }
-
-          &.last-booking-col {
-            grid-area: last;
-          }
-
-          &.no-of-bookings-col {
-            grid-area: bookings;
-            text-align: right;
-          }
-
-          &.waiver-col {
-            grid-area: last; // Reuse 'last' area for waiver in waiver list
-            text-align: right;
-          }
-          &.waiver-col-mb {
-            grid-area: status;
-            text-align: left;
-          }
-        }
-      }
-    }
-
-    .age-cell {
-      text-align: right;
-      min-width: 0;
-      overflow: hidden;
-      &__label {
-        font-size: 13px;
-        color: #626A90;
-        font-weight: 500;
-        margin-bottom: 2px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      &__value {
-        font-size: 14px;
-        color: #121E52;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .bookings-cell {
-      text-align: right;
-      min-width: 0;
-      overflow: hidden;
-      &__label {
-        font-size: 13px;
-        color: #626A90;
-        font-weight: 500;
-        margin-bottom: 2px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      &__value {
-        font-size: 14px;
-        color: #121E52;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .booking-cell {
-      min-width: 0;
-      overflow: hidden;
-      &__label {
-        font-size: 13px;
-        color: #626A90;
-        font-weight: 500;
-        margin-bottom: 4px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      &__value {
-        font-size: 14px;
-        color: #121E52;
-        font-weight: 400;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .waiver-cell {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      min-width: 0;
-      overflow: hidden;
-
-      &__label {
-        font-size: 13px;
-        color: #626A90;
-        font-weight: 500;
-        margin-bottom: 4px;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-      }
-
-      .v2-badge {
-        display: inline-flex;
-        margin-right: auto;
-      }
-    }
-
-    .customer-cell {
-      min-width: 0;
-      overflow: hidden;
-
-      &__name {
-        font-size: 16px;
-        font-weight: 700;
-        margin-bottom: 2px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      &__email,
-      &__id {
-        font-size: 14px;
-        color: #626A90;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .type-cell {
-      &__main {
-        font-size: 14px;
-      }
-
-      &__sub {
-        font-size: 12px;
-      }
-    }
-
-    .date-cell {
-      &__next {
-        font-size: 14px;
-      }
-
-      &__expires {
-        font-size: 12px;
-      }
-    }
-
-    .action-button {
-      width: 36px;
-      height: 36px;
-
-      svg {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-}
-
-// Extra small mobile devices
-@media (max-width: 480px) {
-  .waivers-page {
-    padding: 0;
-
-    &__header {
-      margin: 8px 0 12px;
-    }
-
-    &__tabs {
-      gap: 12px;
-      padding: 0;
-    }
-
-    &__tab {
-      font-size: 13px;
-    }
-
-    &__add-customer-btn {
-      font-size: 13px;
-      padding: 8px 16px;
-    }
-
-    .filter-section {
-      .action-buttons {
-        flex-direction: row;
-        width: 100%;
-      }
-
-      .action-btn {
-        width: 100%;
-        justify-content: center;
-
-        .v2-button__content {
-          width: 100%;
-          justify-content: center;
-        }
-      }
-    }
-
-    .customer-cell {
-      &__name {
-        font-size: 13px;
-      }
-    }
-
-    &__content {
-      padding: 0 12px 12px;
-    }
-
-    &__tabs-container {
-      margin-left: 12px;
-      margin-right: 12px;
-    }
-  }
-}
-