OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Input field visual design update (#19693)

Browse Source 
no refs.

Slight visual adjustment to input fields focus state to keep consistency
between marketing pages and product styles.
This commit is contained in:
Peter Zimon 2024-02-14 13:00:16 +01:00 committed by GitHub
parent c0325da0e7
commit f7e5fb2f9b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/admin-x-design-system/src/global/form/Select.tsx
View File

@ -69,7 +69,7 @@ export type SelectProps = Props<SelectOption, false> & SelectOptionProps & {
const DropdownIndicator: React.FC<DropdownIndicatorProps<SelectOption, false> & {clearBg: boolean}> = ({clearBg, ...props}) => (
<components.DropdownIndicator {...props}>
<div className={`absolute top-[11px] block h-2 w-2 rotate-45 border-[1px] border-l-0 border-t-0 border-grey-900 content-[''] dark:border-grey-400 ${clearBg ? 'right-2' : 'right-[14px]'} `}></div>
<div className={`absolute top-[13px] block h-2 w-2 rotate-45 border-[1px] border-l-0 border-t-0 border-grey-900 content-[''] dark:border-grey-400 ${clearBg ? 'right-2' : 'right-[14px]'} `}></div>
</components.DropdownIndicator>
);
@ -134,7 +134,7 @@ const Select: React.FC<SelectProps> = ({
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<SelectProps> = ({
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)
};

4
apps/admin-x-design-system/src/global/form/TextArea.tsx
View File

@ -55,8 +55,8 @@ const TextArea: React.FC<TextAreaProps> = ({
};
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

6
apps/admin-x-design-system/src/global/form/TextField.tsx
View File

@ -69,15 +69,15 @@ const TextField: React.FC<TextFieldProps> = ({
);
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
);

2
apps/admin-x-design-system/tailwind.config.cjs
View File

@ -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',

4
apps/admin-x-settings/src/components/Sidebar.tsx
View File

@ -112,7 +112,7 @@ const Sidebar: React.FC = () => {
<Icon className='absolute left-3 top-3 z-10' colorClass='text-grey-500' name='magnifying-glass' size='sm' />
<TextField
autoComplete="off"
className='flex h-10 w-full items-center rounded-lg border border-grey-200 bg-white px-[33px] py-1.5 text-[14px] shadow-xs transition-all hover:shadow-sm focus:border-green focus:bg-white focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] focus:outline-2 dark:border-grey-950 dark:bg-grey-950 dark:text-white dark:placeholder:text-grey-800 dark:focus:bg-black'
className='flex h-10 w-full items-center rounded-lg border border-transparent bg-white px-[33px] py-1.5 text-[14px] shadow-[0_0_1px_rgba(21,23,26,0.25),0_1px_3px_rgba(0,0,0,0.03),0_8px_10px_-12px_rgba(0,0,0,.1)] transition-colors hover:shadow-sm focus:border-green focus:bg-white focus:shadow-[0_0_0_2px_rgba(48,207,67,0.25)] focus:outline-2 dark:border-transparent dark:bg-grey-925 dark:text-white dark:placeholder:text-grey-800 dark:focus:border-green dark:focus:bg-grey-950'
containerClassName='w-100'
inputRef={searchInputRef}
placeholder="Search settings"
@ -126,7 +126,7 @@ const Sidebar: React.FC = () => {
{filter ? <Button className='absolute right-3 top-3 p-1' icon='close' iconColorClass='text-grey-700 !w-[10px] !h-[10px]' size='sm' unstyled onClick={() => {
setFilter('');
searchInputRef.current?.focus();
}} /> : <div className='absolute -right-1 top-[9px] hidden rounded border border-grey-400 bg-white px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wider text-grey-600 shadow-[0px_1px_#CED4D9] dark:border-grey-800 dark:bg-grey-900 dark:text-grey-500 dark:shadow-[0px_1px_#626D79] tablet:!visible tablet:right-3 tablet:!block'>/</div>}
}} /> : <div className='absolute -right-1/2 top-[9px] hidden rounded border border-grey-400 bg-white px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wider text-grey-600 shadow-[0px_1px_#CED4D9] dark:border-grey-800 dark:bg-grey-900 dark:text-grey-500 dark:shadow-[0px_1px_#626D79] tablet:!visible tablet:right-3 tablet:!block'>/</div>}
</div>
</div>
<nav className={navClasses} id='admin-x-settings-sidebar'>