feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx

@@ -58,7 +58,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
   return (
     <MenuItem
       type={MenuItemType.RadioButton}
-      className="sn-dropdown-item py-2 focus:bg-info-backdrop focus:shadow-none"
+      className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-2 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
       onClick={onClick}
       checked={descriptor.primary}
     >
@@ -76,7 +76,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
           <div>{descriptor.label}</div>
         )}
         {descriptor.primary && !hideOptions && (
-          <div>
+          <div className="flex items-center">
             <a
               role="button"
               className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
@@ -85,7 +85,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
                 setIsRenaming((isRenaming) => !isRenaming)
               }}
             >
-              <Icon type="pencil" className="sn-icon--mid color-neutral" />
+              <Icon type="pencil" className="text-neutral" size="medium" />
             </a>
             <a
               role="button"
@@ -95,7 +95,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
                 onDelete()
               }}
             >
-              <Icon type="trash" className="sn-icon--mid color-danger" />
+              <Icon type="trash" className="text-danger" size="medium" />
             </a>
           </div>
         )}

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -78,13 +78,13 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
           void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
         }}
       >
-        <Icon type="user-add" className="color-neutral mr-2" />
+        <Icon type="user-add" className="text-neutral mr-2" />
         Add another workspace
       </MenuItem>
 
       {!hideWorkspaceOptions && (
         <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
-          <Icon type="signOut" className="color-neutral mr-2" />
+          <Icon type="signOut" className="text-neutral mr-2" />
           Sign out all workspaces
         </MenuItem>
       )}

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx

@@ -6,6 +6,8 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu'
+import MenuItem from '@/Components/Menu/MenuItem'
+import { MenuItemType } from '@/Components/Menu/MenuItemType'
 
 type Props = {
   mainApplicationGroup: ApplicationGroup
@@ -43,21 +45,25 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
 
   return (
     <>
-      <button
-        ref={buttonRef}
-        className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+      <MenuItem
         tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-        role="menuitem"
+        ref={buttonRef}
+        type={MenuItemType.IconButton}
         onClick={toggleMenu}
+        className="justify-between"
       >
         <div className="flex items-center">
-          <Icon type="user-switch" className="color-neutral mr-2" />
+          <Icon type="user-switch" className="text-neutral mr-2" />
           Switch workspace
         </div>
-        <Icon type="chevron-right" className="color-neutral" />
-      </button>
+        <Icon type="chevron-right" className="text-neutral" />
+      </MenuItem>
       {isOpen && (
-        <div ref={menuRef} className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto" style={menuStyle}>
+        <div
+          ref={menuRef}
+          className="bg-default rounded shadow-main max-h-120 min-w-68 py-2 fixed overflow-y-auto"
+          style={menuStyle}
+        >
           <WorkspaceSwitcherMenu
             mainApplicationGroup={mainApplicationGroup}
             viewControllerManager={viewControllerManager}