[WEB-5742] fix: input field background #8369

This commit is contained in:
Aaryan Khandelwal 2025-12-17 21:23:28 +05:30 committed by GitHub
parent f0b98ceb8f
commit d9ab60104e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 8 additions and 9 deletions

View file

@ -67,9 +67,9 @@ export function PageForm(props: Props) {
isOpen={isOpen} isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)} handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center flex-shrink0" className="flex items-center justify-center flex-shrink0"
buttonClassName="flex items-center justify-center" buttonClassName="flex items-center justify-center bg-layer-2 hover:bg-layer-2-hover rounded-md"
label={ label={
<span className="grid h-9 w-9 place-items-center rounded-md bg-surface-2"> <span className="grid h-9 w-9 place-items-center rounded-md">
<> <>
{formData?.logo_props?.in_use ? ( {formData?.logo_props?.in_use ? (
<Logo logo={formData?.logo_props} size={18} type="lucide" /> <Logo logo={formData?.logo_props} size={18} type="lucide" />

View file

@ -80,8 +80,7 @@ const ScrollBar = React.memo(function ScrollBar({
orientation === "vertical" && verticalSizeStyles[size], orientation === "vertical" && verticalSizeStyles[size],
orientation === "horizontal" && horizontalSizeStyles[size], orientation === "horizontal" && horizontalSizeStyles[size],
scrollType === "always" && "opacity-100", scrollType === "always" && "opacity-100",
scrollType === "scroll" && scrollType === "scroll" && "data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75",
"data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75",
scrollType === "hover" && "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75", scrollType === "hover" && "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75",
className className
)} )}
@ -90,7 +89,7 @@ const ScrollBar = React.memo(function ScrollBar({
<BaseScrollArea.Thumb <BaseScrollArea.Thumb
data-slot="scroll-area-thumb" data-slot="scroll-area-thumb"
className={cn( className={cn(
"relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active data-[scrolling]:bg-custom-scrollbar-active", "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active data-[scrolling]:bg-scrollbar-thumb-active",
thumbSizeStyles[size] thumbSizeStyles[size]
)} )}
/> />

View file

@ -30,7 +30,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
type={type} type={type}
name={name} name={name}
className={cn( className={cn(
"block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none", "block rounded-md bg-layer-transparent text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{ {
"rounded-md border-[0.5px]": mode === "primary", "rounded-md border-[0.5px]": mode === "primary",
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary": "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":

View file

@ -31,7 +31,7 @@ export function PasswordInput({
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
className={cn( className={cn(
"w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-placeholder focus:border-transparent transition-all duration-200", "w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
{ {
"border-strong": !error, "border-strong": !error,
"border-red-500": error, "border-red-500": error,

View file

@ -42,7 +42,7 @@ export function ScrollArea(props: TScrollAreaProps) {
> >
<RadixScrollArea.Thumb <RadixScrollArea.Thumb
className={cn( className={cn(
"relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active", "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-surface-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
thumbSizeStyles[size] thumbSizeStyles[size]
)} )}
/> />
@ -56,7 +56,7 @@ export function ScrollArea(props: TScrollAreaProps) {
> >
<RadixScrollArea.Thumb <RadixScrollArea.Thumb
className={cn( className={cn(
"relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active", "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover:bg-scrollbar-thumb-surface-hover group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active",
thumbSizeStyles[size] thumbSizeStyles[size]
)} )}
/> />