feat(web): tailwind css (#1147)

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

@@ -58,8 +58,8 @@ const AccountMenu: FunctionComponent<Props> = ({
   return (
     <div ref={ref} id="account-menu" className="sn-component">
       <div
-        className={`sn-account-menu sn-dropdown ${
-          shouldAnimateCloseMenu ? 'slide-up-animation' : 'sn-dropdown--animated'
+        className={`z-footer-bar-item-panel bottom-full left-0 cursor-auto bg-default rounded shadow-main ${
+          shouldAnimateCloseMenu ? 'slide-up-animation' : 'transition-transform duration-150 slide-down-animation'
         } min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto absolute`}
         onKeyDown={handleKeyDown}
       >

packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -98,12 +98,12 @@ const AdvancedOptions: FunctionComponent<Props> = ({
   return (
     <>
       <button
-        className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none font-bold"
+        className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full text-sm focus:bg-info-backdrop focus:shadow-none font-bold"
         onClick={toggleShowAdvanced}
       >
         <div className="flex items-center">
           Advanced options
-          <Icon type="chevron-down" className="color-passive-1 ml-1" />
+          <Icon type="chevron-down" className="text-passive-1 ml-1" />
         </div>
       </button>
       {showAdvanced ? (
@@ -119,7 +119,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
               onChange={handleIsPrivateWorkspaceChange}
             />
             <a href="https://standardnotes.com/help/80" target="_blank" rel="noopener noreferrer" title="Learn more">
-              <Icon type="info" className="color-neutral" />
+              <Icon type="info" className="text-neutral" />
             </a>
           </div>
 
@@ -127,7 +127,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
             <>
               <DecoratedInput
                 className={'mb-2'}
-                left={[<Icon type="server" className="color-neutral" />]}
+                left={[<Icon type="server" className="text-neutral" />]}
                 type="text"
                 placeholder="Userphrase"
                 value={privateWorkspaceUserphrase}
@@ -136,7 +136,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
               />
               <DecoratedInput
                 className={'mb-2'}
-                left={[<Icon type="folder" className="color-neutral" />]}
+                left={[<Icon type="folder" className="text-neutral" />]}
                 type="text"
                 placeholder="Name"
                 value={privateWorkspaceName}
@@ -161,7 +161,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
                 rel="noopener noreferrer"
                 title="Learn more"
               >
-                <Icon type="info" className="color-neutral" />
+                <Icon type="info" className="text-neutral" />
               </a>
             </div>
           )}
@@ -175,7 +175,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
           />
           <DecoratedInput
             type="text"
-            left={[<Icon type="server" className="color-neutral" />]}
+            left={[<Icon type="server" className="text-neutral" />]}
             placeholder="https://api.standardnotes.com"
             value={server}
             onChange={handleSyncServerChange}

packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -105,34 +105,35 @@ const ConfirmPassword: FunctionComponent<Props> = ({
         <IconButton
           icon="arrow-left"
           title="Go back"
-          className="flex mr-2 color-neutral p-0"
+          className="flex mr-2 text-neutral p-0"
           onClick={handleGoBack}
           focusable={true}
           disabled={isRegistering}
         />
-        <div className="sn-account-menu-headline">Confirm password</div>
+        <div className="font-bold text-base">Confirm password</div>
       </div>
       <div className="px-3 mb-3 text-sm">
         Because your notes are encrypted using your password,{' '}
-        <span className="color-danger">Standard Notes does not have a password reset option</span>. If you forget your
+        <span className="text-danger">Standard Notes does not have a password reset option</span>. If you forget your
         password, you will permanently lose access to your data.
       </div>
       <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
         <DecoratedPasswordInput
           className="mb-2"
           disabled={isRegistering}
-          left={[<Icon type="password" className="color-neutral" />]}
+          left={[<Icon type="password" className="text-neutral" />]}
           onChange={handlePasswordChange}
           onKeyDown={handleKeyDown}
           placeholder="Confirm password"
           ref={passwordInputRef}
           value={confirmPassword}
         />
-        {error ? <div className="color-danger my-2">{error}</div> : null}
+        {error ? <div className="text-danger my-2">{error}</div> : null}
         <Button
-          className="btn-w-full mt-1 mb-3"
+          primary
+          fullWidth
+          className="mt-1 mb-3"
           label={isRegistering ? 'Creating account...' : 'Create account & sign in'}
-          variant="primary"
           onClick={handleConfirmFormSubmit}
           disabled={isRegistering}
         />

packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -9,6 +9,7 @@ import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
 import Icon from '@/Components/Icon/Icon'
 import IconButton from '@/Components/Button/IconButton'
 import AdvancedOptions from './AdvancedOptions'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -105,17 +106,17 @@ const CreateAccount: FunctionComponent<Props> = ({
         <IconButton
           icon="arrow-left"
           title="Go back"
-          className="flex mr-2 color-neutral p-0"
+          className="flex mr-2 text-neutral p-0"
           onClick={handleClose}
           focusable={true}
         />
-        <div className="sn-account-menu-headline">Create account</div>
+        <div className="font-bold text-base">Create account</div>
       </div>
       <form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
         <DecoratedInput
           className="mb-2"
           disabled={isPrivateWorkspace}
-          left={[<Icon type="email" className="color-neutral" />]}
+          left={[<Icon type="email" className="text-neutral" />]}
           onChange={handleEmailChange}
           onKeyDown={handleKeyDown}
           placeholder="Email"
@@ -125,16 +126,16 @@ const CreateAccount: FunctionComponent<Props> = ({
         />
         <DecoratedPasswordInput
           className="mb-2"
-          left={[<Icon type="password" className="color-neutral" />]}
+          left={[<Icon type="password" className="text-neutral" />]}
           onChange={handlePasswordChange}
           onKeyDown={handleKeyDown}
           placeholder="Password"
           ref={passwordInputRef}
           value={password}
         />
-        <Button className="btn-w-full mt-1" label="Next" variant="primary" onClick={handleRegisterFormSubmit} />
+        <Button className="mt-1" label="Next" primary onClick={handleRegisterFormSubmit} fullWidth={true} />
       </form>
-      <div className="h-1px my-2 bg-border"></div>
+      <HorizontalSeparator classes="my-2" />
       <AdvancedOptions
         application={application}
         viewControllerManager={viewControllerManager}

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -13,6 +13,7 @@ import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { formatLastSyncDate } from '@/Utils/FormatLastSyncDate'
+import Spinner from '@/Components/Spinner/Spinner'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -22,7 +23,7 @@ type Props = {
   closeMenu: () => void
 }
 
-const iconClassName = 'color-neutral mr-2'
+const iconClassName = 'text-neutral mr-2'
 
 const GeneralAccountMenu: FunctionComponent<Props> = ({
   application,
@@ -89,34 +90,34 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
   return (
     <>
       <div className="flex items-center justify-between px-3 mt-1 mb-1">
-        <div className="sn-account-menu-headline">Account</div>
+        <div className="font-bold text-base">Account</div>
         <div className="flex cursor-pointer" onClick={closeMenu}>
-          <Icon type="close" className="color-neutral" />
+          <Icon type="close" className="text-neutral" />
         </div>
       </div>
       {user ? (
         <>
-          <div className="px-3 mb-3 color-foreground text-sm">
+          <div className="px-3 mb-3 text-foreground text-sm">
             <div>You're signed in as:</div>
             <div className="my-0.5 font-bold wrap">{user.email}</div>
-            <span className="color-neutral">{application.getHost()}</span>
+            <span className="text-neutral">{application.getHost()}</span>
           </div>
-          <div className="flex items-start justify-between px-3 mb-3">
+          <div className="flex items-start justify-between px-3 mb-2">
             {isSyncingInProgress ? (
-              <div className="flex items-center color-info font-semibold">
-                <div className="sk-spinner w-5 h-5 mr-2 spinner-info"></div>
+              <div className="flex items-center text-info text-sm font-semibold">
+                <Spinner className="w-5 h-5 mr-2" />
                 Syncing...
               </div>
             ) : (
               <div className="flex items-start">
-                <Icon type="check-circle" className="mr-2 success" />
+                <Icon type="check-circle" className="mr-2 text-success" />
                 <div>
-                  <div className="font-semibold success">Last synced:</div>
-                  <div className="color-text">{lastSyncDate}</div>
+                  <div className="font-semibold text-success text-sm">Last synced:</div>
+                  <div className="text-text text-sm">{lastSyncDate}</div>
                 </div>
               </div>
             )}
-            <div className="flex cursor-pointer color-passive-1" onClick={doSynchronization}>
+            <div className="flex cursor-pointer text-passive-1" onClick={doSynchronization}>
               <Icon type="sync" />
             </div>
           </div>
@@ -124,13 +125,13 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
       ) : (
         <>
           <div className="px-3 mb-1">
-            <div className="mb-3 color-foreground">
+            <div className="mb-3 text-foreground text-sm">
               You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
               encryption.
             </div>
-            <div className="flex items-center color-passive-1">
+            <div className="flex items-center text-passive-1">
               <Icon type="cloud-off" className="mr-2" />
-              <span className="font-semibold">Offline</span>
+              <span className="font-semibold text-sm">Offline</span>
             </div>
           </div>
         </>
@@ -169,7 +170,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
             <Icon type="help" className={iconClassName} />
             Help &amp; feedback
           </div>
-          <span className="color-neutral">v{application.version}</span>
+          <span className="text-neutral">v{application.version}</span>
         </MenuItem>
         {user ? (
           <>

packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx

@@ -11,6 +11,7 @@ import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
 import Icon from '@/Components/Icon/Icon'
 import IconButton from '@/Components/Button/IconButton'
 import AdvancedOptions from './AdvancedOptions'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -143,17 +144,17 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
         <IconButton
           icon="arrow-left"
           title="Go back"
-          className="flex mr-2 color-neutral p-0"
+          className="flex mr-2 text-neutral p-0"
           onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)}
           focusable={true}
           disabled={isSigningIn}
         />
-        <div className="sn-account-menu-headline">Sign in</div>
+        <div className="font-bold text-base">Sign in</div>
       </div>
       <div className="px-3 mb-1">
         <DecoratedInput
           className={`mb-2 ${error ? 'border-danger' : null}`}
-          left={[<Icon type="email" className="color-neutral" />]}
+          left={[<Icon type="email" className="text-neutral" />]}
           type="email"
           placeholder="Email"
           value={email}
@@ -166,7 +167,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
         <DecoratedPasswordInput
           className={`mb-2 ${error ? 'border-danger' : null}`}
           disabled={isSigningIn}
-          left={[<Icon type="password" className="color-neutral" />]}
+          left={[<Icon type="password" className="text-neutral" />]}
           onChange={handlePasswordChange}
           onFocus={resetInvalid}
           onKeyDown={handleKeyDown}
@@ -174,13 +175,14 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
           ref={passwordInputRef}
           value={password}
         />
-        {error ? <div className="color-danger my-2">{error}</div> : null}
+        {error ? <div className="text-danger my-2">{error}</div> : null}
         <Button
-          className="btn-w-full mt-1 mb-3"
+          className="mt-1 mb-3"
           label={isSigningIn ? 'Signing in...' : 'Sign in'}
-          variant="primary"
+          primary
           onClick={handleSignInFormSubmit}
           disabled={isSigningIn}
+          fullWidth={true}
         />
         <Checkbox
           name="is-ephemeral"
@@ -199,7 +201,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
           />
         ) : null}
       </div>
-      <div className="h-1px my-2 bg-border"></div>
+      <HorizontalSeparator classes="my-2" />
       <AdvancedOptions
         viewControllerManager={viewControllerManager}
         application={application}

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}