@licklist/design 0.78.5-dev.58 → 0.78.5-dev.59

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

@@ -1,15 +1,12 @@
 .waivers-page {
-  padding: 24px;
+  padding: 0;
   background-color: #FFFFFF;
   min-height: 100vh;
   font-family: var(--font-family-sans, 'Geist', sans-serif);
 
 
   &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 20px 0 20px;
+    display: none !important;
   }
 
   &__tabs-container {
@@ -17,7 +14,10 @@
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #E8E9EF;
-    width: 100%;
+    margin-bottom: 32px;
+    margin-left: 32px;
+    margin-right: 32px;
+    padding: 0;
   }
 
   &__title-row {
@@ -44,6 +44,7 @@
     text-decoration: none;
     visibility: visible !important;
     opacity: 1 !important;
+    padding-right: 0;
 
     &:hover {
       text-decoration: none;
@@ -59,6 +60,7 @@
   &__tabs {
     display: flex;
     gap: 24px;
+    padding: 0;
   }
 
   &__tab {
@@ -95,6 +97,7 @@
     display: flex;
     flex-direction: column;
     gap: 32px;
+    padding: 0 32px 32px;
   }
 
   .filter-section {
@@ -134,47 +137,10 @@
 
     .action-buttons {
       display: flex;
-      gap: 16px;
+      gap: 12px;
       align-items: center;
     }
 
-    .action-btn {
-      padding: 0 16px;
-      border: 1px solid var(--border-primary, #E8E9EF);
-      background: #FFFFFF;
-      transition: all 0.2s ease;
-      height: 44px;
-      border-radius: 8px;
-
-      &--secondary-soft {
-        background: var(--surface-action-soft, #EFE6FD);
-        border: none;
-      }
-
-      &--tertiary-soft {
-        background: #FFFFFF;
-        border: 1px solid var(--border-primary, #E8E9EF);
-      }
-
-      &:hover {
-        background-color: var(--surface-tertiary, #F0F0F5);
-        border-color: var(--border-primary, #E8E9EF);
-      }
-
-      .new-button__text {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: 14px;
-        font-weight: 500;
-        color: #121E52;
-      }
-
-      svg {
-        width: 32px;
-        height: 32px;
-        flex-shrink: 0;
-      }
-    }
-
     &__row {
       display: flex;
       gap: 24px;
@@ -191,12 +157,12 @@
   }
 
   // Cells styling (usually specific to the table in this page)
-  .customer-cell {
+  .entity-cell {
     &__name {
       font-weight: 600;
       color: #121E52;
     }
-    &__email {
+    &__sub {
       font-size: 13px;
       color: #9399B3;
     }
@@ -207,10 +173,10 @@
     }
 
     &:hover {
-      .customer-cell__id {
+      .entity-cell__id {
         display: block;
       }
-      .customer-cell__email {
+      .entity-cell__sub {
         display: none;
       }
     }
@@ -325,7 +291,7 @@
   .table-section {
     background-color: #FFFFFF;
     border-radius: 8px;
-    overflow: hidden;
+    overflow: visible;
     position: relative;
 
     &--loading {
@@ -408,7 +374,7 @@
 // Mobile styles
 @media (max-width: 768px) {
   .waivers-page {
-    padding: 16px;
+    padding: 0;
 
     &__header {
       margin: 12px 0 16px;
@@ -418,6 +384,9 @@
       flex-direction: column;
       gap: 16px;
       align-items: flex-start;
+      margin-left: 16px;
+      margin-right: 16px;
+      padding: 0;
     }
 
     &__tabs {
@@ -425,6 +394,7 @@
       gap: 16px;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
+      padding: 0;
 
       &::-webkit-scrollbar {
         display: none;
@@ -446,6 +416,8 @@
       padding: 12px;
       background-color: #F8F8FA;
       border-radius: 8px;
+      margin: 0 0 16px 0;
+      width: 100%;
 
       svg {
         width: 24px;
@@ -466,6 +438,7 @@
 
     &__content {
       gap: 20px;
+      padding: 0 16px 16px;
     }
 
     .filter-section {
@@ -498,75 +471,26 @@
 
     .quick-filters-wrapper {
       width: 100%;
-
-      .quick-filter {
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-
-        &__label {
-          font-size: 11px;
-        }
-
-        &__options {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 6px;
-        }
-
-        &__option {
-          padding: 2px 8px;
-          font-size: 11px;
-        }
-      }
     }
 
       .action-buttons {
         display: flex;
-        justify-content: space-between;
+        flex-wrap: wrap;
         gap: 8px;
         width: 100%;
-        flex-wrap: wrap;
-      }
-
-      .action-btn {
-        flex: 1 0 calc(50% - 4px);
-        min-width: 0;
-        justify-content: center;
-        border: 1px solid #E8E9EF;
-        background: #FFFFFF;
-        height: 44px;
-        padding: 0 4px;
-        border-radius: 8px;
-        gap: 4px;
 
-        &--secondary-soft {
-          background: var(--surface-action-soft, #EFE6FD);
-          border: none;
-        }
-
-        &--tertiary-soft {
-          background: #FFFFFF;
-          border: 1px solid #E8E9EF;
-        }
-
-        &:hover {
-          background-color: var(--surface-tertiary, #F0F0F5);
-        }
+        .ghost-button {
+          flex: 1 0 calc(50% - 4px);
+          justify-content: center;
 
-        .new-button__text {
-          font-family: var(--font-family-sans, 'Geist', sans-serif);
-          font-size: 11px;
-          font-weight: 600;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+          &:nth-child(2) {
+            order: -1;
+            flex: 1 0 100%;
+          }
 
-        svg {
-          width: 32px;
-          height: 32px;
-          flex-shrink: 0;
+          &__text {
+            font-size: 11px;
+          }
         }
       }
     }
@@ -615,7 +539,7 @@
         &__row {
           display: grid;
           grid-template-areas:
-            "customer age"
+            "customer bookings"
             "divider divider"
             "next last"
             "actions actions";
@@ -660,8 +584,7 @@
           }
 
           &.age-col {
-            grid-area: age;
-            text-align: right;
+            display: none;
           }
 
           &.next-booking-col {
@@ -673,7 +596,8 @@
           }
 
           &.no-of-bookings-col {
-            display: none;
+            grid-area: bookings;
+            text-align: right;
           }
 
           &.waiver-col {
@@ -707,6 +631,29 @@
       }
     }
 
+    .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;
@@ -812,7 +759,7 @@
 // Extra small mobile devices
 @media (max-width: 480px) {
   .waivers-page {
-    padding: 12px;
+    padding: 0;
 
     &__header {
       margin: 8px 0 12px;
@@ -820,6 +767,7 @@
 
     &__tabs {
       gap: 12px;
+      padding: 0;
     }
 
     &__tab {
@@ -853,6 +801,15 @@
         font-size: 13px;
       }
     }
+
+    &__content {
+      padding: 0 12px 12px;
+    }
+
+    &__tabs-container {
+      margin-left: 12px;
+      margin-right: 12px;
+    }
   }
 }
 

package/src/v2/components/FormField/FormField.tsx

@@ -9,27 +9,25 @@ export interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
-  ({ label, error, helpText, required, className = '', ...props }, ref) => {
-    return (
-      <div className={`form-field ${className}`}>
-        {label && (
-          <label className="form-field__label">
-            {label}
-            {required && <span className="form-field__required">*</span>}
-          </label>
-        )}
-        <input
-          ref={ref}
-          className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
-          {...props}
-        />
-        {helpText && !error && (
-          <span className="form-field__help-text">{helpText}</span>
-        )}
-        {error && <span className="form-field__error-text">{error}</span>}
-      </div>
-    )
-  }
+  ({ label, error, helpText, required, className = '', ...props }, ref) => (
+    <div className={`form-field ${className}`}>
+      {label && (
+        <label className="form-field__label">
+          {label}
+          {required && <span className="form-field__required">*</span>}
+        </label>
+      )}
+      <input
+        ref={ref}
+        className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
+        {...props}
+      />
+      {helpText && !error && (
+        <span className="form-field__help-text">{helpText}</span>
+      )}
+      {error && <span className="form-field__error-text">{error}</span>}
+    </div>
+  )
 )
 
 FormField.displayName = 'FormField'

package/src/v2/components/Modal/DeleteModal.tsx

@@ -48,8 +48,8 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
   if (!isOpen) return null
 
   return (
-    <div className="delete-modal-overlay" onClick={handleClose}>
-      <div className="delete-modal" onClick={(e) => e.stopPropagation()}>
+    <div className="delete-modal-overlay" role="presentation" onClick={handleClose}>
+      <div className="delete-modal" role="presentation" onClick={(e) => e.stopPropagation()}>
         <div className="delete-modal__content">
           <h2 className="delete-modal__title">{title}</h2>
 
@@ -78,6 +78,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
 
           <div className="delete-modal__actions">
             <button
+              type="button"
               className="delete-modal__button delete-modal__button--delete"
               onClick={handleConfirm}
               disabled={isConfirmDisabled}
@@ -85,6 +86,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
               {isDeleting ? 'Deleting...' : 'Delete'}
             </button>
             <button
+              type="button"
               className="delete-modal__button delete-modal__button--cancel"
               onClick={handleClose}
               disabled={isDeleting}

package/src/v2/components/NewInput/NewInput.tsx

@@ -62,7 +62,19 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
               ref={inputRef}
               {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
             />
-            <div className="icon" onClick={handleIconClick} style={{ cursor: (onIconClick || (props as any).type === 'date') ? 'pointer' : 'default' }}>
+            <div
+              className="icon"
+              role="button"
+              tabIndex={0}
+              onClick={handleIconClick}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleIconClick();
+                }
+              }}
+              style={{ cursor: (onIconClick || (props as any).type === 'date') ? 'pointer' : 'default' }}
+            >
               {icon}
             </div>
           </div>

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -2,13 +2,17 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 14px;
+    gap: 0;
     align-self: stretch;
-    padding: 32px 32px 0 32px;
+    padding: 32px 32px 0px 32px;
 
     @media (max-width: 768px) {
-        padding: 16px 16px 0 16px;
-        gap: 10px;
+        padding: 16px 16px 0px 16px;
+        gap: 0;
+    }
+
+    @media (max-width: 480px) {
+        padding: 16px 12px 0px 12px;
     }
 }
 
@@ -49,5 +53,4 @@
     height: 1px;
     border: none;
     background-color: var(--border-primary, #e8e9ef);
-    margin: 0;
 }

package/src/v2/components/NewPageHeader/NewPageHeader.tsx

@@ -9,6 +9,7 @@ export interface NewPageHeaderProps {
     renderRight?: () => React.ReactNode;
     className?: string;
     showDivider?: boolean;
+    dividerClassName?: string;
 }
 
 export const NewPageHeader = ({
@@ -17,26 +18,25 @@ export const NewPageHeader = ({
     onCancel,
     renderRight,
     className = '',
-    showDivider = true
-}: NewPageHeaderProps) => {
-    return (
-        <div className={`new-page-header-container ${className}`}>
-            <div className="new-page-header">
-                <h1 className="new-page-header__title">{title}</h1>
-                <div className="new-page-header__actions">
-                    {renderRight && renderRight()}
-                    {onCancel && (
-                        <Button
-                            type="button"
-                            variant="destructive-soft"
-                            onClick={onCancel}
-                        >
-                            <ButtonText color="danger">{cancelLabel}</ButtonText>
-                        </Button>
-                    )}
-                </div>
+    showDivider = true,
+    dividerClassName = ''
+}: NewPageHeaderProps) => (
+    <div className={`new-page-header-container ${className}`}>
+        <div className="new-page-header">
+            <h1 className="new-page-header__title">{title}</h1>
+            <div className="new-page-header__actions">
+                {renderRight && renderRight()}
+                {onCancel && (
+                    <Button
+                        type="button"
+                        variant="destructive-soft"
+                        onClick={onCancel}
+                    >
+                        <ButtonText color="danger">{cancelLabel}</ButtonText>
+                    </Button>
+                )}
             </div>
-            {showDivider && <hr className="new-page-header__divider" />}
         </div>
-    );
-};
+        {showDivider && <hr className={`new-page-header__divider ${dividerClassName}`} />}
+    </div>
+);

package/src/v2/components/NewTable/NewTable.scss

@@ -1,6 +1,11 @@
 .new-table-wrapper {
   width: 100%;
   overflow-x: auto;
+  overflow-y: visible;
+
+  &.action-menu-open {
+    overflow: visible !important;
+  }
 }
 
 .new-table {
@@ -28,6 +33,17 @@
   &__row {
     border-bottom: 1px solid var(--border-primary, #E8E9EF);
     transition: background-color 0.2s ease;
+    overflow: visible;
+
+    &.action-menu-open {
+      overflow: visible !important;
+      z-index: 20;
+      position: relative;
+
+      .new-table__cell {
+        overflow: visible !important;
+      }
+    }
 
     &:last-child {
       border-bottom: none;
@@ -46,6 +62,7 @@
     font-size: var(--text-base-size, 14px);
     color: var(--label-primary, #121E52);
     vertical-align: middle;
+    overflow: visible;
   }
 
   &__no-data-cell {
@@ -60,7 +77,6 @@
 // Mobile styles
 @media (max-width: 768px) {
   .new-table-wrapper {
-    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 

package/src/v2/components/NewTable/NewTable.tsx

@@ -62,6 +62,7 @@ export function NewTable<T extends { id?: string | number }>({
                       <td
                         key={colIndex}
                         className={`new-table__cell ${column.className || ''}`}
+                        role="presentation"
                         onClick={(e) => {
                           if (column.disableRowClick) {
                             e.stopPropagation()

package/src/v2/components/Pagination/Pagination.scss

@@ -13,8 +13,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
@@ -43,8 +43,8 @@
     }
 
     svg {
-      width: 20px;
-      height: 20px;
+      width: 24px;
+      height: 24px;
       flex-shrink: 0; // Prevent SVG from shrinking
     }
   }
@@ -56,13 +56,13 @@
   }
 
   &__page-number {
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 600;
     color: #14215a; // Main fill primary
   }
 
   &__showing {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     color: #626a90; // Secondary text color
   }
@@ -78,12 +78,12 @@
     }
 
     &__button {
-      width: 36px;
-      height: 36px;
+      width: 40px;
+      height: 40px;
 
       svg {
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
       }
     }
 
@@ -92,11 +92,11 @@
     }
 
     &__page-number {
-      font-size: 13px;
+      font-size: 14px;
     }
 
     &__showing {
-      font-size: 11px;
+      font-size: 12px;
     }
   }
 }
@@ -114,12 +114,12 @@
     }
 
     &__button {
-      width: 32px;
-      height: 32px;
+      width: 36px;
+      height: 36px;
 
       svg {
-        width: 16px;
-        height: 16px;
+        width: 18px;
+        height: 18px;
       }
     }
 
@@ -131,11 +131,11 @@
     }
 
     &__page-number {
-      font-size: 12px;
+      font-size: 13px;
     }
 
     &__showing {
-      font-size: 10px;
+      font-size: 11px;
     }
   }
 }

package/src/v2/components/Pagination/Pagination.tsx

@@ -59,7 +59,7 @@ export const Pagination: React.FC<PaginationProps> = ({
           disabled={isLastPage}
           aria-label={t('App:next', { defaultValue: 'Next' })}
         >
-          <ArrowRightIcon width={32} height={32} />
+          <ArrowRightIcon />
         </button>
       </div>
       <div className="v2-pagination__info">