feat: add background-color transitions to table color changes (#4491)

* feat: add background-color transitions to table color changes:

* pr review--use theme transition info

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -12,7 +12,7 @@ import { useAtomValue } from 'jotai/utils'
 import { ReactNode } from 'react'
 import { ArrowDown, ArrowUp, Heart } from 'react-feather'
 import { Link } from 'react-router-dom'
-import styled, { useTheme } from 'styled-components/macro'
+import styled, { css, useTheme } from 'styled-components/macro'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
 import {
@@ -41,24 +41,37 @@ const Cell = styled.div`
   align-items: center;
   justify-content: center;
 `
-const StyledTokenRow = styled.div<{ first?: boolean; last?: boolean }>`
-  width: 100%;
-  height: 60px;
+const StyledTokenRow = styled.div<{ first?: boolean; last?: boolean; loading?: boolean }>`
+  background-color: transparent;
   display: grid;
-  grid-template-columns: 1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr;
   font-size: 15px;
+  grid-template-columns: 1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr;
+  height: 60px;
   line-height: 24px;
-
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
   min-width: 390px;
   padding-top: ${({ first }) => (first ? '4px' : '0px')};
   padding-bottom: ${({ last }) => (last ? '4px' : '0px')};
   padding-left: 12px;
   padding-right: 12px;
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => css`background-color ${duration.medium} ${timing.ease}`};
+  width: 100%;
 
   &:hover {
-    background-color: ${({ theme }) => theme.accentActionSoft};
-    ${({ last }) => last && 'border-radius: 0px 0px 8px 8px;'}
+    ${({ loading, theme }) =>
+      !loading &&
+      css`
+        background-color: ${theme.accentActionSoft};
+      `}
+    ${({ last }) =>
+      last &&
+      css`
+        border-radius: 0px 0px 8px 8px;
+      `}
   }
 
   @media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
@@ -147,6 +160,11 @@ const DataCell = styled(Cell)<{ sortable: boolean }>`
   justify-content: flex-end;
   min-width: 80px;
   user-select: ${({ sortable }) => (sortable ? 'none' : 'unset')};
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => css`background-color ${duration.medium} ${timing.ease}`};
 
   &:hover {
     color: ${({ theme, sortable }) => sortable && theme.white};
@@ -343,9 +361,8 @@ function HeaderCell({
 
 /* Token Row: skeleton row component */
 export function TokenRow({
-  address,
-  header,
   favorited,
+  header,
   listNumber,
   tokenInfo,
   price,
@@ -353,20 +370,19 @@ export function TokenRow({
   marketCap,
   volume,
   sparkLine,
-  first,
-  last,
+  ...rest
 }: {
-  address: ReactNode
-  header: boolean
   favorited: ReactNode
+  first?: boolean
+  header: boolean
   listNumber: ReactNode
-  tokenInfo: ReactNode
+  loading?: boolean
+  marketCap: ReactNode
   price: ReactNode
   percentChange: ReactNode
-  marketCap: ReactNode
-  volume: ReactNode
   sparkLine: ReactNode
-  first?: boolean
+  tokenInfo: ReactNode
+  volume: ReactNode
   last?: boolean
 }) {
   const rowCells = (
@@ -382,18 +398,13 @@ export function TokenRow({
     </>
   )
   if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow>
-  return (
-    <StyledTokenRow first={first} last={last}>
-      {rowCells}
-    </StyledTokenRow>
-  )
+  return <StyledTokenRow {...rest}>{rowCells}</StyledTokenRow>
 }
 
 /* Header Row: top header row component for table */
 export function HeaderRow() {
   return (
     <TokenRow
-      address={null}
       header={true}
       favorited={null}
       listNumber="#"
@@ -411,10 +422,10 @@ export function HeaderRow() {
 export function LoadingRow() {
   return (
     <TokenRow
-      address={null}
-      header={false}
       favorited={null}
+      header={false}
       listNumber={<SmallLoadingBubble />}
+      loading
       tokenInfo={
         <>
           <IconLoadingBubble />
@@ -476,7 +487,6 @@ export default function LoadedRow({
       onClick={() => sendAnalyticsEvent(EventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)}
     >
       <TokenRow
-        address={tokenAddress}
         header={false}
         favorited={
           <ClickFavorited

src/theme/index.tsx

@@ -43,6 +43,7 @@ const transitions = {
     fast: 125,
   },
   timing: {
+    ease: 'ease',
     in: 'ease-in',
     out: 'ease-out',
     inOut: 'ease-in-out',

src/theme/styled.d.ts

@@ -149,6 +149,7 @@ declare module 'styled-components/macro' {
         fast: number
       }
       timing: {
+        ease: string
         in: string
         out: string
         inOut: string