some work to make the settings page be properly aligned

reorproject · Dec 12, 2023 · 7b29a1b · 7b29a1b
1 parent 28db005
commit 7b29a1b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git a/src/components/Generic/Select.tsx b/src/components/Generic/Select.tsx
@@ -37,25 +37,25 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   };
 
   return (
-    <div className="relative w-full bg-red-200" ref={wrapperRef}>
+    <div className="relative w-full " ref={wrapperRef}>
       <div
-        className="flex justify-between items-center  w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-pointer"
+        className="flex justify-between items-center  w-full py-2 border border-gray-300 rounded-md bg-gray-200 cursor-pointer"
         onClick={toggleDropdown}
       >
-        <span>{value}</span>
+        <span className="ml-2 text-[13px] text-gray-600">{value}</span>
         <span
-          className="transform transition-transform"
+          className="transform transition-transform mr-2"
           style={{ transform: isOpen ? "rotate(180deg)" : "none" }}
         >
           &#9660;{" "}
         </span>
       </div>
       {isOpen && (
-        <div className="absolute w-full border px-3 py-2 border-gray-300 rounded-md shadow-lg z-10 bg-white">
+        <div className="absolute w-full border border-gray-300 rounded-md shadow-lg z-10 bg-white">
           {options.map((option, index) => (
             <div
               key={index}
-              className="px-3 py-2 hover:bg-gray-100 cursor-pointer"
+              className=" py-2 hover:bg-gray-100 cursor-pointer"
               onClick={() => handleOptionClick(option)}
             >
               {option}

diff --git a/src/components/Settings/LLMSettings.tsx b/src/components/Settings/LLMSettings.tsx
@@ -60,21 +60,16 @@ const AIModelManager: React.FC = () => {
   const modelNames = Object.keys(modelConfigs);
 
   return (
-    <div>
+    <div className="w-full ">
       <h4 className="font-semibold mb-2 text-white">LLM</h4>
-      {/* <input
-        type="text"
-        className="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-not-allowed"
-        value={"GPT-3.5-turbo"}
-        disabled
-        placeholder="LLM Model"
-      /> */}
 
-      <CustomSelect
-        options={modelNames}
-        value={defaultModel}
-        onChange={handleDefaultModelChange}
-      />
+      <div className="w-full">
+        <CustomSelect
+          options={modelNames}
+          value={defaultModel}
+          onChange={handleDefaultModelChange}
+        />
+      </div>
       {/* <select
         value={defaultModel}
         onChange={handleDefaultModelChange}

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -30,16 +30,18 @@ const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="ml-2 mr-6 mt-0 h-full min-w-[400px]">
+      <div className="ml-2  mt-0 h-full w-[500px]">
         <h2 className="text-2xl font-semibold mb-4 text-white">Settings</h2>
         <h4 className="font-semibold mb-2 text-white">Embedding Model</h4>
-        <input
-          type="text"
-          className="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-200 cursor-not-allowed"
-          value={"BAAI/bge-base-en-v1.5"}
-          disabled
-          placeholder="Embedding Model"
-        />
+        <div className="w-full">
+          <input
+            type="text"
+            className=" w-full py-2 pl-2 box-border border border-gray-300 rounded-md  bg-gray-200 cursor-not-allowed"
+            value={"BAAI/bge-base-en-v1.5"}
+            disabled
+            placeholder="Embedding Model"
+          />
+        </div>
         {/* <h4 className="font-semibold mb-2 text-white">LLM</h4>
         <input
           type="text"
@@ -48,13 +50,13 @@ const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
           disabled
           placeholder="LLM Model"
         /> */}
-        <div className="mt-2">
+        <div className="mt-2 w-full ">
           <AIModelManager />
         </div>
         <h4 className="font-semibold mb-2 text-white">Open AI Key</h4>
         <input
           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"
+          className="block w-full px-3 py-2 border border-gray-300 box-border 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}