@licklist/design 0.78.30 → 0.78.32

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

@@ -0,0 +1,53 @@
+.ghost-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 6px;
+  border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+  background: transparent;
+  color: var(--labels-main-label-primary, #121E52);
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--surfaces-main-background-tertiary, #E8E9EF);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--fills-main-fill-action, #6200EE);
+    outline-offset: 2px;
+  }
+
+  &--sm {
+    height: 28px;
+    padding: 0 8px 0 8px;
+    font-size: 13px;
+  }
+
+  &--md {
+    height: 36px;
+    padding: 0 12px 0 8px;
+    font-size: 14px;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { ButtonHTMLAttributes } from 'react'
+import './GhostButton.scss'
+
+export interface GhostButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  size?: 'sm' | 'md'
+}
+
+export function GhostButton({
+  icon,
+  size = 'md',
+  className = '',
+  children,
+  ...props
+}: GhostButtonProps) {
+  const classes = [
+    'ghost-button',
+    `ghost-button--${size}`,
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <button className={classes} {...props}>
+      {icon && <span className="ghost-button__icon">{icon}</span>}
+      {children && <span className="ghost-button__text">{children}</span>}
+    </button>
+  )
+}

package/src/v2/components/FormField/FormField.scss

@@ -47,10 +47,6 @@
       color: var(--label-secondary, #626a90);
     }
 
-    &:hover:not(:disabled) {
-      border-color: var(--border-primary-hover, #d1d3de);
-    }
-
     &:focus {
       border-color: var(--border-selected, #6200EE);
       background-color: var(--surface-secondary, #f8f8fa);

package/src/v2/components/index.ts

@@ -21,6 +21,9 @@ export type { SectionHeaderProps } from './SectionHeader'
 export { Button, ButtonText } from './Button'
 export type { ButtonProps, ButtonTextProps } from './Button'
 
+export { GhostButton } from './Button/GhostButton'
+export type { GhostButtonProps } from './Button/GhostButton'
+
 export { Select } from './Select'
 
 export { Tooltip } from './Tooltip'

package/src/v2/navigation/DashboardLayout/DashboardLayout.scss

@@ -54,6 +54,11 @@
     &__content {
         flex: 1;
         overflow-y: auto;
+
+        @media (max-width: 768px) {
+            padding-left: var(--container-padding-mobile, 16px);
+            padding-right: var(--container-padding-mobile, 16px);
+        }
     }
 
     &__overlay {

package/src/v2/navigation/DashboardLayout/ProviderSidebar.scss

@@ -76,6 +76,47 @@
         &--collapsed {
             justify-content: center;
         }
+
+        &.provider-sidebar__link--active {
+            border-radius: 8px;
+
+            .entity-header {
+                background: transparent;
+
+                &:hover {
+                    background: transparent;
+
+                    .entity-header__badge {
+                        background: rgba(255, 255, 255, 0.2);
+
+                        span {
+                            color: white;
+                        }
+                    }
+                }
+            }
+
+            .entity-header__name {
+                color: white;
+            }
+
+            .entity-header__badge {
+                background: rgba(255, 255, 255, 0.2);
+
+                span {
+                    color: white;
+                }
+            }
+
+            .entity-header__placeholder span {
+                color: white;
+            }
+
+            .entity-header__placeholder svg circle {
+                fill: rgba(255, 255, 255, 0.2);
+                stroke: rgba(255, 255, 255, 0.6);
+            }
+        }
     }
 
     &__avatar {

package/src/v2/navigation/DashboardLayout/ProviderSidebar.tsx

@@ -189,8 +189,8 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
 
                 
                 {expanded ? (
-                    <div 
-                        className="provider-sidebar__header"
+                    <div
+                        className={`provider-sidebar__header ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
                         onClick={() => handleNavClick('/profile')}
                         role="button"
                         tabIndex={0}
@@ -208,8 +208,8 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
                     </div>
                 ) : (
                     <Tooltip content={providerName} side="right" sideOffset={8} delayDuration={100}>
-                        <div 
-                            className="provider-sidebar__header provider-sidebar__header--collapsed"
+                        <div
+                            className={`provider-sidebar__header provider-sidebar__header--collapsed ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
                             onClick={() => handleNavClick('/profile')}
                             role="button"
                             tabIndex={0}

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

@@ -48,40 +48,6 @@
     }
   }
 
-  &__edit-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    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;
-    transition: background-color 0.2s ease;
-
-    svg {
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      fill: var(--fill-primary);
-    }
-
-    &:hover {
-      background-color: var(--surface-tertiary);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--border-action);
-      outline-offset: 2px;
-    }
-  }
-
   // Edit mode grid - responsive columns
   &__grid {
     display: grid;

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

@@ -12,6 +12,8 @@ import {
   SettingsIcon,
   EditIcon,
 } from '../../../icons'
+import { Button } from 'src/v2/components'
+import { GhostButton } from 'src/v2/components/Button/GhostButton'
 
 export interface SidebarItem {
   id: string
@@ -31,6 +33,7 @@ export interface SidebarCustomisationProps {
 
 // Default sidebar items - IDs must match useProviderNavigation.tsx
 export const defaultSidebarItems: SidebarItem[] = [
+  { id: 'home', label: 'Home', icon: null, visible: true },
   { id: 'events', label: 'Dates & Events', icon: <CalendarIcon />, visible: true },
   { id: 'sales', label: 'Bookings & Enquiries', icon: <BookingsIcon />, visible: true },
   { id: 'product-sets', label: 'Booking Types', icon: <BookingTypesIcon />, visible: true },
@@ -53,8 +56,8 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
   const [isEditing, setIsEditing] = useState(false)
 
   useEffect(() => {
-    setItems(initialItems)
     if (!isEditing) {
+      setItems(initialItems)
       setItemsBeforeEdit(initialItems)
     }
   }, [initialItems, isEditing])
@@ -74,12 +77,17 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
   }
 
   const handleReset = () => {
-    // Reset to defaults in UI - parent handles the actual default values
+    const resetItems = items.map((item) => {
+      const defaultItem = defaultSidebarItems.find((d) => d.id === item.id)
+      return defaultItem ? { ...item, label: defaultItem.label } : item
+    })
+    setItems(resetItems)
     onReset?.()
   }
 
   const handleCancel = () => {
     setItems(itemsBeforeEdit)
+    onItemsChange?.(itemsBeforeEdit)
     onCancel?.()
     setIsEditing(false)
   }
@@ -102,14 +110,12 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
             Cancel
           </button>
         ) : (
-          <button
-            type="button"
-            className="sidebar-customisation__edit-btn"
+          <GhostButton
+            icon={<EditIcon />}
             onClick={handleEdit}
           >
-            <EditIcon />
-            <span>Edit Side Bar</span>
-          </button>
+            Edit Side Bar
+          </GhostButton>
         )}
       </div>
 
@@ -132,13 +138,12 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
           </div>
 
           <div className="sidebar-customisation__actions">
-            <button
+            <Button
               type="button"
-              className="sidebar-customisation__save-btn"
               onClick={handleSave}
             >
               Save Changes
-            </button>
+            </Button>
             <button
               type="button"
               className="sidebar-customisation__reset-btn"

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { FormField } from 'src/v2/components'
 import './SidebarNavItem.scss'
 
 export interface SidebarNavItemProps {
@@ -36,10 +37,9 @@ export const SidebarNavItem: React.FC<SidebarNavItemProps> = ({
           </span>
         </div>
       </div>
-      <input
+      <FormField
         type="text"
         id={id}
-        className={`sidebar-nav-item__input ${disabled ? 'sidebar-nav-item__input--disabled' : ''}`}
         value={label}
         onChange={(e) => onLabelChange?.(id, e.target.value)}
         disabled={disabled}

package/src/v2/styles/tokens/_sizes.scss

@@ -24,6 +24,9 @@
     --spacing-xxl: 64px;
     --spacing-super: 128px;
 
+    /* Layout tokens - Container insets */
+    --container-padding-mobile: 16px;
+
     /* Opacity tokens - Transparency values */
     --opacity-0: 0;
     --opacity-10: 0.1;