@licklist/design 0.78.33 → 0.78.35

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

@@ -54,6 +54,7 @@
       width: 30px;
       height: 30px;
       flex-shrink: 0;
+      fill: var(--shade-lighter);
     }
   }
 
@@ -111,6 +112,10 @@
 
     .search-input-wrapper {
       width: 70%;
+
+      .new-form-input__icon {
+        color: var(--shade-lighter);
+      }
     }
 
     .search-helper-text {
@@ -125,13 +130,21 @@
 
     .filters-actions-row {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 24px;
+      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;
     }
 
@@ -139,6 +152,12 @@
       display: flex;
       gap: 12px;
       align-items: center;
+
+      .ghost-button {
+        &__icon svg {
+          fill: var(--shade-lighter);
+        }
+      }
     }
 
     &__row {
@@ -165,19 +184,46 @@
     &__sub {
       font-size: 13px;
       color: #9399B3;
+      display: block !important;
     }
     &__id {
       font-size: 13px;
       color: #9399B3;
-      display: none;
+      display: none !important;
     }
 
     &:hover {
       .entity-cell__id {
-        display: block;
+        display: block !important;
       }
       .entity-cell__sub {
-        display: none;
+        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;
       }
     }
   }
@@ -542,6 +588,7 @@
             "customer bookings"
             "divider divider"
             "next last"
+            "status status"
             "actions actions";
           grid-template-columns: 1fr auto;
           border: 1px solid var(--border-primary, #E8E9EF);
@@ -604,6 +651,10 @@
             grid-area: last; // Reuse 'last' area for waiver in waiver list
             text-align: right;
           }
+          &.waiver-col-mb {
+            grid-area: status;
+            text-align: left;
+          }
         }
       }
     }
@@ -679,7 +730,7 @@
     .waiver-cell {
       display: flex;
       flex-direction: column;
-      align-items: flex-end;
+      align-items: flex-start;
       min-width: 0;
       overflow: hidden;
 
@@ -688,7 +739,7 @@
         color: #626A90;
         font-weight: 500;
         margin-bottom: 4px;
-        text-align: right;
+        text-align: left;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -697,7 +748,7 @@
 
       .v2-badge {
         display: inline-flex;
-        margin-left: auto;
+        margin-right: auto;
       }
     }
 

package/src/v2/components/NPSScore/NPSScore.scss

@@ -1,12 +1,18 @@
 .nps-score {
     width: 100%;
     margin-top: 24px;
+    padding: 0 1rem;
+    box-sizing: border-box;
+
+    @media (max-width: 576px) {
+        padding: 0 16px;
+    }
 
     &__container {
-        background: var(--surfaces-main-surface-secondary, #F4F4F7);
+        background: var(--surface-secondary);
         border-radius: 16px;
         padding: 24px;
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        border: 1px solid var(--border-primary);
     }
 
     &__question {
@@ -14,7 +20,7 @@
         font-size: 18px;
         font-weight: 600;
         line-height: 24px;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin: 0 0 16px 0;
     }
 
@@ -34,7 +40,7 @@
             font-family: var(--font-family-sans);
             font-size: 14px;
             font-weight: 500;
-            color: var(--labels-main-label-secondary, #626A90);
+            color: var(--label-secondary);
         }
 
         &--desktop {
@@ -57,7 +63,7 @@
     }
 
     &__label-icon {
-        color: var(--fills-main-fill-secondary, #626A90);
+        color: var(--fill-secondary);
         flex-shrink: 0;
     }
 
@@ -79,18 +85,18 @@
         font-weight: 600;
         transition: all 0.2s ease;
         cursor: pointer;
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
-        color: var(--labels-main-label-primary, #121E52);
+        background: var(--surface-primary);
+        border: 1px solid var(--border-primary);
+        color: var(--label-primary);
 
         &:hover:not(&--selected) {
-            background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+            background: var(--surface-primary-hover);
         }
 
         &--selected {
-            background: var(--fills-main-fill-primary, #14215A);
+            background: var(--fill-primary);
             border-color: transparent;
-            color: #FFFFFF;
+            color: var(--label-primary-alt);
         }
     }
 
@@ -113,7 +119,7 @@
         font-family: var(--font-family-sans);
         font-size: 14px;
         font-weight: 500;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin-bottom: 8px;
     }
 
@@ -127,7 +133,7 @@
     &__optional {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
     }
 
     &__textarea {
@@ -135,39 +141,39 @@
         min-height: 100px;
         padding: 12px;
         border-radius: 8px;
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 1px solid var(--border-primary);
+        background: var(--surface-primary);
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         resize: vertical;
         box-sizing: border-box;
 
         &::placeholder {
-            color: var(--labels-main-label-tertiary, #9CA3AF);
+            color: var(--label-secondary);
         }
 
         &:focus {
             outline: none;
-            border-color: var(--fills-main-fill-primary, #14215A);
+            border-color: var(--fill-primary);
         }
 
         &--error {
-            border-color: var(--fills-main-fill-danger, #DC2626);
+            border-color: var(--fill-danger);
         }
     }
 
     &__hint {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
         margin: 4px 0 0 0;
     }
 
     &__error {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--fills-main-fill-danger, #DC2626);
+        color: var(--fill-danger);
         margin: 4px 0 0 0;
     }
 
@@ -175,7 +181,7 @@
         font-family: var(--font-family-sans);
         font-size: 14px;
         font-weight: 500;
-        color: var(--labels-main-label-action, #2563EB);
+        color: var(--label-action);
         text-decoration: underline;
         background: none;
         border: none;
@@ -184,17 +190,18 @@
         transition: color 0.2s ease;
 
         &:hover {
-            color: var(--labels-main-label-action-hover, #1D4ED8);
+            color: var(--label-action);
         }
     }
 
     &__roles {
         display: grid;
         grid-template-columns: 1fr;
-        gap: 12px;
+        gap: 8px;
 
         @media (min-width: 640px) {
             grid-template-columns: repeat(2, 1fr);
+            gap: 4px;
         }
 
         @media (min-width: 1024px) {
@@ -217,8 +224,8 @@
         width: 20px;
         height: 20px;
         border-radius: 50%;
-        border: 2px solid var(--borders-main-border-primary, #E8E9EF);
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 2px solid var(--border-primary);
+        background: var(--surface-primary);
         margin: 0;
         cursor: pointer;
         flex-shrink: 0;
@@ -234,12 +241,12 @@
             width: 10px;
             height: 10px;
             border-radius: 50%;
-            background: var(--fills-main-fill-primary, #14215A);
+            background: var(--fill-primary);
             transition: transform 0.2s ease;
         }
 
         &:checked {
-            border-color: var(--fills-main-fill-primary, #14215A);
+            border-color: var(--fill-primary);
 
             &::before {
                 transform: translate(-50%, -50%) scale(1);
@@ -248,7 +255,7 @@
 
         &:focus {
             outline: none;
-            box-shadow: 0 0 0 2px var(--fills-main-fill-primary-opacity, rgba(20, 33, 90, 0.2));
+            box-shadow: 0 0 0 2px var(--border-action);
         }
     }
 
@@ -259,33 +266,7 @@
     &__role-label {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-primary, #121E52);
-    }
-
-    &__submit {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 12px 24px;
-        border-radius: 8px;
-        border: none;
-        background: var(--fills-main-fill-primary, #14215A);
-        color: #FFFFFF;
-        font-family: var(--font-family-sans);
-        font-size: 14px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: background 0.2s ease;
-        width: fit-content;
-
-        &:hover:not(:disabled) {
-            background: var(--fills-main-fill-primary-hover, #1a2a6e);
-        }
-
-        &:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
+        color: var(--label-primary);
     }
 
     &__success {
@@ -298,7 +279,7 @@
     }
 
     &__success-icon {
-        color: var(--fills-main-fill-success, #10B981);
+        color: var(--fill-status-success);
         margin-bottom: 16px;
     }
 
@@ -306,14 +287,14 @@
         font-family: var(--font-family-sans);
         font-size: 24px;
         font-weight: 600;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin: 0 0 8px 0;
     }
 
     &__success-message {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
         margin: 0;
     }
 }

package/src/v2/components/NPSScore/NPSScore.tsx

@@ -1,13 +1,17 @@
 import React, { useState } from 'react'
 import './NPSScore.scss'
+import { Button } from '../Button'
+import { Alert } from '../Alert'
 
 export interface NPSScoreProps {
     /** User's first name for personalized greeting */
     firstName?: string
     /** Callback when NPS is submitted */
     onSubmit?: (data: NPSSubmitData) => void
-    /** Callback when dismissed */
+    /** Callback when dismissed without submitting */
     onDismiss?: () => void
+    /** Callback when success alert is dismissed after submission */
+    onSubmitDismiss?: () => void
 }
 
 export interface NPSSubmitData {
@@ -42,6 +46,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     firstName,
     onSubmit,
     onDismiss,
+    onSubmitDismiss,
 }) => {
     const [selectedScore, setSelectedScore] = useState<number | null>(null)
     const [reason, setReason] = useState('')
@@ -54,11 +59,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     const handleSubmit = async () => {
         if (!selectedScore) return
 
-        // Validate required fields - reason required for all scores
         const newErrors: { reason?: string; role?: string } = {}
-        if (!reason.trim()) {
-            newErrors.reason = 'Please provide a reason for your score'
-        }
         if (!role) {
             newErrors.role = 'Please select your role'
         }
@@ -86,13 +87,12 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     if (isSubmitted) {
         return (
             <div className="nps-score">
-                <div className="nps-score__container">
-                    <div className="nps-score__success">
-                        <IconBigSmile size={48} className="nps-score__success-icon" />
-                        <h3 className="nps-score__success-title">Thank you!</h3>
-                        <p className="nps-score__success-message">Your feedback has been submitted successfully.</p>
-                    </div>
-                </div>
+                <Alert
+                    variant="success"
+                    title="Thank you!"
+                    message="Your feedback has been submitted successfully."
+                    onDismiss={onSubmitDismiss}
+                />
             </div>
         )
     }
@@ -142,7 +142,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
                         {/* Reason textarea - always visible */}
                         <div className="nps-score__field">
                             <label className="nps-score__field-label">
-                                Reason for this score?
+                                Reason for this score? (Optional)
                             </label>
                             <textarea
                                 value={reason}
@@ -192,13 +192,12 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
                         </div>
 
                         {/* Submit button */}
-                        <button
+                        <Button
                             onClick={handleSubmit}
                             disabled={isSubmitting}
-                            className="nps-score__submit"
                         >
                             {isSubmitting ? 'Submitting...' : 'Submit'}
-                        </button>
+                        </Button>
                     </div>
                 )}
             </div>

package/src/v2/components/QuickFilter/QuickFilter.scss

@@ -12,11 +12,21 @@
 
   &__options {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
     gap: 8px;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    padding-bottom: 2px; /* Prevent button shadows/borders from being cut off during scroll if any */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari and Opera */
+    }
 
     .ghost-button {
       border-radius: 100px;
+      font-family: var(--font-family-mono, 'Geist Mono', monospace);
+      flex-shrink: 0;
     }
   }
 }
@@ -26,7 +36,7 @@
   .quick-filter {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
     gap: 12px;
     width: 100%;
 
@@ -37,7 +47,8 @@
     &__options {
       flex: 1;
       display: flex;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      overflow-x: auto;
       gap: 6px;
       padding: 0;
       margin: 0;

package/src/v2/components/TableSortIcon/TableSortIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { TableHeaderArrowUpIcon, TableHeaderArrowDownIcon} from '../../icons'
 
 export type SortDirection = 'asc' | 'desc' | null
 
@@ -10,11 +10,9 @@ export interface TableSortIconProps {
 }
 
 export const TableSortIcon: React.FC<TableSortIconProps> = ({ active = false, direction, className = '' }) => {
-  if (!active || !direction) return null
-
   return (
-    <span className={className}>
-      {direction === 'asc' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+    <span className={className} style={{ visibility: active && direction ? 'visible' : 'hidden' }}>
+      {direction === 'asc' ? <TableHeaderArrowUpIcon /> : <TableHeaderArrowDownIcon />}
     </span>
   )
 }

package/src/v2/components/index.ts

@@ -61,6 +61,8 @@ export type { PaginationProps } from './Pagination'
 // Icons
 export {
   InfoIcon,
+  TableHeaderArrowUpIcon,
+  TableHeaderArrowDownIcon,
   ArrowUpIcon,
   ArrowDownIcon,
   EditIcon,