From 6ac6fbe1c86b402cf5dc81dba16cfbe0d59bdf79 Mon Sep 17 00:00:00 2001
From: Ruslan Sedziukh <ruslan.sedziukh@toptal.com>
Date: Wed, 25 Sep 2024 12:19:39 +0300
Subject: [PATCH] [FX-5602] Migrate PageTopBarMenu to TailwindCSS

---
 .changeset/mean-vans-float.md                 |  5 +++
 .../src/PageTopBarMenu/PageTopBarMenu.tsx     | 36 +++++++++--------
 .../__snapshots__/test.tsx.snap               |  2 +-
 .../base/Page/src/PageTopBarMenu/styles.ts    | 39 -------------------
 4 files changed, 26 insertions(+), 56 deletions(-)
 create mode 100644 .changeset/mean-vans-float.md
 delete mode 100644 packages/base/Page/src/PageTopBarMenu/styles.ts

diff --git a/.changeset/mean-vans-float.md b/.changeset/mean-vans-float.md
new file mode 100644
index 0000000000..2f11f8d352
--- /dev/null
+++ b/.changeset/mean-vans-float.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-page': patch
+---
+
+- migrate `PageTopBarMenu` to TailwindCSS
diff --git a/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx b/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx
index 371b3a19bb..6b9f1bf0ac 100644
--- a/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx
+++ b/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx
@@ -1,9 +1,6 @@
 /* eslint-disable complexity */
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { useContext, forwardRef } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { useBreakpoint } from '@toptal/picasso-utils'
 import { UserBadge } from '@toptal/picasso-user-badge'
@@ -12,12 +9,10 @@ import { Typography } from '@toptal/picasso-typography'
 import { DropdownCompound as Dropdown } from '@toptal/picasso-dropdown'
 import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { PageTopBarContext } from '../PageTopBar'
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTopBarMenu',
-})
+const truncateText =
+  'max-w-[11.5rem] whitespace-nowrap overflow-hidden overflow-ellipsis'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** User full name to display */
@@ -42,8 +37,6 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
       'data-private': dataPrivate,
       ...rest
     } = props
-    const classes = useStyles()
-
     const { variant } = useContext(PageTopBarContext)
     const invert = variant === 'light'
 
@@ -52,7 +45,7 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
     const metaContent =
       typeof meta === 'string' ? (
         <Typography
-          className={classes.truncateText}
+          className={truncateText}
           invert={!isCompactLayout && !invert}
           size='xsmall'
           data-private={dataPrivate}
@@ -70,9 +63,14 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
           size='xxsmall'
           data-private={dataPrivate}
           classes={{
-            root: classes.contentUserBadge,
-            avatar: classes.avatar,
-            name: cx('!font-[400]', classes.truncateText),
+            root: twJoin(
+              'xs:max-lg::p-2',
+              'xs:max-lg:[z-index:1]',
+              'xs:max-lg::bg-white',
+              'xs:max-lg::relative'
+            ),
+            avatar: 'text-[0.9rem]',
+            name: twJoin('font-[400]', truncateText),
           }}
           name={name}
           avatar={avatar}
@@ -98,7 +96,7 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
         center
         size='xxsmall'
         classes={{
-          name: cx('!font-[400]', classes.truncateText),
+          name: twJoin('font-[400]', truncateText),
         }}
         name={name}
         data-private={dataPrivate}
@@ -112,8 +110,14 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
       <Dropdown
         {...rest}
         ref={ref}
-        className={cx(classes.root, className)}
-        classes={{ content: classes.content }}
+        className={className}
+        classes={{
+          content: twJoin(
+            // viewport minus header height
+            'max-h-[calc(100vh-var(--header-height,3.5rem))]',
+            'w-[15em] xs:max-md:w-[100vw]'
+          ),
+        }}
         style={style}
         content={content}
         offset={{ top: isCompactLayout ? 0.8 : 'xsmall' }}
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
index 283b23b79a..81cf0a2983 100644
--- a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
@@ -36,7 +36,7 @@ exports[`PageTopBarMenu renders 1`] = `
               class="items-center flex"
             >
               <h4
-                class="m-0 text-md text-white font-semibold inline !font-[400] PicassoTopBarMenu-truncateText"
+                class="m-0 text-md text-white inline font-[400] max-w whitespace-nowrap overflow-hidden overflow-ellipsis"
               >
                 Jacqueline Roque
               </h4>
diff --git a/packages/base/Page/src/PageTopBarMenu/styles.ts b/packages/base/Page/src/PageTopBarMenu/styles.ts
deleted file mode 100644
index e3ef507a30..0000000000
--- a/packages/base/Page/src/PageTopBarMenu/styles.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ screens }: Theme) =>
-  createStyles({
-    avatar: {
-      fontSize: '0.9rem',
-    },
-    contentUserBadge: {
-      [screens('xs', 'sm', 'md')]: {
-        padding: '1em',
-        zIndex: 1,
-        backgroundColor: 'white',
-        position: 'relative',
-      },
-    },
-    content: {
-      maxHeight: `calc(100vh - var(--header-height, 3.5rem))`, // viewport minus header height
-      width: '15em',
-      [screens('xs', 'sm')]: {
-        width: '100vw',
-      },
-    },
-    name: {
-      fontWeight: 400,
-      display: 'block',
-    },
-    truncateText: {
-      maxWidth: '11.5rem',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    paper: {
-      [screens('xs', 'sm', 'md')]: {
-        top: '2.5em !important',
-      },
-    },
-  })