Merge pull request #680 from oasisprotocol/mz/clean

Clean up theme.spacing usage and React imports
oasisprotocol · Jul 6, 2023 · 09e21ff · 09e21ff
2 parents 7c1995d + 4252c0e
commit 09e21ff
Show file tree

Hide file tree

Showing 22 changed files with 38 additions and 37 deletions.
diff --git a/.changelog/680.internal.md b/.changelog/680.internal.md
@@ -0,0 +1 @@
+Clean up theme.spacing usage and React imports
diff --git a/src/app/components/Account/index.tsx b/src/app/components/Account/index.tsx
@@ -26,10 +26,10 @@ import { TokenLink } from '../Tokens/TokenLink'
 export const StyledAvatarContainer = styled('dt')(({ theme }) => ({
   '&&': {
     [theme.breakpoints.down('sm')]: {
-      padding: `${theme.spacing(2)} 0`,
+      padding: theme.spacing(2, 0),
     },
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing(3)} 0`,
+      padding: theme.spacing(3, 0),
     },
   },
 }))

diff --git a/src/app/components/ContractVerificationIcon/index.tsx b/src/app/components/ContractVerificationIcon/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'

diff --git a/src/app/components/NonScrollingRouterLink/index.tsx b/src/app/components/NonScrollingRouterLink/index.tsx
@@ -1,6 +1,6 @@
-import React, { ComponentPropsWithRef, FC } from 'react'
+import { forwardRef, ComponentPropsWithRef, FC } from 'react'
 import { Link } from 'react-router-dom'
 
-export const NonScrollingRouterLink: FC<ComponentPropsWithRef<typeof Link>> = React.forwardRef(
-  (props, ref) => <Link {...props} preventScrollReset ref={ref} />,
-)
+export const NonScrollingRouterLink: FC<ComponentPropsWithRef<typeof Link>> = forwardRef((props, ref) => (
+  <Link {...props} preventScrollReset ref={ref} />
+))
diff --git a/src/app/components/PageLayout/Footer.tsx b/src/app/components/PageLayout/Footer.tsx
@@ -15,10 +15,10 @@ const FooterBox = styled(Box)(({ theme }) => ({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
-  padding: `${theme.spacing(5)} ${theme.spacing(4)}`,
+  padding: theme.spacing(5, 4),
   [theme.breakpoints.up('sm')]: {
     flex: '0 1 100%',
-    padding: `${theme.spacing(5)} ${theme.spacing(0)}`,
+    padding: theme.spacing(5, 0),
   },
 }))
 

diff --git a/src/app/components/PageLayout/NetworkSelector.tsx b/src/app/components/PageLayout/NetworkSelector.tsx
@@ -20,7 +20,7 @@ export const StyledBox = styled(Box)(({ theme }) => ({
   borderColor: COLORS.brandExtraDark,
   borderStyle: 'solid',
   borderWidth: '1px 1px 1px 0',
-  padding: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)} ${theme.spacing(2)}`,
+  padding: theme.spacing(2, 3, 2, 2),
   borderTopRightRadius: '9px',
   borderBottomRightRadius: '9px',
   boxShadow: `inset 0px 4px 4px rgba(34, 47, 63, 0.24)`,

diff --git a/src/app/components/Select/index.tsx b/src/app/components/Select/index.tsx
@@ -38,7 +38,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
 const StyledListbox = styled('ul')(({ theme }) => ({
   boxSizing: 'border-box',
   padding: theme.spacing(0),
-  margin: `${theme.spacing(3)} ${theme.spacing(0)}`,
+  margin: theme.spacing(3, 0),
   minWidth: '135px',
   borderRadius: '12px',
   overflow: 'auto',

diff --git a/src/app/components/StickyAlert/index.tsx b/src/app/components/StickyAlert/index.tsx
@@ -10,9 +10,9 @@ export const StickyAlert = styled(Alert)(({ theme }) => ({
   fontSize: '14px',
   lineHeight: '18px',
   [theme.breakpoints.up('sm')]: {
-    padding: `${theme.spacing(4)}} 0`,
+    padding: theme.spacing(4, 0),
   },
   [theme.breakpoints.up('md')]: {
-    padding: `${theme.spacing(3)}} 0`,
+    padding: theme.spacing(3, 0),
   },
 }))
diff --git a/src/app/components/StyledDescriptionList/index.tsx b/src/app/components/StyledDescriptionList/index.tsx
@@ -47,10 +47,10 @@ export const StyledDescriptionList = styled(InlineDescriptionList, {
       boxShadow: 'none',
     },
     [theme.breakpoints.down('sm')]: {
-      padding: `${theme.spacing(3)} 0`,
+      padding: theme.spacing(3, 0),
     },
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing(4)} 0`,
+      padding: theme.spacing(4, 0),
     },
   },
   dt: {
@@ -64,7 +64,7 @@ export const StyledDescriptionList = styled(InlineDescriptionList, {
   },
   ...(standalone && {
     '&&': {
-      padding: `${theme.spacing(3)} ${theme.spacing(4)}`,
+      padding: theme.spacing(3, 4),
       backgroundColor: COLORS.white,
       marginBottom: theme.spacing(4),
       borderRadius: '12px',

diff --git a/src/app/components/SubPageCard/index.tsx b/src/app/components/SubPageCard/index.tsx
@@ -24,7 +24,7 @@ const StyledBox = styled(Box, {
   ({ featured, theme }) => css`
     ${featured && {
       margin: `-${theme.spacing(5)} -${theme.spacing(6)} ${theme.spacing(5)}`,
-      padding: `${theme.spacing(5)} ${theme.spacing(6)} ${theme.spacing(4)}`,
+      padding: theme.spacing(5, 6, 4),
       borderRadius: '12px',
       boxShadow: '-20px 4px 40px rgba(34, 47, 63, 0.24)',
     }};

diff --git a/src/app/components/ThemeByNetwork/index.tsx b/src/app/components/ThemeByNetwork/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode } from 'react'
 import { Network } from '../../../types/network'
 import { ThemeProvider } from '@mui/material/styles'
 import { getThemesForNetworks } from '../../../styles/theme'

diff --git a/src/app/components/TransactionEncryptionStatus/index.tsx b/src/app/components/TransactionEncryptionStatus/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import LockIcon from '@mui/icons-material/Lock'
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred'

diff --git a/src/app/components/TransactionStatusIcon/index.tsx b/src/app/components/TransactionStatusIcon/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'

diff --git a/src/app/components/Transactions/LogEvent.tsx b/src/app/components/Transactions/LogEvent.tsx
@@ -1,5 +1,5 @@
 import { EvmEventParam, RuntimeEvent, RuntimeEventType } from '../../../oasis-nexus/api'
-import React, { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyledDescriptionList } from '../StyledDescriptionList'
 import Divider from '@mui/material/Divider'

diff --git a/src/app/components/Transactions/Logs.tsx b/src/app/components/Transactions/Logs.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { Layer, RuntimeEvent, RuntimeTransaction, useGetRuntimeEvents } from '../../../oasis-nexus/api'
 import { AppErrors } from '../../../types/errors'
 import { TransactionLogEvent } from './LogEvent'

diff --git a/src/app/components/charts/Tooltip.tsx b/src/app/components/charts/Tooltip.tsx
@@ -7,7 +7,7 @@ import { COLORS } from '../../../styles/theme/colors'
 export const StyledPaper = styled(Paper)(({ theme }) => ({
   display: 'inline-flex',
   flexDirection: 'column',
-  padding: `${theme.spacing(3)} ${theme.spacing(5)}`,
+  padding: theme.spacing(3, 5),
   background: COLORS.spaceCadet,
   boxShadow: '0 4px 4px rgba(0, 0, 0, 0.25)',
   borderRadius: '8px',

diff --git a/src/app/pages/AccountDetailsPage/CardEmptyState.tsx b/src/app/pages/AccountDetailsPage/CardEmptyState.tsx
@@ -14,10 +14,10 @@ const StyledBox = styled(Box)(({ theme }) => ({
   gap: theme.spacing(4),
   textAlign: 'center',
   [theme.breakpoints.down('sm')]: {
-    padding: `${theme.spacing(5)} ${theme.spacing(2)} ${theme.spacing(6)}`,
+    padding: theme.spacing(5, 2, 6),
   },
   [theme.breakpoints.up('sm')]: {
-    padding: `${theme.spacing(6)} ${theme.spacing(4)} ${theme.spacing(7)}`,
+    padding: theme.spacing(6, 4, 7),
   },
 }))
 

diff --git a/src/app/pages/HomePage/Graph/NetworkSelector/index.tsx b/src/app/pages/HomePage/Graph/NetworkSelector/index.tsx
@@ -26,7 +26,7 @@ const StyledBox = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.layout.primaryBackground,
   border: `solid 3px ${theme.palette.layout.lightBorder}`,
   borderRadius: '45px',
-  padding: `${theme.spacing(3)} ${theme.spacing(4)}`,
+  padding: theme.spacing(3, 4),
   display: 'inline-flex',
   alignItems: 'center',
 }))
@@ -35,7 +35,7 @@ export const SelectNetworkButton = styled(Button, {
   shouldForwardProp: prop => prop !== 'isSelectedNetwork',
 })<{ isSelectedNetwork: boolean }>(({ isSelectedNetwork, theme }) => ({
   height: '30px',
-  padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
+  padding: theme.spacing(2, 3),
   textTransform: 'capitalize',
   fontSize: '16px',
   borderRadius: '9px',

diff --git a/src/app/pages/ParatimeDashboardPage/RosePriceCard.tsx b/src/app/pages/ParatimeDashboardPage/RosePriceCard.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import { styled } from '@mui/material/styles'

diff --git a/src/app/pages/ParatimeDashboardPage/TopTokens.tsx b/src/app/pages/ParatimeDashboardPage/TopTokens.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'

diff --git a/src/app/pages/SearchResultsPage/index.tsx b/src/app/pages/SearchResultsPage/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { useParamSearch } from '../../components/Search/search-utils'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { useSearch } from './hooks'

diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -190,7 +190,7 @@ export const defaultTheme = createTheme({
       styleOverrides: {
         root: ({ theme }) => ({
           alignItems: 'center',
-          padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
+          padding: theme.spacing(2, 3),
           borderRadius: 10,
         }),
         icon: {
@@ -372,14 +372,14 @@ export const defaultTheme = createTheme({
           boxShadow: 'none',
           [theme.breakpoints.down('sm')]: {
             marginBottom: theme.spacing(4),
-            padding: `${theme.spacing(4)} ${theme.spacing(4)} 0`,
+            padding: theme.spacing(4, 4, 0),
             ':has(table)': {
               paddingRight: 0,
             },
           },
           [theme.breakpoints.up('sm')]: {
             marginBottom: theme.spacing(5),
-            padding: `${theme.spacing(5)} ${theme.spacing(5)} 0`,
+            padding: theme.spacing(5, 5, 0),
           },
         }),
       },
@@ -499,7 +499,7 @@ export const defaultTheme = createTheme({
       styleOverrides: {
         paperAnchorTop: ({ theme }) => ({
           borderRadius: '0 0 12px 12px',
-          padding: `${theme.spacing(4)} 5%`,
+          padding: theme.spacing(4, '5%'),
         }),
         paper: ({ theme }) => ({
           [theme.breakpoints.down('md')]: {
@@ -566,7 +566,7 @@ export const defaultTheme = createTheme({
           borderColor: COLORS.antiFlashWhite2,
           color: COLORS.grayExtraDark,
           whiteSpace: 'nowrap',
-          padding: `${theme.spacing(4)} ${theme.spacing(3)}`,
+          padding: theme.spacing(4, 3),
           a: {
             color: COLORS.brandDark,
             fontWeight: 700,
@@ -772,10 +772,10 @@ export const defaultTheme = createTheme({
           borderTopRightRadius: 12,
           textTransform: 'capitalize',
           [theme.breakpoints.down('sm')]: {
-            padding: `${theme.spacing(3)} ${theme.spacing(4)}`,
+            padding: theme.spacing(3, 4),
           },
           [theme.breakpoints.up('sm')]: {
-            padding: `${theme.spacing(4)} ${theme.spacing(5)}`,
+            padding: theme.spacing(4, 5),
           },
         }),
       },