Remove MUI dependency

popup/src/components/EmptySelection.jsx

@@ -1,38 +1,34 @@
 import React, { useState } from "react";
-import { Card, CardActions, Typography } from "@mui/material";
-import astronautUfo from "../assets/ufo_ast.png";
-import { Button } from "@mantine/core";
-import { openAllSnipdPage } from "../utils/snippitUtils";
-import "../styles/EmptySelection.css";
+import { Button, Group, Image, Stack, Text } from "@mantine/core";
+
 import { NewNote } from "./NewNote";
+import { openAllSnipdPage } from "../utils/snippitUtils";
+import astronautUfo from "../assets/ufo_ast.png";
 
 export function EmptySelection() {
   const [isNewNote, setIsNewNote] = useState(false);
 
   const NoSelect = () => {
     return (
-      <div className="emptySelectionDiv">
+      <Stack h={"95vh"} align="center" justify="center">
         <center>
-          <img className="astronautUfoImage" src={astronautUfo} alt="Logo" />
-          <Typography className="margin16" variant="h6">
-            <b>
-              To save a snippet, please make a selection. <hr />
-              It appears that no text/image/link has been selected.
-            </b>
-            <br />
-          </Typography>
+          <Image w={"100%"} src={astronautUfo} alt="Logo" />
+          <Text m={16} fw={700} fz={18}>
+            To save a snippet, please make a selection. <hr />
+            It appears that no text/image/link has been selected.
+          </Text>
         </center>
 
-        <CardActions className="cardActions">
-          <Button className="margin16" onClick={() => setIsNewNote(true)}>
+        <Group position="center">
+          <Button m={16} onClick={() => setIsNewNote(true)}>
             Make note
           </Button>
 
-          <Button className="margin16" onClick={() => openAllSnipdPage()}>
+          <Button m={16} onClick={() => openAllSnipdPage()}>
             Central Page
           </Button>
-        </CardActions>
-      </div>
+        </Group>
+      </Stack>
     );
   };
 

popup/src/components/NewCategory..jsx

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
-import { TextField, Button, Box } from "@mui/material";
-import "../styles/Categories.css";
+import { Button, Group, TextInput } from "@mantine/core";
 
 function NewCategory({ addCategory }) {
-
   const [newCategoryName, setNewCategoryName] = useState("");
 
   const handleChange = (event) => {
@@ -15,25 +13,18 @@ function NewCategory({ addCategory }) {
   };
 
   return (
-    <div className="new-category-div" textAlign="center">
-      <TextField
-        className="margin-8"
-        id="outlined-basic"
-        label="New Category"
-        variant="outlined"
+    <Group position="center">
+      <TextInput
+        m={8}
+        placeholder="New Category Name"
         value={newCategoryName}
         onChange={handleChange}
       />
 
-      <Button
-        variant="contained"
-        className="add-category-button"
-        onClick={handleAddCategory}
-        disabled={!newCategoryName.trim()} // Disable button if the category name is empty or only contains whitespace
-      >
+      <Button m={8} onClick={handleAddCategory} disabled={!newCategoryName.trim()}>
         Add
       </Button>
-    </div>
+    </Group>
   );
 }
 

popup/src/components/NewNote.jsx

@@ -1,10 +1,7 @@
-// NewNote.js
-
 import React, { useState } from "react";
-import { CardActions, TextField } from "@mui/material";
-import { Button } from "@mantine/core";
+import { Button, Textarea } from "@mantine/core";
+
 import { saveNote } from "../utils/snippitUtils";
-import "../styles/EmptySelection.css";
 
 export function NewNote({ onClose }) {
   const [noteContent, setNoteContent] = useState("");
@@ -17,19 +14,18 @@ export function NewNote({ onClose }) {
 
   return (
     <>
-      <TextField
+      <Textarea
         label="Note content"
-        variant="outlined"
-        multiline={true}
-        rows={8}
+        minRows={4}
+        maxRows={10}
+        autosize
+        withAsterisk
         fullWidth
         onChange={(e) => setNoteContent(e.target.value)}
       />
-      <CardActions className="cardActions">
-        <Button className="margin16" onClick={handleMakeNote}>
-          Make note
-        </Button>
-      </CardActions>
+      <Button m={16} onClick={handleMakeNote}>
+        Make note
+      </Button>
     </>
   );
 }