css animation small refactor

src/components/grid/Cell.tsx

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react'
 import { CharStatus } from '../../lib/statuses'
 import classnames from 'classnames'
 
@@ -8,27 +7,17 @@ type Props = {
 }
 
 export const Cell = ({ value, status }: Props) => {
-  const [cellAnimation, setCellAnimation] = useState('')
-
-  useEffect(() => {
-    if (value !== undefined) {
-      setCellAnimation('cellAnimation')
-    }
-  }, [value])
-
   const classes = classnames(
     'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded',
     {
       'bg-white border-slate-200': !status,
+      'border-black': value && !status,
       'bg-slate-400 text-white border-slate-400': status === 'absent',
       'bg-green-500 text-white border-green-500': status === 'correct',
       'bg-yellow-500 text-white border-yellow-500': status === 'present',
+      'cell-animation': !!value,
     }
   )
 
-  return (
-    <>
-      <div className={`${classes} ${cellAnimation}`}>{value}</div>
-    </>
-  )
+  return <div className={classes}>{value}</div>
 }

src/index.css

@@ -2,10 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-.cellAnimation {
+.cell-animation {
   animation: revealCharCell linear;
   animation-duration: 0.15s;
-  border-color: black;
 }
 
 @keyframes revealCharCell {