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

Author: aaryan610

apps/web/core/components/pages/modals/page-form.tsx

@@ -67,9 +67,9 @@ export function PageForm(props: Props) {
             isOpen={isOpen}
             handleToggle={(val: boolean) => setIsOpen(val)}
             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={
-              <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 ? (
                     <Logo logo={formData?.logo_props} size={18} type="lucide" />

packages/propel/src/scrollarea/scrollarea.tsx

@@ -80,8 +80,7 @@ const ScrollBar = React.memo(function ScrollBar({
         orientation === "vertical" && verticalSizeStyles[size],
         orientation === "horizontal" && horizontalSizeStyles[size],
         scrollType === "always" && "opacity-100",
-        scrollType === "scroll" &&
-          "data-[scrolling]:opacity-100  data-[scrolling]:delay-0 data-[scrolling]:duration-75",
+        scrollType === "scroll" && "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",
         className
       )}
@@ -90,7 +89,7 @@ const ScrollBar = React.memo(function ScrollBar({
       <BaseScrollArea.Thumb
         data-slot="scroll-area-thumb"
         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]
         )}
       />

packages/ui/src/form-fields/input.tsx

@@ -30,7 +30,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
       type={type}
       name={name}
       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-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":

packages/ui/src/form-fields/password/password-input.tsx

@@ -31,7 +31,7 @@ export function PasswordInput({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         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-red-500": error,

packages/ui/src/scroll-area.tsx

@@ -42,7 +42,7 @@ export function ScrollArea(props: TScrollAreaProps) {
       >
         <RadixScrollArea.Thumb
           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]
           )}
         />
@@ -56,7 +56,7 @@ export function ScrollArea(props: TScrollAreaProps) {
       >
         <RadixScrollArea.Thumb
           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]
           )}
         />