feat: fade in text on details page (#4773)

src/components/Tokens/TokenDetails/About.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
+import { textFadeIn } from 'theme/animations'
 
 import Resource from './Resource'
 
@@ -49,6 +50,7 @@ const TRUNCATE_CHARACTER_COUNT = 400
 export const AboutContainer = styled.div`
   gap: 16px;
   padding: 24px 0px;
+  ${textFadeIn}
 `
 export const AboutHeader = styled.span`
   font-size: 28px;

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -11,6 +11,7 @@ import { TopToken } from 'graphql/data/TopTokens'
 import { CHAIN_NAME_TO_CHAIN_ID } from 'graphql/data/util'
 import useCurrencyLogoURIs, { getTokenLogoURI } from 'lib/hooks/useCurrencyLogoURIs'
 import styled from 'styled-components/macro'
+import { textFadeIn } from 'theme/animations'
 import { isAddress } from 'utils'
 
 import { useIsFavorited, useToggleFavorite } from '../state'
@@ -42,6 +43,7 @@ export const TokenNameCell = styled.div`
   font-size: 20px;
   line-height: 28px;
   align-items: center;
+  ${textFadeIn}
 `
 const TokenSymbol = styled.span`
   text-transform: uppercase;

src/components/Tokens/TokenDetails/StatsSection.tsx

 import { Trans } from '@lingui/macro'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
+import { textFadeIn } from 'theme/animations'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
 export const StatWrapper = styled.div`
@@ -16,6 +17,7 @@ export const StatWrapper = styled.div`
 export const TokenStatsSection = styled.div`
   display: flex;
   flex-wrap: wrap;
+  ${textFadeIn}
 `
 export const StatPair = styled.div`
   display: flex;

src/theme/animations.ts

+import { css, keyframes } from 'styled-components/macro'
+
+const transitions = {
+  duration: {
+    slow: '500ms',
+    medium: '250ms',
+    fast: '125ms',
+  },
+  timing: {
+    ease: 'ease',
+    in: 'ease-in',
+    out: 'ease-out',
+    inOut: 'ease-in-out',
+  },
+}
+
+export const fadeIn = keyframes`
+from {
+  opacity: 0;
+}
+to {
+  opacity: 1;
+}
+`
+
+export const textFadeIn = css`
+  animation: ${fadeIn} ${transitions.duration.fast} ${transitions.timing.in};
+`

src/theme/index.tsx

@@ -36,6 +36,7 @@ const BREAKPOINTS = {
   xxxl: 1920,
 }
 
+// deprecated - please use the animations.ts file
 const transitions = {
   duration: {
     slow: '500ms',
@@ -272,11 +273,10 @@ function getTheme(darkMode: boolean, isNewColorsEnabled: boolean): DefaultTheme
     // media queries
     deprecated_mediaWidth: deprecated_mediaWidthTemplates,
 
-    //breakpoints
+    // deprecated - please use hardcoded exported values instead of
+    // adding to the theme object
     breakpoint: BREAKPOINTS,
-
     transition: transitions,
-
     opacity: opacities,
 
     // css snippets