[FX-5686] Migrate PageContent to TailwindCSS (#4576)

.changeset/lazy-boats-reflect.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-page': patch
+---
+
+- migrate `PageContent` to TailwindCSS

packages/base/Page/src/PageContent/PageContent.tsx

@@ -1,14 +1,12 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { useContext, forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { useSidebar } from '@toptal/picasso-provider'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { PageContext } from '../Page'
 import type { PageContextProps } from '../Page/types'
-import styles from './styles'
+import { getMaxWidthClass } from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Custom components that render content of page */
@@ -17,34 +15,27 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   flex?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPageContent',
-})
-
 export const PageContent = forwardRef<HTMLDivElement, Props>(
   function PageContent(props, ref) {
     const { children, className, style, flex, ...rest } = props
 
-    const classes = useStyles()
     const { width, fullWidth } = useContext<PageContextProps>(PageContext)
     const { hasSidebar } = useSidebar()
 
-    const innerClassName = cx(
-      {
-        [classes.fullWidth]: fullWidth || width === 'full',
-        [classes.wide]: width === 'wide',
-        [classes.flex]: flex,
-      },
-      classes.content
+    const innerClassName = twJoin(
+      'h-full grow bg-[#fcfcfc] bg-clip-content',
+      getMaxWidthClass({ fullWidth, width }),
+      flex && 'flex'
     )
 
     return (
       <div
         {...rest}
         ref={ref}
-        className={cx(
-          classes.root,
-          { [classes.hasSidebar]: hasSidebar },
+        className={twMerge(
+          'flex flex-[1] w-full justify-center',
+          hasSidebar &&
+            'bg-[linear-gradient(90deg,rgb(243,244,246)50%,rgb(252,252,252)50%)]',
           className
         )}
         style={style}

packages/base/Page/src/PageContent/styles.ts

@@ -1,31 +1,13 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+import type { PageContextProps } from '../Page/types'
 
-export default ({ layout, palette }: Theme) =>
-  createStyles({
-    root: {
-      flex: 1,
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-    },
-    content: {
-      height: '100%',
-      flexGrow: 1,
-      maxWidth: layout.contentWidth,
-      backgroundColor: palette.grey.lightest,
-      backgroundClip: 'content-box',
-    },
-    hasSidebar: {
-      background: `linear-gradient(90deg, ${palette.grey.lighter} 50%, ${palette.grey.lightest} 50%)`,
-    },
-    wide: {
-      maxWidth: layout.contentWidthWide,
-    },
-    fullWidth: {
-      maxWidth: '100%',
-    },
-    flex: {
-      display: 'flex',
-    },
-  })
+export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
+  if (fullWidth || width === 'full') {
+    return 'max-w-full'
+  }
+
+  if (width === 'wide') {
+    return 'max-w-[90em]'
+  }
+
+  return 'max-w-[75em]'
+}