feat(web): tailwind css (#1147)

2022-06-28 02:50:52 +05:30
parent 0ead805412
commit b80038f607
201 changed files with 1824 additions and 2699 deletions
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -66,13 +66,13 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
          }}
          onBlur={closeOnBlur}
          ref={menuButtonRef}
-          className="sn-dropdown-item justify-between"
+          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 focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between"
        >
          <div className="flex items-center">
-            <Icon type="hashtag" className="mr-2 color-neutral" />
+            <Icon type="hashtag" className="mr-2 text-neutral" />
            Add tag
          </div>
-          <Icon type="chevron-right" className="color-neutral" />
+          <Icon type="chevron-right" className="text-neutral" />
        </DisclosureButton>
        <DisclosurePanel
          ref={menuRef}
@@ -86,12 +86,14 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
            ...menuStyle,
            position: 'fixed',
          }}
-          className="sn-dropdown min-w-80 flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
+          className={`${
+            isMenuOpen ? 'flex' : 'hidden'
+          } flex-col py-2 bg-default rounded shadow-main min-w-80 max-h-120 max-w-xs fixed overflow-y-auto`}
        >
          {navigationController.tags.map((tag) => (
            <button
              key={tag.uuid}
-              className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
+              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-menu-item max-w-80"
              onBlur={closeOnBlur}
              onClick={() => {
                notesController.isTagInSelectedNotes(tag)
--- a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -50,7 +50,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
          setMenuStyle(newMenuStyle)
          setIsVisible(true)
        }
-      })
+      }, 5)
    }
  }, [isOpen])

@@ -65,13 +65,13 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
          }}
          onBlur={closeOnBlur}
          ref={buttonRef}
-          className="sn-dropdown-item justify-between"
+          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 focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between"
        >
          <div className="flex items-center">
-            <Icon type="dashboard" className="color-neutral mr-2" />
+            <Icon type="dashboard" className="text-neutral mr-2" />
            Change note type
          </div>
-          <Icon type="chevron-right" className="color-neutral" />
+          <Icon type="chevron-right" className="text-neutral" />
        </DisclosureButton>
        <DisclosurePanel
          ref={menuRef}
@@ -85,7 +85,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
            ...menuStyle,
            position: 'fixed',
          }}
-          className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
+          className="bg-default rounded shadow-main flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
        >
          {isOpen && (
            <ChangeEditorMenu
--- a/packages/web/src/javascripts/Components/NotesOptions/ListedActionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ListedActionsMenu.tsx
@@ -0,0 +1,145 @@
+import { WebApplication } from '@/Application/Application'
+import { Action, SNNote } from '@standardnotes/snjs'
+import { Fragment, useCallback, useEffect, useState } from 'react'
+import Icon from '@/Components/Icon/Icon'
+import { ListedMenuGroup } from './ListedMenuGroup'
+import ListedMenuItem from './ListedMenuItem'
+import Spinner from '@/Components/Spinner/Spinner'
+
+type ListedActionsMenuProps = {
+  application: WebApplication
+  note: SNNote
+  recalculateMenuStyle: () => void
+}
+
+const ListedActionsMenu = ({ application, note, recalculateMenuStyle }: ListedActionsMenuProps) => {
+  const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
+  const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)
+
+  const reloadMenuGroup = useCallback(
+    async (group: ListedMenuGroup) => {
+      const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
+
+      if (!updatedAccountInfo) {
+        return
+      }
+
+      const updatedGroup: ListedMenuGroup = {
+        name: updatedAccountInfo.display_name,
+        account: group.account,
+        actions: updatedAccountInfo.actions as Action[],
+      }
+
+      const updatedGroups = menuGroups.map((group) => {
+        if (updatedGroup.account.authorId === group.account.authorId) {
+          return updatedGroup
+        } else {
+          return group
+        }
+      })
+
+      setMenuGroups(updatedGroups)
+    },
+    [application, menuGroups, note],
+  )
+
+  useEffect(() => {
+    const fetchListedAccounts = async () => {
+      if (!application.hasAccount()) {
+        setIsFetchingAccounts(false)
+        return
+      }
+
+      try {
+        const listedAccountEntries = await application.getListedAccounts()
+
+        if (!listedAccountEntries.length) {
+          throw new Error('No Listed accounts found')
+        }
+
+        const menuGroups: ListedMenuGroup[] = []
+
+        await Promise.all(
+          listedAccountEntries.map(async (account) => {
+            const accountInfo = await application.getListedAccountInfo(account, note.uuid)
+
+            if (accountInfo) {
+              menuGroups.push({
+                name: accountInfo.display_name,
+                account,
+                actions: accountInfo.actions as Action[],
+              })
+            } else {
+              menuGroups.push({
+                name: account.authorId,
+                account,
+                actions: [],
+              })
+            }
+          }),
+        )
+
+        setMenuGroups(
+          menuGroups.sort((a, b) => {
+            return a.name.toString().toLowerCase() < b.name.toString().toLowerCase() ? -1 : 1
+          }),
+        )
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setIsFetchingAccounts(false)
+        setTimeout(() => {
+          recalculateMenuStyle()
+        })
+      }
+    }
+
+    void fetchListedAccounts()
+  }, [application, note.uuid, recalculateMenuStyle])
+
+  return (
+    <>
+      {isFetchingAccounts && (
+        <div className="w-full flex items-center justify-center p-4">
+          <Spinner className="w-5 h-5" />
+        </div>
+      )}
+      {!isFetchingAccounts && menuGroups.length ? (
+        <>
+          {menuGroups.map((group, index) => (
+            <Fragment key={group.account.authorId}>
+              <div
+                className={`w-full flex items-center px-2.5 py-2 text-input font-semibold text-text border-y border-solid border-border ${
+                  index === 0 ? 'border-t-0 mb-1' : 'my-1'
+                }`}
+              >
+                <Icon type="notes" className="mr-2 text-info" /> {group.name}
+              </div>
+              {group.actions.length ? (
+                group.actions.map((action) => (
+                  <ListedMenuItem
+                    action={action}
+                    note={note}
+                    key={action.url}
+                    group={group}
+                    application={application}
+                    reloadMenuGroup={reloadMenuGroup}
+                  />
+                ))
+              ) : (
+                <div className="px-3 py-2 text-sm text-passive-0 select-none">No actions available</div>
+              )}
+            </Fragment>
+          ))}
+        </>
+      ) : null}
+      {!isFetchingAccounts && !menuGroups.length ? (
+        <div className="w-full flex items-center justify-center px-4 py-6">
+          <div className="text-sm text-passive-0 select-none">No Listed accounts found</div>
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+export default ListedActionsMenu
--- a/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
@@ -1,210 +1,17 @@
 import { WebApplication } from '@/Application/Application'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { Action, ListedAccount, SNNote } from '@standardnotes/snjs'
-import { Fragment, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { SNNote } from '@standardnotes/snjs'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import ListedActionsMenu from './ListedActionsMenu'

 type Props = {
  application: WebApplication
  note: SNNote
 }

-type ListedMenuGroup = {
-  name: string
-  account: ListedAccount
-  actions: Action[]
-}
-
-type ListedMenuItemProps = {
-  action: Action
-  note: SNNote
-  group: ListedMenuGroup
-  application: WebApplication
-  reloadMenuGroup: (group: ListedMenuGroup) => Promise<void>
-}
-
-const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
-  action,
-  note,
-  application,
-  group,
-  reloadMenuGroup,
-}) => {
-  const [isRunning, setIsRunning] = useState(false)
-
-  const handleClick = useCallback(async () => {
-    if (isRunning) {
-      return
-    }
-
-    setIsRunning(true)
-
-    await application.actionsManager.runAction(action, note)
-
-    setIsRunning(false)
-
-    reloadMenuGroup(group).catch(console.error)
-  }, [application, action, group, isRunning, note, reloadMenuGroup])
-
-  return (
-    <button
-      key={action.url}
-      onClick={handleClick}
-      className="sn-dropdown-item flex justify-between py-2 text-input focus:bg-info-backdrop focus:shadow-none"
-    >
-      <div className="flex flex-col">
-        <div className="font-semibold">{action.label}</div>
-        {action.access_type && (
-          <div className="text-xs mt-0.5 color-passive-0">
-            {'Uses '}
-            <strong>{action.access_type}</strong>
-            {' access to this note.'}
-          </div>
-        )}
-      </div>
-      {isRunning && <div className="sk-spinner spinner-info w-3 h-3" />}
-    </button>
-  )
-}
-
-type ListedActionsMenuProps = {
-  application: WebApplication
-  note: SNNote
-  recalculateMenuStyle: () => void
-}
-
-const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ application, note, recalculateMenuStyle }) => {
-  const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
-  const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)
-
-  const reloadMenuGroup = useCallback(
-    async (group: ListedMenuGroup) => {
-      const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
-
-      if (!updatedAccountInfo) {
-        return
-      }
-
-      const updatedGroup: ListedMenuGroup = {
-        name: updatedAccountInfo.display_name,
-        account: group.account,
-        actions: updatedAccountInfo.actions as Action[],
-      }
-
-      const updatedGroups = menuGroups.map((group) => {
-        if (updatedGroup.account.authorId === group.account.authorId) {
-          return updatedGroup
-        } else {
-          return group
-        }
-      })
-
-      setMenuGroups(updatedGroups)
-    },
-    [application, menuGroups, note],
-  )
-
-  useEffect(() => {
-    const fetchListedAccounts = async () => {
-      if (!application.hasAccount()) {
-        setIsFetchingAccounts(false)
-        return
-      }
-
-      try {
-        const listedAccountEntries = await application.getListedAccounts()
-
-        if (!listedAccountEntries.length) {
-          throw new Error('No Listed accounts found')
-        }
-
-        const menuGroups: ListedMenuGroup[] = []
-
-        await Promise.all(
-          listedAccountEntries.map(async (account) => {
-            const accountInfo = await application.getListedAccountInfo(account, note.uuid)
-
-            if (accountInfo) {
-              menuGroups.push({
-                name: accountInfo.display_name,
-                account,
-                actions: accountInfo.actions as Action[],
-              })
-            } else {
-              menuGroups.push({
-                name: account.authorId,
-                account,
-                actions: [],
-              })
-            }
-          }),
-        )
-
-        setMenuGroups(
-          menuGroups.sort((a, b) => {
-            return a.name.toString().toLowerCase() < b.name.toString().toLowerCase() ? -1 : 1
-          }),
-        )
-      } catch (err) {
-        console.error(err)
-      } finally {
-        setIsFetchingAccounts(false)
-        setTimeout(() => {
-          recalculateMenuStyle()
-        })
-      }
-    }
-
-    void fetchListedAccounts()
-  }, [application, note.uuid, recalculateMenuStyle])
-
-  return (
-    <>
-      {isFetchingAccounts && (
-        <div className="w-full flex items-center justify-center p-4">
-          <div className="sk-spinner w-5 h-5 spinner-info" />
-        </div>
-      )}
-      {!isFetchingAccounts && menuGroups.length ? (
-        <>
-          {menuGroups.map((group, index) => (
-            <Fragment key={group.account.authorId}>
-              <div
-                className={`w-full flex items-center px-2.5 py-2 text-input font-semibold color-text border-0 border-y-1px border-solid border-main ${
-                  index === 0 ? 'border-t-0 mb-1' : 'my-1'
-                }`}
-              >
-                <Icon type="notes" className="mr-2 color-info" /> {group.name}
-              </div>
-              {group.actions.length ? (
-                group.actions.map((action) => (
-                  <ListedMenuItem
-                    action={action}
-                    note={note}
-                    key={action.url}
-                    group={group}
-                    application={application}
-                    reloadMenuGroup={reloadMenuGroup}
-                  />
-                ))
-              ) : (
-                <div className="px-3 py-2 color-passive-0 select-none">No actions available</div>
-              )}
-            </Fragment>
-          ))}
-        </>
-      ) : null}
-      {!isFetchingAccounts && !menuGroups.length ? (
-        <div className="w-full flex items-center justify-center px-4 py-6">
-          <div className="color-passive-0 select-none">No Listed accounts found</div>
-        </div>
-      ) : null}
-    </>
-  )
-}
-
 const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) => {
  const menuContainerRef = useRef<HTMLDivElement>(null)
  const menuRef = useRef<HTMLDivElement>(null)
@@ -249,12 +56,16 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
  return (
    <div ref={menuContainerRef}>
      <Disclosure open={isMenuOpen} onChange={toggleListedMenu}>
-        <DisclosureButton ref={menuButtonRef} onBlur={closeOnBlur} className="sn-dropdown-item justify-between">
+        <DisclosureButton
+          ref={menuButtonRef}
+          onBlur={closeOnBlur}
+          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 focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between"
+        >
          <div className="flex items-center">
-            <Icon type="listed" className="color-neutral mr-2" />
+            <Icon type="listed" className="text-neutral mr-2" />
            Listed actions
          </div>
-          <Icon type="chevron-right" className="color-neutral" />
+          <Icon type="chevron-right" className="text-neutral" />
        </DisclosureButton>
        <DisclosurePanel
          ref={menuRef}
@@ -262,7 +73,9 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
            ...menuStyle,
            position: 'fixed',
          }}
-          className="sn-dropdown flex flex-col max-h-120 min-w-68 pb-1 fixed overflow-y-auto"
+          className={`${
+            isMenuOpen ? 'flex' : 'hidden'
+          } flex-col bg-default rounded shadow-main max-h-120 min-w-68 pb-1 fixed overflow-y-auto`}
        >
          {isMenuOpen && (
            <ListedActionsMenu application={application} note={note} recalculateMenuStyle={recalculateMenuStyle} />
--- a/packages/web/src/javascripts/Components/NotesOptions/ListedMenuGroup.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ListedMenuGroup.tsx
@@ -0,0 +1,7 @@
+import { Action, ListedAccount } from '@standardnotes/snjs'
+
+export type ListedMenuGroup = {
+  name: string
+  account: ListedAccount
+  actions: Action[]
+}
--- a/packages/web/src/javascripts/Components/NotesOptions/ListedMenuItem.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ListedMenuItem.tsx
@@ -0,0 +1,59 @@
+import { WebApplication } from '@/Application/Application'
+import { Action, SNNote } from '@standardnotes/snjs'
+import { FunctionComponent, useCallback, useState } from 'react'
+import Spinner from '@/Components/Spinner/Spinner'
+import { ListedMenuGroup } from './ListedMenuGroup'
+
+type ListedMenuItemProps = {
+  action: Action
+  note: SNNote
+  group: ListedMenuGroup
+  application: WebApplication
+  reloadMenuGroup: (group: ListedMenuGroup) => Promise<void>
+}
+
+const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
+  action,
+  note,
+  application,
+  group,
+  reloadMenuGroup,
+}) => {
+  const [isRunning, setIsRunning] = useState(false)
+
+  const handleClick = useCallback(async () => {
+    if (isRunning) {
+      return
+    }
+
+    setIsRunning(true)
+
+    await application.actionsManager.runAction(action, note)
+
+    setIsRunning(false)
+
+    reloadMenuGroup(group).catch(console.error)
+  }, [application, action, group, isRunning, note, reloadMenuGroup])
+
+  return (
+    <button
+      key={action.url}
+      onClick={handleClick}
+      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"
+    >
+      <div className="flex flex-col">
+        <div className="font-semibold">{action.label}</div>
+        {action.access_type && (
+          <div className="text-xs mt-0.5 text-passive-0">
+            {'Uses '}
+            <strong>{action.access_type}</strong>
+            {' access to this note.'}
+          </div>
+        )}
+      </div>
+      {isRunning && <Spinner className="w-3 h-3" />}
+    </button>
+  )
+}
+
+export default ListedMenuItem
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -11,6 +11,7 @@ import AddTagOption from './AddTagOption'
 import { addToast, dismissToast, ToastType } from '@standardnotes/toast'
 import { NotesOptionsProps } from './NotesOptionsProps'
 import { NotesController } from '@/Controllers/NotesController'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'

 type DeletePermanentlyButtonProps = {
  closeOnBlur: NotesOptionsProps['closeOnBlur']
@@ -18,16 +19,20 @@ type DeletePermanentlyButtonProps = {
 }

 const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButtonProps) => (
-  <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={onClick}>
-    <Icon type="close" className="color-danger mr-2" />
-    <span className="color-danger">Delete permanently</span>
+  <button
+    onBlur={closeOnBlur}
+    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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
+    onClick={onClick}
+  >
+    <Icon type="close" className="text-danger mr-2" />
+    <span className="text-danger">Delete permanently</span>
  </button>
 )

-const iconClass = 'color-neutral mr-2'
-const iconClassDanger = 'color-danger mr-2'
-const iconClassWarning = 'color-warning mr-2'
-const iconClassSuccess = 'color-success mr-2'
+const iconClass = 'text-neutral mr-2'
+const iconClassDanger = 'text-danger mr-2'
+const iconClassWarning = 'text-warning mr-2'
+const iconClassSuccess = 'text-success mr-2'

 const getWordCount = (text: string) => {
  if (text.trim().length === 0) {
@@ -96,7 +101,7 @@ const NoteAttributes: FunctionComponent<{
  const format = editor?.package_info?.file_type || 'txt'

  return (
-    <div className="px-3 pt-1.5 pb-2.5 text-xs color-neutral font-medium">
+    <div className="px-3 pt-1.5 pb-2.5 text-xs text-neutral font-medium">
      {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
        <>
          <div className="mb-1">
@@ -135,7 +140,7 @@ const SpellcheckOptions: FunctionComponent<{
  return (
    <div className="flex flex-col">
      <button
-        className="sn-dropdown-item justify-between px-3 py-1"
+        className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between"
        onClick={() => {
          notesController.toggleGlobalSpellcheckForNote(note).catch(console.error)
        }}
@@ -161,8 +166,8 @@ const NoteSizeWarning: FunctionComponent<{
 }> = ({ note }) => {
  return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
    <div className="flex items-center px-3 py-3.5 relative bg-warning-faded">
-      <Icon type="warning" className="color-accessory-tint-3 flex-shrink-0 mr-3" />
-      <div className="color-warning select-none leading-140% max-w-80%">
+      <Icon type="warning" className="text-accessory-tint-3 flex-shrink-0 mr-3" />
+      <div className="text-warning select-none leading-140% max-w-80%">
        This note may have trouble syncing to the mobile application due to its size.
      </div>
    </div>
@@ -267,15 +272,19 @@ const NotesOptions = ({
    <>
      {notes.length === 1 && (
        <>
-          <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={openRevisionHistoryModal}>
+          <button
+            onBlur={closeOnBlur}
+            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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
+            onClick={openRevisionHistoryModal}
+          >
            <Icon type="history" className={iconClass} />
            Note history
          </button>
-          <div className="min-h-1px my-2 bg-border"></div>
+          <HorizontalSeparator classes="my-2" />
        </>
      )}
      <button
-        className="sn-dropdown-item justify-between"
+        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 focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between"
        onClick={() => {
          notesController.setLockSelectedNotes(!locked)
        }}
@@ -288,7 +297,7 @@ const NotesOptions = ({
        <Switch className="px-0" checked={locked} />
      </button>
      <button
-        className="sn-dropdown-item justify-between"
+        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 focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between"
        onClick={() => {
          notesController.setHideSelectedNotePreviews(!hidePreviews)
        }}
@@ -301,7 +310,7 @@ const NotesOptions = ({
        <Switch className="px-0" checked={!hidePreviews} />
      </button>
      <button
-        className="sn-dropdown-item justify-between"
+        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 focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between"
        onClick={() => {
          notesController.setProtectSelectedNotes(!protect).catch(console.error)
        }}
@@ -315,11 +324,11 @@ const NotesOptions = ({
      </button>
      {notes.length === 1 && (
        <>
-          <div className="min-h-1px my-2 bg-border"></div>
+          <HorizontalSeparator classes="my-2" />
          <ChangeEditorOption application={application} note={notes[0]} />
        </>
      )}
-      <div className="min-h-1px my-2 bg-border"></div>
+      <HorizontalSeparator classes="my-2" />
      {navigationController.tagsCount > 0 && (
        <AddTagOption
          navigationController={navigationController}
@@ -330,7 +339,7 @@ const NotesOptions = ({
      {unpinned && (
        <button
          onBlur={closeOnBlur}
-          className="sn-dropdown-item"
+          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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
          onClick={() => {
            notesController.setPinSelectedNotes(true)
          }}
@@ -342,7 +351,7 @@ const NotesOptions = ({
      {pinned && (
        <button
          onBlur={closeOnBlur}
-          className="sn-dropdown-item"
+          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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
          onClick={() => {
            notesController.setPinSelectedNotes(false)
          }}
@@ -351,36 +360,44 @@ const NotesOptions = ({
          Unpin
        </button>
      )}
-      <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={downloadSelectedItems}>
+      <button
+        onBlur={closeOnBlur}
+        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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
+        onClick={downloadSelectedItems}
+      >
        <Icon type="download" className={iconClass} />
        Export
      </button>
-      <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={duplicateSelectedItems}>
+      <button
+        onBlur={closeOnBlur}
+        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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
+        onClick={duplicateSelectedItems}
+      >
        <Icon type="copy" className={iconClass} />
        Duplicate
      </button>
      {unarchived && (
        <button
          onBlur={closeOnBlur}
-          className="sn-dropdown-item"
+          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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
          onClick={() => {
            notesController.setArchiveSelectedNotes(true).catch(console.error)
          }}
        >
          <Icon type="archive" className={iconClassWarning} />
-          <span className="color-warning">Archive</span>
+          <span className="text-warning">Archive</span>
        </button>
      )}
      {archived && (
        <button
          onBlur={closeOnBlur}
-          className="sn-dropdown-item"
+          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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
          onClick={() => {
            notesController.setArchiveSelectedNotes(false).catch(console.error)
          }}
        >
          <Icon type="unarchive" className={iconClassWarning} />
-          <span className="color-warning">Unarchive</span>
+          <span className="text-warning">Unarchive</span>
        </button>
      )}
      {notTrashed &&
@@ -394,26 +411,26 @@ const NotesOptions = ({
        ) : (
          <button
            onBlur={closeOnBlur}
-            className="sn-dropdown-item"
+            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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
            onClick={async () => {
              await notesController.setTrashSelectedNotes(true)
            }}
          >
            <Icon type="trash" className={iconClassDanger} />
-            <span className="color-danger">Move to trash</span>
+            <span className="text-danger">Move to trash</span>
          </button>
        ))}
      {trashed && (
        <>
          <button
            onBlur={closeOnBlur}
-            className="sn-dropdown-item"
+            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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
            onClick={async () => {
              await notesController.setTrashSelectedNotes(false)
            }}
          >
            <Icon type="restore" className={iconClassSuccess} />
-            <span className="color-success">Restore</span>
+            <span className="text-success">Restore</span>
          </button>
          <DeletePermanentlyButton
            closeOnBlur={closeOnBlur}
@@ -423,15 +440,15 @@ const NotesOptions = ({
          />
          <button
            onBlur={closeOnBlur}
-            className="sn-dropdown-item"
+            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 focus:bg-info-backdrop focus:shadow-none text-menu-item"
            onClick={async () => {
              await notesController.emptyTrash()
            }}
          >
            <div className="flex items-start">
-              <Icon type="trash-sweep" className="color-danger mr-2" />
+              <Icon type="trash-sweep" className="text-danger mr-2" />
              <div className="flex-row">
-                <div className="color-danger">Empty Trash</div>
+                <div className="text-danger">Empty Trash</div>
                <div className="text-xs">{notesController.trashedNotesCount} notes in Trash</div>
              </div>
            </div>
@@ -440,11 +457,11 @@ const NotesOptions = ({
      )}
      {notes.length === 1 ? (
        <>
-          <div className="min-h-1px my-2 bg-border"></div>
+          <HorizontalSeparator classes="my-2" />
          <ListedActionsOption application={application} note={notes[0]} />
-          <div className="min-h-1px my-2 bg-border"></div>
+          <HorizontalSeparator classes="my-2" />
          <SpellcheckOptions editorForNote={editorForNote} notesController={notesController} note={notes[0]} />
-          <div className="min-h-1px my-2 bg-border"></div>
+          <HorizontalSeparator classes="my-2" />
          <NoteAttributes application={application} note={notes[0]} />
          <NoteSizeWarning note={notes[0]} />
        </>
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -71,7 +71,7 @@ const NotesOptionsPanel = ({
        }}
        onBlur={closeOnBlur}
        ref={buttonRef}
-        className="sn-icon-button border-contrast"
+        className="flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer"
      >
        <VisuallyHidden>Actions</VisuallyHidden>
        <Icon type="more" className="block" />
@@ -88,7 +88,9 @@ const NotesOptionsPanel = ({
          ...position,
          maxHeight,
        }}
-        className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed"
+        className={`${
+          open ? 'flex' : 'hidden'
+        } flex-col min-w-80 max-h-120 max-w-xs pt-2 fixed bg-default rounded shadow-main transition-transform duration-150 slide-down-animation overflow-y-auto`}
        onBlur={closeOnBlur}
        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
      >