use styled components; preserve next/link styling and extract style c… (#2030)

* use styled components; preserve next/link styling and extract style constants

* revert changes in LinkButton.tsx

---------

Co-authored-by: Katina Anachkova <[email protected]>

Author: katina-anachkova

src/components/client/auth/profile/MyCampaignsTable.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'next-i18next'
 import { useState, useMemo } from 'react'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { Tooltip, Button, Box, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 import { getExactDateTime, getRelativeDate } from 'common/util/date'
 import { money } from 'common/util/money'
@@ -30,6 +31,16 @@ const classes = {
   boxTitle: `${PREFIX}-boxTitle`,
 }
 
+const StyledDataGrid = styled(DataGrid)({
+  background: theme.palette.common.white,
+  border: 'none',
+  width: 'calc(100% - 48px)',
+  left: '24px',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  borderRadius: '0 0 13px 13px',
+})
+
 export default function MyCampaingsTable() {
   const { t, i18n } = useTranslation()
   const [viewId, setViewId] = useState<string | undefined>()
@@ -240,16 +251,7 @@ export default function MyCampaingsTable() {
             <Typography className={classes.h3}>{t('profile:myCampaigns.history')}</Typography>
           </Box>
           <ProfileTab name={ProfileTabs.myCampaigns}>
-            <DataGrid
-              style={{
-                background: theme.palette.common.white,
-                border: 'none',
-                width: 'calc(100% - 48px)',
-                left: '24px',
-                overflowY: 'auto',
-                overflowX: 'hidden',
-                borderRadius: '0 0 13px 13px',
-              }}
+            <StyledDataGrid
               rows={campaigns || []}
               columns={columns}
               initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}

src/components/common/LinkButton.tsx

@@ -9,18 +9,20 @@ export type NextLinkProps = ButtonProps &
 const LinkButton = (
   { href, as, prefetch, legacyBehavior, locale, disabled, ...props }: NextLinkProps,
   ref: Ref<LinkRef>,
-) => (
-  <Link
-    href={href}
-    as={as}
-    prefetch={prefetch}
-    locale={locale}
-    passHref
-    tabIndex={disabled ? -1 : 0}
-    legacyBehavior={legacyBehavior}
-    style={{ pointerEvents: disabled ? 'none' : 'all' }}>
-    <Button tabIndex={-1} ref={ref} disabled={disabled} {...props} />
-  </Link>
-)
+) => {
+  return (
+    <Link
+      href={href}
+      as={as}
+      prefetch={prefetch}
+      locale={locale}
+      passHref
+      tabIndex={disabled ? -1 : 0}
+      legacyBehavior={legacyBehavior}
+      style={{ pointerEvents: disabled ? 'none' : 'all' }}>
+      <Button tabIndex={-1} ref={ref} disabled={disabled} {...props} />
+    </Link>
+  )
+}
 
 export default forwardRef(LinkButton)

src/components/common/LinkMenuItem.tsx

@@ -5,15 +5,12 @@ import theme from 'common/theme'
 
 export type LinkRef = HTMLAnchorElement
 export type NextLinkProps = MenuItemProps & Pick<LinkProps, 'href' | 'as' | 'prefetch' | 'locale'>
+
 export default function LinkMenuItem({ href, as, prefetch, locale, ...props }: NextLinkProps) {
+  const style = { color: theme.palette.text.primary }
+
   return (
-    <Link
-      as={as}
-      passHref
-      href={href}
-      prefetch={prefetch}
-      locale={locale}
-      style={{ color: theme.palette.text.primary }}>
+    <Link as={as} passHref href={href} prefetch={prefetch} locale={locale} style={style}>
       <MenuItem {...props} />
     </Link>
   )

src/components/common/campaign-types/grid/Grid.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next'
 import { Box, Typography } from '@mui/material'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { observer } from 'mobx-react'
-
+import { styled } from '@mui/material/styles'
 import { routes } from 'common/routes'
 import GridActions from 'components/admin/GridActions'
 import { CampaignTypesResponse } from 'gql/campaign-types'
@@ -15,6 +15,18 @@ import { ModalStore } from '../CampaignTypesPage'
 import DetailsModal from './DetailsModal'
 import DeleteModal from './DeleteModal'
 
+const StyledDataGrid = styled(DataGrid)({
+  background: theme.palette.common.white,
+  position: 'absolute',
+  height: 'calc(100vh - 300px)',
+  border: 'none',
+  width: 'calc(100% - 48px)',
+  left: '24px',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  borderRadius: '0 0 13px 13px',
+})
+
 export default observer(function Grid() {
   const [paginationModel, setPaginationModel] = useState({
     pageSize: 10,
@@ -82,18 +94,7 @@ export default observer(function Grid() {
   return (
     <>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           pageSizeOptions={[5, 10]}

src/components/common/file-upload/FileUpload.tsx

@@ -1,4 +1,9 @@
-import { Button } from '@mui/material'
+import Button from '@mui/material/Button'
+import { styled } from '@mui/material/styles'
+
+const Input = styled('input')({
+  display: 'none',
+})
 
 function FileUpload({
   onUpload,
@@ -11,11 +16,10 @@ function FileUpload({
 }) {
   return (
     <label htmlFor="contained-button-file">
-      <input
+      <Input
         id="contained-button-file"
         multiple
         type="file"
-        style={{ display: 'none' }}
         onChange={(e) => onUpload([...(e.target.files as FileList)])}
         {...rest}
       />

src/components/common/file-upload/UploadedFilesList.tsx

@@ -12,7 +12,7 @@ import {
 import { useTranslation } from 'next-i18next'
 import { createContext, useContext, useEffect, useState } from 'react'
 import CenteredSpinner from '../CenteredSpinner'
-
+import { styled } from '@mui/material/styles'
 export interface FilesListContext {
   deleteMutation: (file: UploadedFile) => Promise<unknown>
   files: UploadedFile[]
@@ -100,6 +100,27 @@ export function FilePreview(f: UploadedFile) {
   const [display, setDisplay] = useState<'block' | 'none'>('none')
   const [blobUrl, setBlobUrl] = useState<string | undefined>()
 
+  const StyledDiv = styled('div')({
+    position: 'fixed',
+    top: '5vw',
+    left: '5vh',
+    boxShadow: '2px 4px 5px',
+    width: '90vw',
+    height: '90vh',
+    zIndex: 99999,
+    display,
+    backgroundColor: 'white',
+  })
+
+  const FixedDimentionsDiv = styled('div')({
+    width: '100%',
+    height: '100%',
+  })
+
+  const StyledIFrame = styled('iframe')({
+    width: '100%',
+    height: '100%',
+  })
   useEffect(() => {
     if (fetch) {
       setDisplay('block')
@@ -118,29 +139,13 @@ export function FilePreview(f: UploadedFile) {
           <Preview />
         </IconButton>
       </Tooltip>
-      <div
-        style={{
-          position: 'fixed',
-          top: '5vw',
-          left: '5vh',
-          boxShadow: '2px 4px 5px',
-          width: '90vw',
-          height: '90vh',
-          zIndex: 99999,
-          display,
-          backgroundColor: 'white',
-        }}>
+      <StyledDiv>
         {display === 'block' ? (
-          <iframe
-            id={f.id}
-            src={blobUrl}
-            allowFullScreen={true}
-            style={{ width: '100%', height: '100%' }}
-          />
+          <StyledIFrame id={f.id} src={blobUrl} allowFullScreen={true} />
         ) : (
-          <div style={{ width: '100%', height: '100%' }}>
+          <FixedDimentionsDiv>
             <CenteredSpinner />
-          </div>
+          </FixedDimentionsDiv>
         )}
         <Button
           color="secondary"
@@ -149,7 +154,7 @@ export function FilePreview(f: UploadedFile) {
           onClick={() => setDisplay('none')}>
           <Close />
         </Button>
-      </div>
+      </StyledDiv>
     </>
   )
 }