Make input fields translucent

HedvigInsurance · Jul 7, 2023 · e120630 · e120630
1 parent 085419f
commit e120630
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 96 deletions.
diff --git a/apps/store/src/components/Combobox/Combobox.tsx b/apps/store/src/components/Combobox/Combobox.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import { useCombobox } from 'downshift'
-import { motion } from 'framer-motion'
 import { Fragment, useState, useMemo, useDeferredValue } from 'react'
 import { ChevronIcon, CrossIconSmall, Text, theme, WarningTriangleIcon } from 'ui'
 import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
@@ -42,7 +41,7 @@ export const Combobox = <Item,>({
   size = 'large',
   ...externalInputProps
 }: Props<Item>) => {
-  const { highlight, animationProps } = useHighlightAnimation()
+  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
 
   const [inputValue, setInputValue] = useState(() => {
     if (defaultSelectedItem) {
@@ -137,14 +136,9 @@ export const Combobox = <Item,>({
   return (
     <Wrapper data-expanded={isExanded}>
       <InputWrapper>
-        <Input
-          {...getInputProps()}
-          {...animationProps}
-          {...externalInputProps}
-          data-expanded={isExanded}
-          data-warning={noOptions}
-          data-size={size}
-        />
+        <InputBackground {...animationProps} data-expanded={isExanded} data-warning={noOptions}>
+          <Input {...getInputProps()} {...externalInputProps} data-size={size} />
+        </InputBackground>
         {internalSelectedItem && (
           <input type="hidden" name={name} value={getFormValue(internalSelectedItem)} />
         )}
@@ -202,14 +196,27 @@ const InputWrapper = styled.div({
   position: 'relative',
 })
 
-const Input = styled(motion.input)({
-  color: theme.colors.textPrimary,
+const InputBackground = styled.div({
   borderRadius: theme.radius.sm,
+  backgroundColor: theme.colors.translucent1,
+
+  '&[data-expanded=true]': {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  '&[data-warning=true]': {
+    borderBottomLeftRadius: theme.radius.sm,
+    borderBottomRightRadius: theme.radius.sm,
+  },
+})
+
+const Input = styled.input({
+  color: theme.colors.textPrimary,
   width: '100%',
   height: '2.5rem',
   paddingLeft: theme.space.md,
   paddingRight: theme.space.xxl,
-  backgroundColor: theme.colors.opaque1,
   fontSize: theme.fontSizes.lg,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -219,16 +226,6 @@ const Input = styled(motion.input)({
     height: '3rem',
     fontSize: theme.fontSizes.xl,
   },
-
-  '&[data-expanded=true]': {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  '&[data-warning=true]': {
-    borderBottomLeftRadius: theme.radius.sm,
-    borderBottomRightRadius: theme.radius.sm,
-  },
 })
 
 const Actions = styled.div({

diff --git a/apps/store/src/components/InputDate/InputDate.tsx b/apps/store/src/components/InputDate/InputDate.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled'
-import { motion } from 'framer-motion'
 import { useTranslation } from 'next-i18next'
 import { ChangeEventHandler, InputHTMLAttributes, useId, useState } from 'react'
 import { ChevronIcon, theme, Text } from 'ui'
@@ -23,7 +22,7 @@ export const InputDate = (props: Props) => {
   const formatter = useFormatter()
 
   const identifier = useId()
-  const { highlight, animationProps } = useHighlightAnimation()
+  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
     setInternalValue(event.target.value)
@@ -77,10 +76,10 @@ export const InputDate = (props: Props) => {
   )
 }
 
-const Wrapper = styled(motion.div)({
+const Wrapper = styled.div({
   position: 'relative',
   borderRadius: theme.radius.sm,
-  backgroundColor: theme.colors.gray100,
+  backgroundColor: theme.colors.translucent1,
   height: '4.5rem',
   width: '100%',
   cursor: 'pointer',

diff --git a/apps/store/src/components/InputSelect/InputSelect.tsx b/apps/store/src/components/InputSelect/InputSelect.tsx
@@ -1,6 +1,5 @@
 import isValidProp from '@emotion/is-prop-valid'
 import styled from '@emotion/styled'
-import { motion } from 'framer-motion'
 import { ChangeEventHandler } from 'react'
 import { ChevronIcon, InputBase, InputBaseProps, theme } from 'ui'
 import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
@@ -30,7 +29,7 @@ export const InputSelect = ({
   size = 'large',
   ...rest
 }: InputSelectProps) => {
-  const { highlight, animationProps } = useHighlightAnimation()
+  const { highlight, animationProps } = useHighlightAnimation<HTMLSelectElement>()
 
   const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
     onChange?.(event)
@@ -85,7 +84,7 @@ type SelectProps = { variantSize: Required<InputSelectProps['size']> }
 
 const elementConfig = { shouldForwardProp: isValidProp }
 const StyledSelect = styled(
-  motion.select,
+  'select',
   elementConfig,
 )<SelectProps>(({ variantSize }) => ({
   color: theme.colors.textPrimary,
@@ -97,7 +96,7 @@ const StyledSelect = styled(
   paddingLeft: theme.space.md,
   paddingRight: theme.space.xxl,
   cursor: 'pointer',
-  backgroundColor: theme.colors.opaque1,
+  backgroundColor: theme.colors.translucent1,
 
   ...(variantSize === 'small' && {
     fontSize: theme.fontSizes.md,

diff --git a/apps/store/src/components/PriceCalculator/ExtraBuildingsField.tsx b/apps/store/src/components/PriceCalculator/ExtraBuildingsField.tsx
@@ -200,7 +200,7 @@ const convertExtraBuilding = (data: Record<string, FormDataEntryValue>): ExtraBu
 const Card = styled(Space)({
   padding: `${theme.space.sm} ${theme.space.md}`,
   borderRadius: theme.radius.sm,
-  backgroundColor: theme.colors.opaque1,
+  backgroundColor: theme.colors.translucent1,
 })
 
 const DialogContent = styled(Dialog.Content)({

diff --git a/apps/store/src/components/PriceCalculator/InputRadio.tsx b/apps/store/src/components/PriceCalculator/InputRadio.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled'
 import * as RadioGroup from '@radix-ui/react-radio-group'
-import { motion } from 'framer-motion'
-import { FormEventHandler, ComponentPropsWithoutRef } from 'react'
+import { type ComponentPropsWithoutRef, type MouseEventHandler } from 'react'
 import { Space, Text, theme } from 'ui'
 import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
 import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
@@ -17,31 +16,33 @@ type RootProps = {
 }
 
 export const Root = ({ children, label, onValueChange, ...props }: RootProps) => {
-  const { highlight, animationProps } = useHighlightAnimation()
+  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
 
   const handleValueChange = (value: string) => {
     highlight()
     onValueChange?.(value)
   }
 
   return (
-    <Card y={0.5} {...animationProps}>
-      <Text size="xs" color="textSecondary">
-        {label}
-      </Text>
-      <RadioGroup.Root onValueChange={handleValueChange} aria-label={label} {...props}>
-        <SpaceFlex space={1} align="center">
-          {children}
-        </SpaceFlex>
-      </RadioGroup.Root>
+    <Card {...animationProps}>
+      <Space y={0.5}>
+        <Text size="xs" color="textSecondary">
+          {label}
+        </Text>
+        <RadioGroup.Root onValueChange={handleValueChange} aria-label={label} {...props}>
+          <SpaceFlex space={1} align="center">
+            {children}
+          </SpaceFlex>
+        </RadioGroup.Root>
+      </Space>
     </Card>
   )
 }
 
-const Card = styled(motion(Space))({
+const Card = styled.div({
   padding: `${theme.space.sm} ${theme.space.md}`,
   borderRadius: theme.radius.sm,
-  backgroundColor: theme.colors.gray100,
+  backgroundColor: theme.colors.translucent1,
 })
 
 type ItemProps = {
@@ -107,17 +108,24 @@ const StyledHorizontalRoot = styled(RadioGroup.Root)({
   gap: theme.space.xxs,
 })
 
-export const HorizontalItem = ({ onChange, ...props }: ItemProps) => {
-  const handleChange: FormEventHandler<HTMLButtonElement> = (event) => {
-    onChange?.(event)
+export const HorizontalItem = ({ onClick, ...props }: ItemProps) => {
+  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    highlight()
+    onClick?.(event)
   }
 
-  return <StyledHorizontalItem {...props} onChange={handleChange} />
+  return (
+    <StyledHorizontalItem {...animationProps}>
+      <Item {...props} onClick={handleClick} />
+    </StyledHorizontalItem>
+  )
 }
 
-const StyledHorizontalItem = styled(Item)({
+const StyledHorizontalItem = styled.div({
   cursor: 'pointer',
   padding: `${theme.space.sm} ${theme.space.md}`,
   borderRadius: theme.radius.sm,
-  backgroundColor: theme.colors.gray100,
+  backgroundColor: theme.colors.translucent1,
 })
diff --git a/apps/store/src/components/PriceCalculator/StepperInput/StepperInput.tsx b/apps/store/src/components/PriceCalculator/StepperInput/StepperInput.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled'
-import { motion } from 'framer-motion'
 import { ChangeEventHandler, MouseEventHandler, useState } from 'react'
 import { MinusIcon, PlusIcon, theme } from 'ui'
 import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
@@ -24,7 +23,7 @@ type Props = {
 export const StepperInput = (props: Props) => {
   const { max, min = 0, value, defaultValue, label, optionLabel, ...inputProps } = props
   const [internalValue, setInternalValue] = useState(value || defaultValue || min)
-  const { highlight, animationProps } = useHighlightAnimation()
+  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
 
   const increment: MouseEventHandler = (event) => {
     event.preventDefault()
@@ -98,7 +97,7 @@ export const StepperInput = (props: Props) => {
   )
 }
 
-const Wrapper = styled(motion.div)({
+const Wrapper = styled.div({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
@@ -108,7 +107,7 @@ const Wrapper = styled(motion.div)({
 
   paddingInline: theme.space.md,
   borderRadius: theme.radius.sm,
-  backgroundColor: theme.colors.gray100,
+  backgroundColor: theme.colors.translucent1,
 })
 
 const StyledSelect = styled.select({

diff --git a/apps/store/src/components/TextField/TextField.tsx b/apps/store/src/components/TextField/TextField.tsx
@@ -1,6 +1,5 @@
 import { keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
-import { motion } from 'framer-motion'
 import {
   ChangeEventHandler,
   InputHTMLAttributes,
@@ -42,7 +41,7 @@ export const TextField = (props: Props) => {
     ...inputProps
   } = props
   const [value, setValue] = useState(defaultValue || '')
-  const { highlight, animationProps } = useHighlightAnimation()
+  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
   const generatedId = useId()
   const identifier = id || generatedId
 
@@ -133,7 +132,7 @@ const warningAnimation = keyframes({
     color: theme.colors.signalAmberText,
   },
   '100%': {
-    backgroundColor: theme.colors.gray100,
+    backgroundColor: theme.colors.translucent1,
     color: theme.colors.textPrimary,
   },
 })
@@ -147,13 +146,13 @@ const warningColorAnimation = keyframes({
   },
 })
 
-const BaseWrapper = styled(motion.div)({
+const BaseWrapper = styled.div({
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
   borderRadius: theme.radius.sm,
-  backgroundColor: theme.colors.gray100,
+  backgroundColor: theme.colors.translucent1,
   width: '100%',
   cursor: 'text',
 
@@ -192,10 +191,6 @@ const Label = styled.label({
     transform: `translate(calc(${theme.space.md} * 0.2), -0.6rem) scale(0.8)`,
   },
 
-  [`${LargeWrapper}[data-highlight=true] > &, ${SmallWrapper}[data-highlight=true] > &`]: {
-    color: theme.colors.signalGreenText,
-  },
-
   [`${LargeWrapper}[data-warning=true] > &, ${SmallWrapper}[data-warning=true] > &`]: {
     animation: `${warningColorAnimation} 1.5s cubic-bezier(0.2, -2, 0.8, 2) 1`,
   },

diff --git a/apps/store/src/components/ToggleCard/ToggleCard.tsx b/apps/store/src/components/ToggleCard/ToggleCard.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled'
-import { motion } from 'framer-motion'
 import { useId } from 'react'
 import { Space, theme } from 'ui'
 import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
@@ -10,7 +9,7 @@ type Props = SwitchProps & {
 }
 
 export const ToggleCard = ({ id, label, children, onCheckedChange, ...checkboxProps }: Props) => {
-  const { highlight, animationProps } = useHighlightAnimation()
+  const { highlight, animationProps } = useHighlightAnimation<HTMLDivElement>()
   const backupId = useId()
   const identifier = id || backupId
 
@@ -32,7 +31,7 @@ export const ToggleCard = ({ id, label, children, onCheckedChange, ...checkboxPr
   )
 }
 
-const InputWrapper = styled(motion.div)({
+const InputWrapper = styled.div({
   backgroundColor: theme.colors.opaque1,
   padding: theme.space.md,
   borderRadius: theme.radius.sm,