@licklist/design 0.78.5-dev.74 → 0.78.5-dev.76

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

@@ -0,0 +1,43 @@
+.settings-sub-page {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  &__back {
+    padding: 24px 32px 0 32px;
+    align-self: flex-start;
+
+    .ghost-button {
+      color: var(--fill-action, #5D5BF4);
+      border-color: var(--borders-main-border-primary, #E8E9EF);
+
+      &:not(.active):hover:not(:disabled) {
+        background-color: var(--surface-action-soft, #F4F4FE);
+        color: var(--fill-action, #5D5BF4);
+      }
+
+      .ghost-button__icon svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 16px 16px 0 16px;
+    }
+  }
+
+  &__content {
+    padding: 24px 32px;
+
+    @media (max-width: 768px) {
+      padding: 0;
+    }
+  }
+
+  &__action {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import { GhostButton } from '../../components/Button'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { ArrowLeftIcon, PlusIcon } from '../../icons'
+import './SettingsSubPage.scss'
+
+export interface SettingsSubPageProps {
+  title?: string
+  backLabel?: string
+  onBack?: () => void
+  actionLabel?: string
+  onAction?: () => void
+  children?: React.ReactNode
+}
+
+export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
+  title = '',
+  backLabel = 'Back to Settings',
+  onBack,
+  actionLabel,
+  onAction,
+  children,
+}) => {
+  return (
+    <div className="settings-sub-page">
+      {onBack && (
+        <div className="settings-sub-page__back">
+          <GhostButton onClick={onBack} icon={<ArrowLeftIcon />}>
+            {backLabel}
+          </GhostButton>
+        </div>
+      )}
+      <NewPageHeader
+        title={title}
+        showDivider
+      />
+      <div className="settings-sub-page__content">
+        {onAction && actionLabel && (
+          <div className="settings-sub-page__action">
+            <GhostButton onClick={onAction} icon={<PlusIcon width={16} height={16} />}>
+              {actionLabel}
+            </GhostButton>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/v2/pages/SettingsSubPage/index.ts

@@ -0,0 +1,2 @@
+export { SettingsSubPage } from './SettingsSubPage'
+export type { SettingsSubPageProps } from './SettingsSubPage'

package/src/v2/pages/ZonesResources/ZonesResourcesPage.tsx

@@ -1,49 +1,22 @@
 import React from 'react'
-import { GhostButton } from '../../components/Button'
-import { NewPageHeader } from '../../components/NewPageHeader'
-import { ArrowLeftIcon, PlusIcon } from '../../icons'
-import './ZonesResourcesPage.scss'
+import { SettingsSubPage } from '../SettingsSubPage'
+import type { SettingsSubPageProps } from '../SettingsSubPage'
 
-export interface ZonesResourcesPageProps {
-  title?: string
-  backLabel?: string
-  onBack?: () => void
-  actionLabel?: string
-  onAction?: () => void
-  children?: React.ReactNode
-}
+export interface ZonesResourcesPageProps extends SettingsSubPageProps {}
 
+/**
+ * @deprecated Use SettingsSubPage instead. This is kept for backwards compatibility.
+ */
 export const ZonesResourcesPage: React.FC<ZonesResourcesPageProps> = ({
   title = 'Zones & Resources',
-  backLabel = 'Back to Settings',
-  onBack,
   actionLabel = 'Add Zone',
-  onAction,
-  children,
+  ...props
 }) => {
   return (
-    <div className="zones-resources-page">
-      {onBack && (
-        <div className="zones-resources-page__back">
-          <GhostButton onClick={onBack} icon={<ArrowLeftIcon />}>
-            {backLabel}
-          </GhostButton>
-        </div>
-      )}
-      <NewPageHeader
-        title={title}
-        showDivider
-      />
-      <div className="zones-resources-page__content">
-        {onAction && (
-          <div className="zones-resources-page__action">
-            <GhostButton onClick={onAction} icon={<PlusIcon width={16} height={16} />}>
-              {actionLabel}
-            </GhostButton>
-          </div>
-        )}
-        {children}
-      </div>
-    </div>
+    <SettingsSubPage
+      title={title}
+      actionLabel={actionLabel}
+      {...props}
+    />
   )
 }

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

@@ -35,6 +35,7 @@
   &__input {
     @include typography('text.regular');
     flex: 1 0 0;
+    color: var(--label-primary, #121e52);
     background-color: var(--surfaces-main-background-secondary);
     border: 2px solid var(--border-primary);
     border-radius: var(--radius-md);
@@ -57,6 +58,17 @@
     &::placeholder {
       color: var(--labels-main-label-secondary, #626a90);
     }
+
+    &[type="date"]::-webkit-datetime-edit-text,
+    &[type="date"]::-webkit-datetime-edit-month-field,
+    &[type="date"]::-webkit-datetime-edit-day-field,
+    &[type="date"]::-webkit-datetime-edit-year-field,
+    &[type="time"]::-webkit-datetime-edit-text,
+    &[type="time"]::-webkit-datetime-edit-hour-field,
+    &[type="time"]::-webkit-datetime-edit-minute-field,
+    &[type="time"]::-webkit-datetime-edit-ampm-field {
+      color: var(--label-primary, #121e52);
+    }
   }
 
     &__textarea {

package/dist/v2/pages/ZonesResources/ZonesResourcesPage.scss.js

@@ -1,6 +0,0 @@
-import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".zones-resources-page{align-self:stretch;display:flex;flex-direction:column}.zones-resources-page__back{align-self:flex-start;padding:24px 32px 0}.zones-resources-page__back .ghost-button{border-color:var(--borders-main-border-primary,#e8e9ef);color:var(--fill-action,#5d5bf4)}.zones-resources-page__back .ghost-button:not(.active):hover:not(:disabled){background-color:var(--surface-action-soft,#f4f4fe);color:var(--fill-action,#5d5bf4)}.zones-resources-page__back .ghost-button .ghost-button__icon svg{height:24px;width:24px}@media (max-width:768px){.zones-resources-page__back{padding:16px 16px 0}}.zones-resources-page__content{padding:24px 32px}@media (max-width:768px){.zones-resources-page__content{padding:0}}.zones-resources-page__action{display:flex;justify-content:flex-end;margin-bottom:16px}";
-styleInject(css_248z);
-
-export { css_248z as default };