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

package/src/v2/components/Alert/Alert.scss

@@ -16,10 +16,6 @@
     background: var(--surfaces-status-background-success, #eef9ea);
     border-color: var(--borders-status-border-success, #c9ecbd);
 
-    .alert__icon {
-      background-image: url("./assets/success-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-success, #2d6b18);
     }
@@ -29,10 +25,6 @@
     background: var(--surfaces-status-background-error, #fceceb);
     border-color: var(--borders-status-border-error, #f5c4c2);
 
-    .alert__icon {
-      background-image: url("./assets/error-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-error, #cc3c35);
     }
@@ -42,10 +34,6 @@
     background: var(--surfaces-status-background-alert, #fcf6e7);
     border-color: var(--borders-status-border-alert, #f6e3b4);
 
-    .alert__icon {
-      background-image: url("./assets/alert-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-alert, #fd7e14);
     }
@@ -55,10 +43,6 @@
     background: var(--surfaces-status-background-info, #e7f4fc);
     border-color: var(--borders-status-border-info, #b4dbf6);
 
-    .alert__icon {
-      background-image: url("./assets/info-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-info, #0e8ce2);
     }
@@ -78,10 +62,15 @@
     flex-shrink: 0;
     width: 32px;
     height: 32px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &__details {

package/src/v2/components/Alert/Alert.tsx

@@ -3,6 +3,29 @@ import './Alert.scss';
 
 export type AlertVariant = 'success' | 'error' | 'alert' | 'info';
 
+const variantIcons: Record<AlertVariant, React.ReactNode> = {
+  success: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM7.44629 10.6055L5.72168 8.80762L4.27832 10.1924L7.35254 13.3945L14.6729 6.74023L13.3271 5.25977L7.44629 10.6055Z" fill="var(--fills-status-fill-success, #2D6B18)"/>
+    </svg>
+  ),
+  error: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 12.5C8.44772 12.5 8 12.9477 8 13.5C8 14.0523 8.44772 14.5 9 14.5C9.55228 14.5 10 14.0523 10 13.5C10 12.9477 9.55228 12.5 9 12.5ZM9 3.5C8.44772 3.5 8 3.94772 8 4.5V10.5C8 11.0523 8.44772 11.5 9 11.5C9.55228 11.5 10 11.0523 10 10.5V4.5C10 3.94772 9.55228 3.5 9 3.5Z" fill="var(--fills-status-fill-error, #CC3C35)"/>
+    </svg>
+  ),
+  alert: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 12.5C8.44772 12.5 8 12.9477 8 13.5C8 14.0523 8.44772 14.5 9 14.5C9.55228 14.5 10 14.0523 10 13.5C10 12.9477 9.55228 12.5 9 12.5ZM9 3.5C8.44772 3.5 8 3.94772 8 4.5V10.5C8 11.0523 8.44772 11.5 9 11.5C9.55228 11.5 10 11.0523 10 10.5V4.5C10 3.94772 9.55228 3.5 9 3.5Z" fill="var(--fills-status-fill-alert, #FD7E14)"/>
+    </svg>
+  ),
+  info: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 7.5C8.44772 7.5 8 7.94772 8 8.5V13.5C8 14.0523 8.44772 14.5 9 14.5C9.55228 14.5 10 14.0523 10 13.5V8.5C10 7.94772 9.55228 7.5 9 7.5ZM9 3.5C8.44772 3.5 8 3.94772 8 4.5C8 5.05228 8.44772 5.5 9 5.5C9.55228 5.5 10 5.05228 10 4.5C10 3.94772 9.55228 3.5 9 3.5Z" fill="var(--fills-status-fill-info, #0E8CE2)"/>
+    </svg>
+  ),
+};
+
 export interface AlertProps {
   variant: AlertVariant;
   title: string;
@@ -30,7 +53,7 @@ export const Alert: React.FC<AlertProps> = ({
     <div className={`alert alert--${variant} ${className || ''}`}>
       <div className="alert__content">
         <div className="alert__icon">
-          {/* Icon SVG will be handled by background images in SCSS */}
+          {variantIcons[variant]}
         </div>
         <div className="alert__details">
           <div className="alert__information">

package/src/v2/components/Badge/Badge.scss

@@ -4,6 +4,11 @@
   justify-content: center;
   padding: 2px 12px;
   border-radius: 100px;
+
+  &--with-icon {
+    padding-left: 8px;
+  }
+  font-family: var(--font-family-mono, 'Geist Mono', monospace);
   font-size: var(--text-small-size, 13px);
   font-weight: 500;
   line-height: 1.2;
@@ -57,6 +62,10 @@
   .new-badge {
     padding: 1px 10px;
     font-size: 12px;
+
+    &--with-icon {
+      padding-left: 6px;
+    }
   }
 }
 
@@ -64,6 +73,10 @@
   .new-badge {
     padding: 1px 8px;
     font-size: 11px;
+
+    &--with-icon {
+      padding-left: 4px;
+    }
   }
 }
 

package/src/v2/components/Badge/Badge.tsx

@@ -13,11 +13,13 @@ export const Badge: React.FC<BadgeProps> = ({
   variant = 'neutral',
   className = '',
   icon,
-}) => {
-  return (
-    <span className={`new-badge new-badge--${variant} ${className}`}>
-      {icon && <span className="new-badge__icon">{icon}</span>}
-      {children}
-    </span>
-  )
-}
+}) => (
+  <span
+    className={`new-badge new-badge--${variant} ${
+      icon ? 'new-badge--with-icon' : ''
+    } ${className}`}
+  >
+    {icon && <span className="new-badge__icon">{icon}</span>}
+    {children}
+  </span>
+)

package/src/v2/components/Button/Button.tsx

@@ -2,14 +2,24 @@ import { ButtonHTMLAttributes } from 'react'
 import './Button.scss'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled'
+  variant?:
+    | 'primary'
+    | 'primary-soft'
+    | 'secondary-soft'
+    | 'tertiary-soft'
+    | 'primary-outline'
+    | 'secondary'
+    | 'destructive-soft'
+    | 'destructive-strong'
+    | 'info'
+    | 'disabled'
   size?: 'sm' | 'md' | 'lg'
   isLoading?: boolean
 }
 
 export function Button({
   variant = 'primary',
-  size = 'md',
+  size: _size = 'md',
   disabled = false,
   isLoading = false,
   className = '',
@@ -29,6 +39,7 @@ export function Button({
 
   return (
     <button
+      type="button"
       className={classes}
       disabled={disabled || isLoading}
       {...props}

package/src/v2/components/Button/GhostButton.scss

@@ -13,7 +13,7 @@
   cursor: pointer;
   transition: background-color 0.2s ease;
 
-  &:hover:not(:disabled) {
+  &:not(.active):hover:not(:disabled) {
     background-color: var(--surfaces-main-background-tertiary, #E8E9EF);
   }
 
@@ -27,6 +27,16 @@
     outline-offset: 2px;
   }
 
+  &.active {
+    background-color: var(--fill-primary, #6200EE);
+    border-color: var(--border-selected, #121E52);
+    color: var(--neutral-white, #FFFFFF);
+
+    .ghost-button__text {
+      color: var(--neutral-white, #FFFFFF);
+    }
+  }
+
   &--sm {
     height: 28px;
     padding: 0 8px 0 8px;

package/src/v2/components/Button/index.ts

@@ -1,3 +1,5 @@
 export { Button, ButtonText } from './Button'
 export type { ButtonProps, ButtonTextProps } from './Button'
+export { GhostButton } from './GhostButton'
+export type { GhostButtonProps } from './GhostButton'
 

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/NPSScore/NPSScore.scss

@@ -4,6 +4,10 @@
     padding: 0 1rem;
     box-sizing: border-box;
 
+    @media (max-width: 576px) {
+        padding: 0 16px;
+    }
+
     &__container {
         background: var(--surface-secondary);
         border-radius: 16px;