more modal styles cleanup

reorproject · Nov 29, 2023 · 0deeaee · 0deeaee
1 parent 970d696
commit 0deeaee
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/components/File/NewNote.tsx b/src/components/File/NewNote.tsx
@@ -34,13 +34,13 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="mr-6">
-        <h2 className="text-2xl font-semibold mb-4 text-white">
+      <div className="ml-2 mr-6 mt-0 h-full min-w-[400px]">
+        <h2 className="text-xl font-semibold mb-4 text-white">
           Create New Note
         </h2>
         <input
           type="text"
-          className="form-input block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out"
+          className="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out"
           value={fileName}
           onChange={(e) => setFileName(e.target.value)}
           onKeyDown={handleKeyPress}

diff --git a/src/components/Generic/Modal.tsx b/src/components/Generic/Modal.tsx
@@ -30,8 +30,9 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
       <div
         ref={modalRef}
-        className="bg-gray-800 rounded-lg shadow-xl w-full max-w-lg p-2"
+        className="flex bg-gray-800 rounded-lg shadow-xl max-w-lg p-2"
       >
+        {children}
         <div className="flex justify-end">
           <button
             onClick={onClose}
@@ -40,7 +41,6 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
             <span className="text-3xl leading-none">&times;</span>
           </button>
         </div>
-        {children}
       </div>
     </div>
   );

diff --git a/src/components/Settings/SettingsModal.tsx b/src/components/Settings/SettingsModal.tsx
@@ -21,18 +21,26 @@ const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
 
   if (!isOpen) return null;
 
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSave();
+    }
+  };
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className=" text-white rounded-lg p-5">
-        <h2 className="text-xl mb-4">OpenAI Key Settings</h2>
+      <div className="ml-2 mr-6 mt-0 h-full min-w-[400px]">
+        <h2 className="text-xl font-semibold mb-4 text-white">
+          Open AI Key Settings
+        </h2>
         <input
-          type="password" // Changed to password type
-          className="w-full p-2 text-black"
-          placeholder="Enter your OpenAI Key"
+          type="text"
+          className="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out"
           value={openAIKey}
           onChange={(e) => setOpenAIKey(e.target.value)}
+          onKeyDown={handleKeyPress}
+          placeholder="Note Name"
         />
-
         <Button
           className="mt-2 border-none h-10 hover:bg-slate-800 cursor-pointer"
           onClick={handleSave}