@licklist/design 0.78.5-dev.111 → 0.78.5-dev.113

package/src/v2/pages/SettingsSubPage/SettingsSubPage.scss

@@ -4,7 +4,7 @@
   align-self: stretch;
 
   &__back {
-    padding: 24px 32px 0 0;
+    padding: 24px 0 0 0;
     align-self: flex-start;
 
     .ghost-button {
@@ -23,15 +23,15 @@
     }
 
     @media (max-width: 768px) {
-      padding: 16px 16px 0 0;
+      padding: 16px 0 0 0;
     }
   }
 
   &__content {
-    padding: 24px 0;
+    padding: 0;
 
     @media (max-width: 768px) {
-      padding: 0;
+      padding: 16px 0;
     }
   }
 

package/src/v2/pages/SettingsSubPage/SettingsSubPage.tsx

@@ -11,6 +11,7 @@ export interface SettingsSubPageProps {
   actionLabel?: string
   onAction?: () => void
   children?: React.ReactNode
+  showDivider?: boolean
 }
 
 export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
@@ -20,6 +21,7 @@ export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
   actionLabel,
   onAction,
   children,
+  showDivider = true,
 }) => {
   return (
     <div className="settings-sub-page">
@@ -32,7 +34,7 @@ export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
       )}
       <NewPageHeader
         title={title}
-        showDivider
+        showDivider={showDivider}
       />
       <div className="settings-sub-page__content">
         {onAction && actionLabel && (

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

@@ -73,6 +73,17 @@
     &[type="time"]::-webkit-datetime-edit-ampm-field {
       color: var(--label-primary, #121e52);
     }
+
+    &[type="time"],
+    &[type="date"] {
+      -webkit-appearance: none;
+      appearance: none;
+      text-align: left;
+
+      &::-webkit-date-and-time-value {
+        text-align: left;
+      }
+    }
   }
 
     &__textarea {

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

@@ -116,6 +116,16 @@
   --pink-800: #80224D;
   --pink-900: #611A3B;
 
+  --grey-100: #F8F8FA;
+  --grey-200: #E8E9EF;
+  --grey-300: #D2D5E3;
+  --grey-400: #B6BACC;
+  --grey-500: #9399B3;
+  --grey-600: #626A90;
+  --grey-700: #433D7B;
+  --grey-800: #14215A;
+  --grey-900: #0B1232;
+
   /* Teals */
   --teal-50: #E9FAF7;
   --teal-100: #BAF0E7;
@@ -218,6 +228,15 @@
   --pink-darker: var(--pink-700);
   --pink-darkest: var(--pink-800);
 
+  /* Grey Scale */
+  --grey-lightest: var(--grey-50);
+  --grey-lighter: var(--grey-100);
+  --grey-light: var(--grey-300);
+  --grey-regular: var(--grey-500);
+  --grey-dark: var(--grey-600);
+  --grey-darker: var(--grey-700);
+  --grey-darkest: var(--grey-800);
+
   /* Green Scale */
   --green-lightest: var(--green-50);
   --green-lighter: var(--green-100);

package/src/v2/utils/colourPicker/colors.ts

@@ -0,0 +1,17 @@
+/**
+ * Standard color palette for pricing periods and other color picker components
+ */
+export const COLORS = [
+  { name: 'red', hex: '#E0423A' },
+  { name: 'orange', hex: '#FD7E14' },
+  { name: 'yellow', hex: '#FBB912' },
+  { name: 'green', hex: '#52C22B' },
+  { name: 'teal', hex: '#22CEB1' },
+  { name: 'cyan', hex: '#2BD9FF' },
+  { name: 'blue', hex: '#0E8CE2' },
+  { name: 'indigo', hex: '#5D5BF4' },
+  { name: 'purple', hex: '#6200EE' },
+  { name: 'pink', hex: '#EC1479' },
+  { name: 'grey', hex: '#9399B3' },
+]
+

package/src/v2/utils/timeFormat/formatTime.ts

@@ -0,0 +1,18 @@
+/**
+ * Formats time from "HH:mm:ss" to "HH:mm" format
+ * Useful for converting HTML time input values to backend-compatible format
+ *
+ * @param time - Time string in "HH:mm:ss" or "HH:mm" format
+ * @returns Time string in "HH:mm" format, or undefined if input is undefined
+ *
+ * @example
+ * formatTimeToHHMM("09:00:00") // returns "09:00"
+ * formatTimeToHHMM("17:30") // returns "17:30"
+ * formatTimeToHHMM(undefined) // returns undefined
+ */
+export const formatTimeToHHMM = (time?: string): string | undefined => {
+  if (!time) return undefined
+  // Extract HH:mm from HH:mm:ss (or return as-is if already HH:mm)
+  return time.substring(0, 5)
+}
+