Use dialog from shared UI

docker-compose.yml

@@ -4,6 +4,7 @@ services:
       context: .
       dockerfile: Dockerfile.snapshot-tests
     volumes:
+      - ./tools/snapshot-tests/tests:/app/tools/snapshot-tests/tests
       - ./tools/snapshot-tests/test-results:/app/tools/snapshot-tests/test-results
       - ./tools/snapshot-tests/playwright-report:/app/tools/snapshot-tests/playwright-report
     environment:
@@ -22,6 +23,7 @@ services:
       context: .
       dockerfile: Dockerfile.snapshot-tests
     volumes:
+      - ./tools/snapshot-tests/tests:/app/tools/snapshot-tests/tests
       - ./tools/snapshot-tests/test-results:/app/tools/snapshot-tests/test-results
       - ./tools/snapshot-tests/playwright-report:/app/tools/snapshot-tests/playwright-report
     environment:

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@fluffylabs/migrate-selection": "^1.0.0",
-    "@fluffylabs/shared-ui": "^0.3.1",
+    "@fluffylabs/shared-ui": "^0.3.2",
     "@fluffylabs/synctex-store": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
@@ -37,7 +37,6 @@
     "pdfjs-dist": "^4.5.136",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-modal": "^3.16.3",
     "react-tooltip": "^5.29.1",
     "tailwind-merge": "^3.3.1"
   },

src/components/Header/components/MoreNotesActionsButton.tsx

@@ -16,6 +16,7 @@ export const MoreButtonNotesActionsButton = () => {
   const { handleExport, handleDeleteNotes } = useContext(NotesContext) as INotesContext;
   const { fileImportRef, handleFileSelected, onImport } = useImport();
   const [isModalOpen, setModalOpen] = useState(false);
+
   const toggleModal = useCallback(() => {
     setModalOpen((x) => !x);
   }, []);
@@ -30,7 +31,7 @@ export const MoreButtonNotesActionsButton = () => {
             ...
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-auto max-w-72" align="end" forcedColorScheme="dark">
+        <DropdownMenuContent className="w-auto max-w-72 dark" align="end" forcedColorScheme="dark">
           <DropdownMenuItem className="flex gap-4 justify-between" onClick={onImport}>
             <span>Import</span>
             <span>📂</span>

src/components/Header/components/SettingsModal.tsx

@@ -1,36 +1,24 @@
+import { Button, Dialog, DialogModal } from "@fluffylabs/shared-ui";
 import { useContext } from "react";
-import Modal from "react-modal";
 import { type INotesContext, NotesContext } from "../../NotesProvider/NotesProvider";
 import { RemoteSources } from "../../RemoteSources/RemoteSources";
 
 export const SettingsModal = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
   const { remoteSources, handleSetRemoteSources } = useContext(NotesContext) as INotesContext;
 
   return (
-    <Modal style={modalStyles} isOpen={isOpen} onRequestClose={onClose} contentLabel="Settings">
-      <button className="default-button float-right" onClick={onClose}>
-        ✖︎
-      </button>
-      <div className="text-2xl font-bold mb-4">Settings</div>
-
-      <RemoteSources remoteSources={remoteSources} onChange={handleSetRemoteSources} />
-
-      <br />
-      <button className="default-button settings-close" onClick={onClose}>
-        close
-      </button>
-    </Modal>
+    <DialogModal open={isOpen}>
+      <DialogModal.Content className="max-w-2xl">
+        <Dialog.Header>Settings</Dialog.Header>
+        <Dialog.Content>
+          <RemoteSources remoteSources={remoteSources} onChange={handleSetRemoteSources} />
+        </Dialog.Content>
+        <Dialog.Footer className="flex gap-2">
+          <Button variant="outline" onClick={onClose}>
+            Close
+          </Button>
+        </Dialog.Footer>
+      </DialogModal.Content>
+    </DialogModal>
   );
 };
-const modalStyles = {
-  content: {
-    minWidth: "50vw",
-    top: "50%",
-    left: "50%",
-    right: "auto",
-    bottom: "auto",
-    marginRight: "-50%",
-    transform: "translate(-50%, -50%)",
-  },
-  overlay: { zIndex: 5 },
-};

src/components/Outline/Outline.tsx

@@ -87,7 +87,7 @@ const OutlineDumb: FC<{
                   dest={item.dest}
                   onClick={onClick}
                   className={twMerge(
-                    !firstLevel && "dark:text-brand-light text-brand-dark mt-0.5",
+                    !firstLevel && "dark:text-brand-dark text-brand-dark mt-0.5",
                     firstLevel && "dark:text-brand text-brand-very-dark",
                   )}
                 >

src/components/RemoteSources/RemoteSources.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@fluffylabs/shared-ui";
 import { useCallback, useState } from "react";
 import type { IRemoteSource } from "../NotesProvider/types/RemoteSource";
 import { RemoteSource } from "./components/RemoteSource";
@@ -28,9 +29,9 @@ export function RemoteSources({ remoteSources, onChange }: RemoteSourcesProps) {
       {isAddingNew ? (
         <RemoteSource onChange={handleOnChange} />
       ) : (
-        <button className="default-button" onClick={() => setAddingNew(true)}>
+        <Button variant="outline" size="sm" onClick={() => setAddingNew(true)}>
           ➕ new source
-        </button>
+        </Button>
       )}
       <br />
       <br />