From 4e7b2ccf951f3d470a9864abf0ed1f84f583b457 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 15 Feb 2024 17:10:05 +1100
Subject: [PATCH] feat: fade in error colors

---
 ts/components/inputs/SessionInput2.tsx | 38 +++++++++++++++-----------
 ts/themes/globals.tsx                  |  2 ++
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/ts/components/inputs/SessionInput2.tsx b/ts/components/inputs/SessionInput2.tsx
index c6c656744..4fae50867 100644
--- a/ts/components/inputs/SessionInput2.tsx
+++ b/ts/components/inputs/SessionInput2.tsx
@@ -1,7 +1,9 @@
 import { ChangeEvent, useState } from 'react';
 
+import { motion } from 'framer-motion';
 import { isEmpty } from 'lodash';
 import styled from 'styled-components';
+import { THEME_GLOBALS } from '../../themes/globals';
 import { Noop } from '../../types/Util';
 import { useHTMLDirection } from '../../util/i18n';
 import { Flex } from '../basic/Flex';
@@ -26,22 +28,13 @@ const StyledInputContainer = styled(Flex)<{ error: boolean }>`
     }
   }
 
-  ${props =>
-    props.error &&
-    `
-      input {
-        color: var(--danger-color);
-        border-color: var(--danger-color);
-
-        &::placeholder {
-          color: var(--danger-color);
-          opacity: 1;
-        }
-      }
-    `}
+  input::placeholder {
+    transition: opacity var(--default-duration) color var(--default-duration);
+    ${props => props.error && `color: var(--danger-color); opacity: 1;`}
+  }
 `;
 
-const StyledInput = styled.input`
+const StyledInput = styled(motion.input)`
   border: 1px solid var(--input-border-color);
   border-radius: 13px;
   outline: 0;
@@ -61,9 +54,15 @@ const StyledInput = styled.input`
 
 const ErrorItem = (props: { id: string; error: string }) => {
   return (
-    <label htmlFor={props.id} className={'filled error'}>
+    <motion.label
+      htmlFor={props.id}
+      className={'filled error'}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }}
+    >
       {props.error}
-    </label>
+    </motion.label>
   );
 };
 
@@ -148,6 +147,13 @@ export const SessionInput2 = (props: Props) => {
             props.onEnterPressed(inputValue !== '' ? inputValue : undefined);
           }
         }}
+        initial={{
+          borderColor: error && 'var(--input-border-color)',
+        }}
+        animate={{
+          borderColor: error && 'var(--danger-color)',
+        }}
+        transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }}
       />
 
       {enableShowHide && (
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index fbd4d4948..0f8aff083 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -41,6 +41,7 @@ export type ThemeGlobals = {
 
   /* Animations */
   '--default-duration': string;
+  '--default-duration-seconds': number;
 
   /* Colors */
   '--green-color': string;
@@ -127,6 +128,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--search-input-height': '34px',
 
   '--default-duration': '0.25s',
+  '--default-duration-seconds': 0.25, // framer-motion requires a number
 
   '--green-color': COLORS.PRIMARY.GREEN,
   '--blue-color': COLORS.PRIMARY.BLUE,