From f7e5fb2f9b819001fc4351e00d758769f8ef3fd2 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 14 Feb 2024 13:00:16 +0100 Subject: [PATCH] Input field visual design update (#19693) no refs. Slight visual adjustment to input fields focus state to keep consistency between marketing pages and product styles. --- apps/admin-x-design-system/src/global/form/Select.tsx | 10 +++++----- .../admin-x-design-system/src/global/form/TextArea.tsx | 4 ++-- .../src/global/form/TextField.tsx | 6 +++--- apps/admin-x-design-system/tailwind.config.cjs | 2 +- apps/admin-x-settings/src/components/Sidebar.tsx | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/admin-x-design-system/src/global/form/Select.tsx b/apps/admin-x-design-system/src/global/form/Select.tsx index 5374909693..43e710d45b 100644 --- a/apps/admin-x-design-system/src/global/form/Select.tsx +++ b/apps/admin-x-design-system/src/global/form/Select.tsx @@ -69,7 +69,7 @@ export type SelectProps = Props & SelectOptionProps & { const DropdownIndicator: React.FC & {clearBg: boolean}> = ({clearBg, ...props}) => ( -
+
); @@ -134,7 +134,7 @@ const Select: React.FC = ({ const customClasses = { control: clsx( controlClasses?.control, - 'h-9 min-h-[36px] w-full appearance-none rounded-md border outline-none dark:text-white', + 'h-9 min-h-[36px] w-full appearance-none rounded-lg border outline-none dark:text-white md:h-[38px] md:min-h-[38px]', size === 'xs' ? 'py-0 pr-2 text-xs' : 'py-1 pr-4', clearBg ? '' : 'bg-grey-150 px-3 dark:bg-grey-900', error ? 'border-red' : `border-transparent ${!clearBg && 'hover:bg-grey-100 dark:hover:bg-grey-925'}`, @@ -144,13 +144,13 @@ const Select: React.FC = ({ valueContainer: clsx('mr-1.5 gap-1', controlClasses?.valueContainer), placeHolder: clsx('text-grey-700 dark:text-grey-800', controlClasses?.placeHolder), menu: clsx( - 'z-[300] rounded-b bg-white shadow dark:border dark:border-grey-900 dark:bg-black', + 'z-[300] mt-0.5 overflow-hidden rounded-lg bg-white shadow-lg dark:border dark:border-grey-900 dark:bg-black', size === 'xs' && 'text-xs', controlClasses?.menu ), - option: clsx('px-3 py-[6px] hover:cursor-pointer hover:bg-grey-100 dark:text-white dark:hover:bg-grey-900', controlClasses?.option), + option: clsx('px-3 py-[7px] hover:cursor-pointer hover:bg-grey-100 dark:text-white dark:hover:bg-grey-900', controlClasses?.option), noOptionsMessage: clsx('nowrap p-3 text-grey-600', controlClasses?.noOptionsMessage), - groupHeading: clsx('px-3 py-[6px] text-2xs font-semibold uppercase tracking-wide text-grey-700', controlClasses?.groupHeading), + groupHeading: clsx('px-3 py-[7px] text-2xs font-semibold uppercase tracking-wide text-grey-700', controlClasses?.groupHeading), clearIndicator: clsx('', controlClasses?.clearIndicator) }; diff --git a/apps/admin-x-design-system/src/global/form/TextArea.tsx b/apps/admin-x-design-system/src/global/form/TextArea.tsx index a8de4fb1fe..8c554eb12c 100644 --- a/apps/admin-x-design-system/src/global/form/TextArea.tsx +++ b/apps/admin-x-design-system/src/global/form/TextArea.tsx @@ -55,8 +55,8 @@ const TextArea: React.FC = ({ }; let styles = clsx( - 'order-2 rounded-md border bg-grey-150 px-3 py-2 transition-all dark:bg-grey-900 dark:text-white', - error ? 'border-red bg-white' : 'border-transparent placeholder:text-grey-500 hover:bg-grey-100 focus:border-green focus:bg-white focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:placeholder:text-grey-800 dark:hover:bg-grey-925 dark:focus:bg-grey-950', + 'order-2 rounded-lg border bg-grey-150 px-3 py-2 transition-all dark:bg-grey-900 dark:text-white', + error ? 'border-red bg-white' : 'border-transparent placeholder:text-grey-500 hover:bg-grey-100 focus:border-green focus:bg-white focus:shadow-[0_0_0_2px_rgba(48,207,67,0.25)] dark:placeholder:text-grey-800 dark:hover:bg-grey-925 dark:focus:bg-grey-950', title && 'mt-1.5', fontStyle === 'mono' && 'font-mono text-sm', className diff --git a/apps/admin-x-design-system/src/global/form/TextField.tsx b/apps/admin-x-design-system/src/global/form/TextField.tsx index 54eccd2848..84be2158c8 100644 --- a/apps/admin-x-design-system/src/global/form/TextField.tsx +++ b/apps/admin-x-design-system/src/global/form/TextField.tsx @@ -69,15 +69,15 @@ const TextField: React.FC = ({ ); const bgClasses = !unstyled && clsx( - 'absolute inset-0 rounded-md border text-grey-300 transition-all peer-hover:bg-grey-100 peer-focus:border-green peer-focus:bg-white peer-focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:peer-hover:bg-grey-925 dark:peer-focus:bg-grey-950', + 'absolute inset-0 rounded-lg border text-grey-300 transition-colors peer-hover:bg-grey-100 peer-focus:border-green peer-focus:bg-white peer-focus:shadow-[0_0_0_2px_rgba(48,207,67,.25)] dark:peer-hover:bg-grey-925 dark:peer-focus:bg-grey-950', error ? `border-red bg-white dark:bg-grey-925` : 'border-transparent bg-grey-150 dark:bg-grey-900', disabled && 'bg-grey-50 peer-hover:bg-grey-50 dark:bg-grey-950 dark:peer-hover:bg-grey-950' ); const textFieldClasses = !unstyled && clsx( - 'peer z-[1] order-2 h-8 w-full bg-transparent px-3 py-1 text-sm placeholder:text-grey-500 dark:placeholder:text-grey-700 md:h-9 md:py-2 md:text-md', + 'peer z-[1] order-2 h-9 w-full bg-transparent px-3 py-1.5 text-sm placeholder:text-grey-500 dark:placeholder:text-grey-700 md:h-[38px] md:py-2 md:text-md', disabled ? 'cursor-not-allowed text-grey-600 opacity-60 dark:text-grey-800' : 'dark:text-white', - rightPlaceholder ? 'w-0 grow rounded-l-md' : 'rounded-md', + rightPlaceholder ? 'w-0 grow rounded-l-lg' : 'rounded-lg', className ); diff --git a/apps/admin-x-design-system/tailwind.config.cjs b/apps/admin-x-design-system/tailwind.config.cjs index 853a6d49bd..ca58d6f2a0 100644 --- a/apps/admin-x-design-system/tailwind.config.cjs +++ b/apps/admin-x-design-system/tailwind.config.cjs @@ -264,7 +264,7 @@ module.exports = { sm: '0.3rem', DEFAULT: '0.4rem', md: '0.6rem', - lg: '0.8rem', + lg: '0.7rem', xl: '1.2rem', '2xl': '1.6rem', '3xl': '2.4rem', diff --git a/apps/admin-x-settings/src/components/Sidebar.tsx b/apps/admin-x-settings/src/components/Sidebar.tsx index b7d1d43cca..3a9f3b6fd1 100644 --- a/apps/admin-x-settings/src/components/Sidebar.tsx +++ b/apps/admin-x-settings/src/components/Sidebar.tsx @@ -112,7 +112,7 @@ const Sidebar: React.FC = () => { { {filter ?