Theme initial setup popup to match rest of extension

src/@/components/Modal.tsx

@@ -1,27 +0,0 @@
-import { FC } from 'react';
-import { openOptions } from '../lib/utils.ts';
-import { Button } from './ui/Button.tsx';
-
-interface ModalProps {
-  open: boolean;
-}
-
-const Modal: FC<ModalProps> = ({ open }) => {
-  if (!open) return null;
-
-  return (
-    <div className="fixed top-0 bottom-0 left-0 right-0 inset-0 bg-white z-10">
-      <div className="container flex flex-col gap-3 justify-center items-center h-full max-w-lg mx-auto">
-        <h2 className="text-lg text-zinc-700 ">Initial Config</h2>
-
-        <div className="flex justify-center items-center">
-          <Button onClick={() => openOptions()} className="w-40">
-            Configure
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Modal;

src/@/components/NotConfigured.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { openOptions } from '../lib/utils.ts';
+import { Button } from './ui/Button.tsx';
+
+const NotConfigured: FC = () => {
+  return (
+    <div className="flex flex-col w-[350px] h-full overflow-y-hidden items-center gap-10 py-10">
+      <div className="flex flex-row gap-4">
+        <img
+                    src="./128.png"
+                    height="40px"
+                    width="40px"
+                    className="rounded"
+                    alt="Linkwarden Logo"
+                  />
+        <h1 className="font-medium" style={{ fontSize: "1.65rem" }}>Initial Setup</h1>
+      </div>
+      <Button onClick={() => openOptions()} className="w-37.5">
+          Configure
+      </Button>
+    </div>
+  )
+};
+
+export default NotConfigured;

src/pages/Popup/App.tsx

@@ -4,7 +4,7 @@ import BookmarkForm from '../../@/components/BookmarkForm.tsx';
 import { openOptions } from '../../@/lib/utils.ts';
 import { useEffect, useState } from 'react';
 import { getConfig, isConfigured } from '../../@/lib/config.ts';
-import Modal from '../../@/components/Modal.tsx';
+import NotConfigured from '../../@/components/NotConfigured.tsx';
 import { ModeToggle } from '../../@/components/ModeToggle.tsx';
 
 function App() {
@@ -22,39 +22,44 @@ function App() {
 
   return (
     <WholeContainer>
-      <Container>
-        <div className="flex justify-between w-full items-center">
-          <div className="flex space-x-2 w-full items-center">
-            <a
-              href={baseUrl}
-              rel="noopener"
-              target="_blank"
-              referrerPolicy="no-referrer"
-              className="hover:opacity-80 duration-200 rounded ease-in-out"
-            >
-              <img
-                src="./128.png"
-                height="30px"
-                width="30px"
-                className="rounded"
-                alt="Linkwarden Logo"
-              />
-            </a>
-            <h1 className="text-lg">Add Link</h1>
-          </div>
-          <div className="flex items-center justify-center space-x-2">
-            <ModeToggle />
-            <p
-              className="text-blue-500 text-xs cursor-pointer hover:opacity-80 duration-200 ease-in-out w-fit"
-              onClick={openOptions}
-            >
-              Config
-            </p>
-          </div>
-        </div>
-        <BookmarkForm />
-        <Modal open={!isAllConfigured} />
-      </Container>
+      {
+        isAllConfigured ? (
+          <Container>
+            <div className="flex justify-between w-full items-center">
+              <div className="flex space-x-2 w-full items-center">
+                <a
+                  href={baseUrl}
+                  rel="noopener"
+                  target="_blank"
+                  referrerPolicy="no-referrer"
+                  className="hover:opacity-80 duration-200 rounded ease-in-out"
+                >
+                  <img
+                    src="./128.png"
+                    height="30px"
+                    width="30px"
+                    className="rounded"
+                    alt="Linkwarden Logo"
+                  />
+                </a>
+                <h1 className="text-lg">Add Link</h1>
+              </div>
+              <div className="flex items-center justify-center space-x-2">
+                <ModeToggle />
+                <p
+                  className="text-blue-500 text-xs cursor-pointer hover:opacity-80 duration-200 ease-in-out w-fit"
+                  onClick={openOptions}
+                >
+                  Config
+                </p>
+              </div>
+            </div>
+            <BookmarkForm />
+          </Container>
+        ) : (
+          <NotConfigured />
+        )
+      }
     </WholeContainer>
   );
 }