@licklist/design 0.78.5-dev.46 → 0.78.5-dev.48

package/src/v2/icons/index.tsx

@@ -99,7 +99,7 @@ export const BookingTypesIcon = () => (
 )
 
 export const EditIcon = () => (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-        <path d="M11.333 2.00004C11.5081 1.82494 11.7169 1.68605 11.9473 1.59129C12.1777 1.49653 12.4251 1.44775 12.675 1.44775C12.9249 1.44775 13.1723 1.49653 13.4027 1.59129C13.6331 1.68605 13.8419 1.82494 14.017 2.00004C14.1921 2.17513 14.331 2.38394 14.4257 2.61436C14.5205 2.84478 14.5693 3.09215 14.5693 3.34204C14.5693 3.59193 14.5205 3.8393 14.4257 4.06972C14.331 4.30014 14.1921 4.50895 14.017 4.68404L5.00033 13.7007L1.33366 14.6667L2.29966 11.0007L11.333 2.00004Z" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round"/>
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 22.89H10.4142L19.7279 13.5763L18.3137 12.1621L9 21.4758V22.89ZM25 24.89H7V20.6473L20.435 7.21232C20.8256 6.8218 21.4587 6.8218 21.8492 7.21232L24.6777 10.0408C25.0682 10.4313 25.0682 11.0644 24.6777 11.455L13.2426 22.89H25V24.89ZM19.7279 10.7479L21.1421 12.1621L22.5563 10.7479L21.1421 9.33364L19.7279 10.7479Z" fill="var(--fills-main-fill-primary, #14215A)"/>
     </svg>
 )

package/src/v2/navigation/DashboardLayout/index.ts

@@ -18,3 +18,6 @@ export { AdminSidebar, type AdminSidebarProps } from './AdminSidebar'
 export { TopNavigation, type TopNavigationProps } from './TopNavigation'
 export { DashboardFooter, type DashboardFooterProps } from './DashboardFooter'
 export { default } from './DashboardLayout'
+
+// Additional icons from v2/icons
+export { CalendarIcon, BookingsIcon, BookingTypesIcon, EditIcon } from '../../icons'

package/src/v2/navigation/Navigation/Navigation.tsx

@@ -13,7 +13,7 @@ import {
     AnalyticsIcon,
     PaymentsIcon,
     SettingsIcon,
-} from '../icons'
+} from '../../icons'
 import './Navigation.scss'
 
 export interface NavigationProps {

package/src/v2/navigation/NavigationItem/NavigationItem.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 import { NavigationItem } from './NavigationItem'
-import { DashboardIcon, CompanyIcon, SettingsIcon } from '../icons'
+import { DashboardIcon, CompanyIcon, SettingsIcon } from '../../icons'
 
 export default {
     title: 'v2/Navigation/NavigationItem',

package/src/v2/navigation/index.ts

@@ -19,5 +19,5 @@ export type { SidebarUserElementProps } from './SidebarUserElement'
 export { SidebarWithAuth } from './SidebarWithAuth'
 export type { SidebarWithAuthProps } from './SidebarWithAuth'
 export { NAVIGATION_ITEMS } from './config'
-export * from './icons'
+export * from '../icons'
 

package/src/v2/pages/Settings/components/SidebarCustomisation.scss

@@ -15,57 +15,111 @@
   }
 
   &__title {
-    @include typography('text.small.bold');
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--label-primary);
     margin: 0;
   }
 
   &__cancel-btn {
-    @include typography('text.regular');
-    color: var(--label-danger);
-    background: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    padding: 0 12px;
+    border-radius: 6px;
     border: none;
+    background: transparent;
+    color: var(--label-danger);
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
     cursor: pointer;
-    padding: 0;
+    transition: background-color 0.2s ease;
 
     &:hover {
-      text-decoration: underline;
+      background-color: var(--surface-danger-soft, rgba(239, 68, 68, 0.1));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-action);
+      outline-offset: 2px;
     }
   }
 
   &__edit-btn {
-    display: flex;
+    display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 6px;
-    @include typography('text.regular');
-    color: var(--label-primary);
-    background: none;
+    height: 36px;
+    padding: 0 12px 0 4px;
+    border-radius: 6px;
     border: none;
+    background: transparent;
+    color: var(--label-primary);
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
     cursor: pointer;
-    padding: 0;
+    transition: background-color 0.2s ease;
 
     svg {
-      color: var(--fill-primary);
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      fill: var(--fill-primary);
     }
 
     &:hover {
-      text-decoration: underline;
+      background-color: var(--surface-tertiary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-action);
+      outline-offset: 2px;
     }
   }
 
-  // Edit mode grid
+  // Edit mode grid - responsive columns
   &__grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1fr;
     gap: 16px;
     width: 100%;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: 1536px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
-  // View mode grid
+  // View mode grid - responsive columns
   &__view-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1fr;
     gap: 12px;
     width: 100%;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: 1536px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
   &__view-item {
@@ -108,7 +162,7 @@
   &__actions {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 24px;
     margin-top: 8px;
   }
 

package/src/v2/pages/Settings/components/SidebarCustomisation.tsx

@@ -49,37 +49,43 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
   onCancel,
 }) => {
   const [items, setItems] = useState<SidebarItem[]>(initialItems)
+  const [itemsBeforeEdit, setItemsBeforeEdit] = useState<SidebarItem[]>(initialItems)
   const [isEditing, setIsEditing] = useState(false)
 
   useEffect(() => {
     setItems(initialItems)
-  }, [initialItems])
+    if (!isEditing) {
+      setItemsBeforeEdit(initialItems)
+    }
+  }, [initialItems, isEditing])
 
   const handleLabelChange = (id: string, newLabel: string) => {
     const updatedItems = items.map((item) =>
       item.id === id ? { ...item, label: newLabel } : item
     )
     setItems(updatedItems)
-    onItemsChange?.(updatedItems)
   }
 
   const handleSave = () => {
+    onItemsChange?.(items)
     onSave?.(items)
+    setItemsBeforeEdit(items)
     setIsEditing(false)
   }
 
   const handleReset = () => {
-    setItems(defaultSidebarItems)
+    // Reset to defaults in UI - parent handles the actual default values
     onReset?.()
   }
 
   const handleCancel = () => {
-    setItems(initialItems)
+    setItems(itemsBeforeEdit)
     onCancel?.()
     setIsEditing(false)
   }
 
   const handleEdit = () => {
+    setItemsBeforeEdit(items)
     setIsEditing(true)
   }
 

package/src/v2/styles/form/NewInput.scss

@@ -1,4 +1,5 @@
 /* New Form Input Styles based on Figma design tokens */
+@import '../../styles/tokens/typography';
 
 .new-form-input {
   display: flex;
@@ -36,9 +37,7 @@
     }
 
   &__input {
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
-    line-height: var(--text-regular-line, 20px);
+    @include typography('text.regular');
     flex: 1 0 0;
     background-color: var(--surfaces-main-background-secondary);
     border: 2px solid var(--border-primary);