improve button styles

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@huggingface/hub": "^0.12.0",
+    "@material-tailwind/react": "^2.1.5",
     "@mdxeditor/editor": "1.11.4",
     "@tailwindcss/typography": "^0.5.10",
     "@xenova/transformers": "^2.8.0",

src/components/File/FileEditor.tsx

@@ -77,7 +77,6 @@ export const FileEditor: React.FC<FileEditorProps> = ({
   }, [content]); // Dependency on content ensures saveFile has the latest content
 
   useEffect(() => {
-    console.log("setting content in child: ", content);
     setContentInParent(content);
   }, [content]);
 

src/components/File/NewNote.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Modal from "../Generic/Modal";
 // import Modal from './Modal'; // Adjust the import path as necessary
+import { Button } from "@material-tailwind/react";
 
 interface NewNoteComponentProps {
   isOpen: boolean;
@@ -45,12 +46,13 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
           onKeyDown={handleKeyPress}
           placeholder="Note Name"
         />
-        <button
+        <Button
+          className="mt-2 border-none h-10 hover:bg-slate-800 cursor-pointer"
           onClick={sendNewNoteMsg}
-          className="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
         >
           Create
-        </button>
+        </Button>
+        {/* </button> */}
       </div>
     </Modal>
   );

src/components/Settings/SettingsModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Modal from "../Generic/Modal";
-
+import { Button } from "@material-tailwind/react";
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -32,12 +32,13 @@ const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
           value={openAIKey}
           onChange={(e) => setOpenAIKey(e.target.value)}
         />
-        <button
-          className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+
+        <Button
+          className="mt-2 border-none h-10 hover:bg-slate-800 cursor-pointer"
           onClick={handleSave}
         >
           Save Key
-        </button>
+        </Button>
       </div>
     </Modal>
   );