feat(web): tailwind css (#1147)

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

@@ -86,7 +86,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, s
   return (
     <div
       ref={contextMenuRef}
-      className="sn-dropdown min-w-60 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+      className="bg-default rounded shadow-main min-w-60 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
       style={{
         ...contextMenuStyle,
         maxHeight: contextMenuMaxHeight,

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -6,6 +6,7 @@ import Switch from '@/Components/Switch/Switch'
 import { observer } from 'mobx-react-lite'
 import { FilesController } from '@/Controllers/FilesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
 
 type Props = {
   closeMenu: () => void
@@ -64,35 +65,47 @@ const FileMenuOptions: FunctionComponent<Props> = ({
 
   return (
     <>
-      <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onPreview}>
-        <Icon type="file" className="mr-2 color-neutral" />
+      <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-sm"
+        onClick={onPreview}
+      >
+        <Icon type="file" className="mr-2 text-neutral" />
         Preview file
       </button>
       {selectedFiles.length === 1 && (
         <>
           {isFileAttachedToNote ? (
-            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onDetach}>
-              <Icon type="link-off" className="mr-2 color-neutral" />
+            <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-sm"
+              onClick={onDetach}
+            >
+              <Icon type="link-off" className="mr-2 text-neutral" />
               Detach from note
             </button>
           ) : shouldShowAttachOption ? (
-            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onAttach}>
-              <Icon type="link" className="mr-2 color-neutral" />
+            <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-sm"
+              onClick={onAttach}
+            >
+              <Icon type="link" className="mr-2 text-neutral" />
               Attach to note
             </button>
           ) : null}
         </>
       )}
-      <div className="min-h-1px my-1 bg-border"></div>
+      <HorizontalSeparator classes="my-1" />
       <button
-        className="sn-dropdown-item justify-between focus:bg-info-backdrop"
+        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-sm justify-between"
         onClick={() => {
           void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
         }}
         onBlur={closeOnBlur}
       >
         <span className="flex items-center">
-          <Icon type="password" className="mr-2 color-neutral" />
+          <Icon type="password" className="mr-2 text-neutral" />
           Password protection
         </span>
         <Switch
@@ -101,41 +114,41 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           checked={hasProtectedFiles}
         />
       </button>
-      <div className="min-h-1px my-1 bg-border"></div>
+      <HorizontalSeparator classes="my-1" />
       <button
         onBlur={closeOnBlur}
-        className="sn-dropdown-item focus:bg-info-backdrop"
+        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-sm"
         onClick={() => {
           void filesController.downloadFiles(selectionController.selectedFiles)
         }}
       >
-        <Icon type="download" className="mr-2 color-neutral" />
+        <Icon type="download" className="mr-2 text-neutral" />
         Download
       </button>
       {shouldShowRenameOption && (
         <button
           onBlur={closeOnBlur}
-          className="sn-dropdown-item focus:bg-info-backdrop"
+          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-sm"
           onClick={() => {
             renameToggleCallback?.(true)
           }}
         >
-          <Icon type="pencil" className="mr-2 color-neutral" />
+          <Icon type="pencil" className="mr-2 text-neutral" />
           Rename
         </button>
       )}
       <button
         onBlur={closeOnBlur}
-        className="sn-dropdown-item focus:bg-info-backdrop"
+        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-sm"
         onClick={() => {
           void filesController.deleteFilesPermanently(selectionController.selectedFiles)
         }}
       >
-        <Icon type="trash" className="mr-2 color-danger" />
-        <span className="color-danger">Delete permanently</span>
+        <Icon type="trash" className="mr-2 text-danger" />
+        <span className="text-danger">Delete permanently</span>
       </button>
       {selectedFiles.length === 1 && (
-        <div className="px-3 pt-1.5 pb-0.5 text-xs color-neutral font-medium">
+        <div className="px-3 pt-1.5 pb-0.5 text-xs text-neutral font-medium">
           <div>
             <span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
           </div>

packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx

@@ -52,7 +52,7 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
         }}
         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" />
@@ -69,7 +69,9 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
           ...position,
           maxHeight,
         }}
-        className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+        className={`${
+          open ? 'flex' : 'hidden'
+        } flex-col min-w-80 max-h-120 max-w-xs py-2 fixed bg-default rounded shadow-main transition-transform duration-150 slide-down-animation overflow-y-auto`}
         onBlur={closeOnBlur}
         tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
       >