From 01320798423db4b3f9583b15fb8ad9c759211aed Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Fri, 24 Feb 2023 07:59:19 +0530
Subject: [PATCH] fixes 1. from Nicks list

---
 frontend/src/preferences/APIKeyModal.tsx     |   2 +-
 frontend/src/preferences/SelectDocsModal.tsx | 264 +++++++++----------
 2 files changed, 133 insertions(+), 133 deletions(-)

diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
index b440500a..6dc49de2 100644
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -41,7 +41,7 @@ export default function APIKeyModal({
     >
       <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
         <p className="text-xl text-jet">OpenAI API Key</p>
-        <p className="text-lg leading-5 text-gray-500">
+        <p className="text-md leading-6 text-gray-500">
           Before you can start using DocsGPT we need you to provide an API key
           for llm. Currently, we support only OpenAI but soon many more. You can
           find it here.
diff --git a/frontend/src/preferences/SelectDocsModal.tsx b/frontend/src/preferences/SelectDocsModal.tsx
index 691f90c1..36919632 100644
--- a/frontend/src/preferences/SelectDocsModal.tsx
+++ b/frontend/src/preferences/SelectDocsModal.tsx
@@ -1,132 +1,132 @@
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ActiveState } from '../models/misc';
-import {
-  setSelectedDocs,
-  setSourceDocs,
-  selectSourceDocs,
-} from './preferenceSlice';
-import { getDocs, Doc } from './selectDocsApi';
-
-export default function APIKeyModal({
-  modalState,
-  setModalState,
-  isCancellable = true,
-}: {
-  modalState: ActiveState;
-  setModalState: (val: ActiveState) => void;
-  isCancellable?: boolean;
-}) {
-  const dispatch = useDispatch();
-  const docs = useSelector(selectSourceDocs);
-  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
-  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  function handleSubmit() {
-    if (!localSelectedDocs) {
-      setIsError(true);
-    } else {
-      dispatch(setSelectedDocs(localSelectedDocs));
-      setModalState('INACTIVE');
-      setLocalSelectedDocs(null);
-      setIsError(false);
-    }
-  }
-
-  function handleCancel() {
-    setLocalSelectedDocs(null);
-    setIsError(false);
-    setModalState('INACTIVE');
-  }
-
-  useEffect(() => {
-    async function requestDocs() {
-      const data = await getDocs();
-      dispatch(setSourceDocs(data));
-    }
-
-    requestDocs();
-  }, []);
-
-  return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
-    >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
-        <p className="text-xl text-jet">Select Source Documentation</p>
-        <p className="text-lg leading-5 text-gray-500">
-          Please select the library of documentation that you would like to use
-          with our app.
-        </p>
-        <div className="relative">
-          <div
-            className="h-10 w-full cursor-pointer border-b-2"
-            onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-          >
-            {!localSelectedDocs ? (
-              <p className="py-3 text-gray-500">Select</p>
-            ) : (
-              <p className="py-3">
-                {localSelectedDocs.name} {localSelectedDocs.version}
-              </p>
-            )}
-          </div>
-          {isDocsListOpen && (
-            <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
-              {docs ? (
-                docs.map((doc, index) => {
-                  if (doc.model) {
-                    return (
-                      <div
-                        key={index}
-                        onClick={() => {
-                          setLocalSelectedDocs(doc);
-                          setIsDocsListOpen(false);
-                        }}
-                        className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
-                      >
-                        <p className="ml-5 py-3">
-                          {doc.name} {doc.version}
-                        </p>
-                      </div>
-                    );
-                  }
-                })
-              ) : (
-                <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
-                  <p className="ml-5 py-3">No default documentation.</p>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="flex flex-row-reverse">
-          {isCancellable && (
-            <button
-              onClick={() => handleCancel()}
-              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
-            >
-              Cancel
-            </button>
-          )}
-          <button
-            onClick={() => {
-              handleSubmit();
-            }}
-            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-          >
-            Save
-          </button>
-          {isError && (
-            <p className="mr-auto text-sm text-red-500">
-              Please select source documentation.
-            </p>
-          )}
-        </div>
-      </article>
-    </div>
-  );
-}
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ActiveState } from '../models/misc';
+import {
+  setSelectedDocs,
+  setSourceDocs,
+  selectSourceDocs,
+} from './preferenceSlice';
+import { getDocs, Doc } from './selectDocsApi';
+
+export default function APIKeyModal({
+  modalState,
+  setModalState,
+  isCancellable = true,
+}: {
+  modalState: ActiveState;
+  setModalState: (val: ActiveState) => void;
+  isCancellable?: boolean;
+}) {
+  const dispatch = useDispatch();
+  const docs = useSelector(selectSourceDocs);
+  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
+  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  function handleSubmit() {
+    if (!localSelectedDocs) {
+      setIsError(true);
+    } else {
+      dispatch(setSelectedDocs(localSelectedDocs));
+      setModalState('INACTIVE');
+      setLocalSelectedDocs(null);
+      setIsError(false);
+    }
+  }
+
+  function handleCancel() {
+    setLocalSelectedDocs(null);
+    setIsError(false);
+    setModalState('INACTIVE');
+  }
+
+  useEffect(() => {
+    async function requestDocs() {
+      const data = await getDocs();
+      dispatch(setSourceDocs(data));
+    }
+
+    requestDocs();
+  }, []);
+
+  return (
+    <div
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+        <p className="text-xl text-jet">Select Source Documentation</p>
+        <p className="text-md leading-6 text-gray-500">
+          Please select the library of documentation that you would like to use
+          with our app.
+        </p>
+        <div className="relative">
+          <div
+            className="h-10 w-full cursor-pointer border-b-2"
+            onClick={() => setIsDocsListOpen(!isDocsListOpen)}
+          >
+            {!localSelectedDocs ? (
+              <p className="py-3 text-gray-500">Select</p>
+            ) : (
+              <p className="py-3">
+                {localSelectedDocs.name} {localSelectedDocs.version}
+              </p>
+            )}
+          </div>
+          {isDocsListOpen && (
+            <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
+              {docs ? (
+                docs.map((doc, index) => {
+                  if (doc.model) {
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => {
+                          setLocalSelectedDocs(doc);
+                          setIsDocsListOpen(false);
+                        }}
+                        className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
+                      >
+                        <p className="ml-5 py-3">
+                          {doc.name} {doc.version}
+                        </p>
+                      </div>
+                    );
+                  }
+                })
+              ) : (
+                <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
+                  <p className="ml-5 py-3">No default documentation.</p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-row-reverse">
+          {isCancellable && (
+            <button
+              onClick={() => handleCancel()}
+              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
+            >
+              Cancel
+            </button>
+          )}
+          <button
+            onClick={() => {
+              handleSubmit();
+            }}
+            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
+          >
+            Save
+          </button>
+          {isError && (
+            <p className="mr-auto text-sm text-red-500">
+              Please select source documentation.
+            </p>
+          )}
+        </div>
+      </article>
+    </div>
+  );
+}