cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: make the input width to full

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-29 10:44:45 +07:00
parent e0c5895e9c
commit 6db5871868
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/shared/Input/Input.theme.ts
View File

@ -8,6 +8,8 @@ export const inputTheme = tv(
'items-center', 'items-center',
'rounded-lg', 'rounded-lg',
'relative', 'relative',
'gap-2',
'w-full',
'placeholder:text-elements-disabled', 'placeholder:text-elements-disabled',
'disabled:cursor-not-allowed', 'disabled:cursor-not-allowed',
'disabled:bg-controls-disabled', 'disabled:bg-controls-disabled',
@ -27,7 +29,7 @@ export const inputTheme = tv(
'disabled:shadow-none', 'disabled:shadow-none',
'disabled:border-none', 'disabled:border-none',
], ],
icon: ['text-elements-mid-em'], icon: ['text-elements-low-em'],
iconContainer: [ iconContainer: [
'absolute', 'absolute',
'inset-y-0', 'inset-y-0',

4
packages/frontend/src/components/shared/Input/Input.tsx
View File

@ -87,12 +87,12 @@ export const Input = ({
); );
return ( return (
<div className="space-y-2"> <div className="flex flex-col gap-2 w-full">
{renderLabels} {renderLabels}
<div className={containerCls({ class: className })}> <div className={containerCls({ class: className })}>
{leftIcon && renderLeftIcon} {leftIcon && renderLeftIcon}
<input <input
className={cn(inputCls({ class: 'w-80' }), { className={cn(inputCls(), {
'pl-10': leftIcon, 'pl-10': leftIcon,
})} })}
{...props} {...props}