chore: add autocomplete styles, increase animation duration

pixel-point · Nov 29, 2024 · fcd5940 · fcd5940
1 parent 3e06930
commit fcd5940
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
@@ -11,7 +11,8 @@ export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputEleme
 
 const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
   ({ className, type, isExtended, error, wrapperClassName, ...props }, ref) => {
-    const commonClassName = 'bg-transparent placeholder:text-foreground-5 text-foreground-1 px-3 py-1'
+    const commonClassName =
+      'remove-autocomplete-styles bg-transparent placeholder:text-foreground-5 text-foreground-1 px-3 py-1'
     const specificClassNames = isExtended
       ? 'border-none grow focus-visible:outline-none'
       : cn(
@@ -47,7 +48,7 @@ export interface ExtendedInputProps extends BaseInputProps {
 }
 
 const containerClassName =
-  'flex h-9 w-full rounded border border-input text-sm shadow-sm transition-colors placeholder:text-foreground-4 focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+  'remove-autocomplete-styles flex h-9 w-full rounded border border-input text-sm shadow-sm transition-colors placeholder:text-foreground-4 focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
 const leftRightCommonClassName = 'flex items-center text-muted-foreground'
 
 const ExtendedInput = React.forwardRef<HTMLInputElement, ExtendedInputProps>(

diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
@@ -1219,10 +1219,20 @@
   }
 }
 
-/* Text utilities */
-.text-radial-gradient {
-  /* remove hardcode colors */
-  @apply bg-gradient-radial text-primary/70 from-[#CA9AF4]/70 to-[#CA9AF4]/0 bg-clip-text;
+@layer utilities {
+  /*
+    Handy CSS class to prevent Input background color becomes yellow in Chrome on autofill.
+    Works as well with inputs with transparent background.
+
+    https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
+  */
+  .remove-autocomplete-styles:-webkit-autofill,
+  .remove-autocomplete-styles:-webkit-autofill:hover,
+  .remove-autocomplete-styles:-webkit-autofill:focus {
+    transition:
+      background-color 5000s,
+      color 5000s;
+  }
 }
 
 .border-linear {
@@ -1233,6 +1243,12 @@
   mask-composite: exclude;
 }
 
+/* Text utilities */
+.text-radial-gradient {
+  /* remove hardcode colors */
+  @apply bg-gradient-radial text-primary/70 from-[#CA9AF4]/70 to-[#CA9AF4]/0 bg-clip-text;
+}
+
 /* Card utilities */
 .card-auth {
   @apply w-[362px] border-none;

diff --git a/packages/ui/src/views/auth/components/animated-harness-logo.tsx b/packages/ui/src/views/auth/components/animated-harness-logo.tsx
@@ -30,10 +30,10 @@ export function AnimatedHarnessLogo({ theme }: AnimatedHarnessLogoProps) {
 
   return (
     <div className="relative" aria-hidden>
-      <div className={cn(isError && 'rotate-90', 'transition-transform duration-500')}>
+      <div className={cn(isError && 'rotate-90', 'transition-transform duration-700')}>
         <span
           className={cn(
-            'absolute size-[68px] -left-2.5 -z-10 -top-2 rounded-[100%] transition-colors duration-500 blur-[10px] opacity-[.12]',
+            'absolute size-[68px] -left-2.5 -z-10 -top-2 rounded-[100%] transition-colors duration-700 blur-[10px] opacity-[.12]',
             shadowBackground
           )}
         />
@@ -42,13 +42,13 @@ export function AnimatedHarnessLogo({ theme }: AnimatedHarnessLogoProps) {
           <span className="absolute rounded-full size-7 -right-0.5 blur-[10px] bottom-px bg-[#D9D9D9] opacity-5 translate-y-1/2" />
           <span
             className={cn(
-              'absolute rounded-full size-7 -right-0.5 blur-[10px] bottom-px transition-colors duration-500 mix-blend-plus-lighter bg-[#7980D2] opacity-10 translate-y-1/2',
+              'absolute rounded-full size-7 -right-0.5 blur-[10px] bottom-px transition-colors duration-700 mix-blend-plus-lighter bg-[#7980D2] opacity-10 translate-y-1/2',
               smallLightBackground
             )}
           />
           <span
             className={cn(
-              'absolute rounded-full size-14 -top-0.5 blur-[10px] transition-colors duration-500 mix-blend-plus-lighter opacity-20 bg-[#798FD2] left-0.5 -translate-x-1/2 -translate-y-1/2',
+              'absolute rounded-full size-14 -top-0.5 blur-[10px] transition-colors duration-700 mix-blend-plus-lighter opacity-20 bg-[#798FD2] left-0.5 -translate-x-1/2 -translate-y-1/2',
               largeLightBackground
             )}
           />

diff --git a/packages/ui/src/views/layouts/Floating1ColumnLayout.tsx b/packages/ui/src/views/layouts/Floating1ColumnLayout.tsx
@@ -76,7 +76,7 @@ const HighlightedFloatingLayout = ({ children, className, theme = 'blue' }: High
           className={cn(
             'absolute blur-[30px] top-0 left-1/2 -translate-y-1/2 w-[528px] h-[178px] rounded-[100%] opacity-10 mix-blend-plus-lighter',
             '[mask-image:radial-gradient(50%_50%_at_50%_50%,#000_30%,transparent_100%)]',
-            'transition-[transform,background-color] ease-in-out duration-500',
+            'transition-[transform,background-color] ease-in-out duration-700',
             isError ? '-translate-x-[28%]' : ' -translate-x-[65%]',
             topAdditionalGradient
           )}
@@ -85,7 +85,7 @@ const HighlightedFloatingLayout = ({ children, className, theme = 'blue' }: High
           className={cn(
             'absolute blur-[30px] top-3.5 -translate-y-1/2 left-1/2 w-[895px] h-[377px] rounded-[100%] opacity-[0.14]',
             '[mask-image:radial-gradient(50%_50%_at_50%_50%,#000_0%,transparent_100%)]',
-            'transition-[transform,background-color] ease-in-out duration-500',
+            'transition-[transform,background-color] ease-in-out duration-700',
             isError ? '-translate-x-[11%]' : ' -translate-x-[84.5%]',
             topGradient
           )}
@@ -94,7 +94,7 @@ const HighlightedFloatingLayout = ({ children, className, theme = 'blue' }: High
           className={cn(
             'absolute blur-[30px] bottom-0 translate-y-1/2 left-1/2 w-[895px] h-[261px] rounded-[100%] opacity-[0.08]',
             '[mask-image:radial-gradient(50%_50%_at_50%_50%,#000_0%,transparent_100%)]',
-            'transition-[transform,background-color] ease-in-out duration-500',
+            'transition-[transform,background-color] ease-in-out duration-700',
             isError ? '-translate-x-[88.5%]' : ' -translate-x-[104px]',
             bottomGradient
           )}