TODOs updated, removed App.css, About page

frontend/src/App.css

@@ -1,4 +0,0 @@
-html,
-body {
-  min-height: 100vh;
-}

frontend/src/App.tsx

@@ -3,13 +3,13 @@ import { Routes, Route } from 'react-router-dom';
 import Navigation from './components/Navigation/Navigation';
 import DocsGPT from './components/DocsGPT';
 import APIKeyModal from './components/APIKeyModal';
-import './App.css';
+import About from './components/About';
 
 export default function App() {
   //Currently using primitive state management. Will most likely be replaced with Redux.
   const [isMobile, setIsMobile] = useState(true);
   const [isMenuOpen, setIsMenuOpen] = useState(true);
-  const [isApiModalOpen, setIsApiModalOpen] = useState(true);
+  const [isApiModalOpen, setIsApiModalOpen] = useState(false);
   const [apiKey, setApiKey] = useState('');
 
   const handleResize = () => {
@@ -49,6 +49,7 @@ export default function App() {
       />
       <Routes>
         <Route path="/" element={<DocsGPT isMenuOpen={isMenuOpen} />} />
+        <Route path="/about" element={<About isMenuOpen={isMenuOpen} />} />
       </Routes>
     </div>
   );

frontend/src/components/APIKeyModal.tsx

@@ -11,6 +11,10 @@ export default function APIKeyModal({
   apiKey: string;
   setApiKey: React.Dispatch<React.SetStateAction<string>>;
 }) {
+  //TODO - Add form validation
+  //TODO - Connect to backend
+  //TODO - Add link to OpenAI API Key page
+
   const [formError, setFormError] = useState(false);
 
   const handleResetKey = () => {
@@ -28,7 +32,7 @@ export default function APIKeyModal({
         isApiModalOpen ? 'visible' : 'hidden'
       } absolute z-30  h-screen w-screen  bg-gray-alpha`}
     >
-      <div className="mx-auto mt-24 flex w-128 flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+      <article className="mx-auto mt-24 flex w-128 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">
           Before you can start using DocsGPT we need you to provide an API key
@@ -54,7 +58,7 @@ export default function APIKeyModal({
             Save
           </button>
         </div>
-      </div>
+      </article>
     </div>
   );
 }

frontend/src/components/About.tsx

@@ -0,0 +1,58 @@
+export default function About({ isMenuOpen }: { isMenuOpen: boolean }) {
+  //TODO - Add hyperlinks to text
+  //TODO - Styling
+
+  return (
+    //Parent div for all content shown through App.tsx routing needs to have this styling.
+    <div
+      className={`${
+        isMenuOpen ? 'md:ml-72 lg:ml-96' : 'ml-16'
+      } h-full w-full p-6 transition-all`}
+    >
+      <article className="mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
+        <p className="text-3xl font-semibold">About DocsGPT 🦖</p>
+        <p className="mt-4 text-xl">
+          Find the information in your documentation through AI-powered
+          open-source chatbot. Powered by GPT-3, Faiss and LangChain.
+        </p>
+
+        <div>
+          <p className="text-lg">
+            If you want to add your own documentation, please follow the
+            instruction below:
+          </p>
+          <p className="mt-4 text-lg">
+            1. Navigate to{' '}
+            <span className="bg-gray-200 italic"> /application </span> folder
+          </p>
+          <p className="mt-4 text-lg">
+            2. Install dependencies from{' '}
+            <span className="bg-gray-200 italic">
+              pip install -r requirements.txt
+            </span>
+          </p>
+          <p className="mt-4 text-lg">
+            3. Prepare a <span className="bg-gray-200 italic">.env</span> file.
+            Copy <span className="bg-gray-200 italic">.env_sample</span> and
+            create <span className="bg-gray-200 italic">.env</span> with your
+            OpenAI API token
+          </p>
+          <p className="mt-4 text-lg">
+            4. Run the app with{' '}
+            <span className="bg-gray-200 italic">python app.py</span>
+          </p>
+        </div>
+
+        <p className="text-lg">
+          Currently It uses python pandas documentation, so it will respond to
+          information relevant to pandas. If you want to train it on different
+          documentation - please follow this guide.
+        </p>
+
+        <p className="mt-4 text-lg">
+          If you want to launch it on your own server - follow this guide.
+        </p>
+      </article>
+    </div>
+  );
+}

frontend/src/components/Navigation/Navigation.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { NavLink } from 'react-router-dom';
 import Arrow1 from './imgs/arrow.svg';
 import Key from './imgs/key.svg';
 import Info from './imgs/info.svg';
@@ -57,10 +58,13 @@ function DesktopNavigation({
           </div>
 
           <div className="flex h-48 flex-col border-b-2 border-gray-100">
-            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+            <NavLink
+              to="/about"
+              className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            >
               <img src={Info} alt="info" className="ml-2 w-5" />
               <p className="my-auto text-eerie-black">About</p>
-            </div>
+            </NavLink>
 
             <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
               <img src={Link} alt="link" className="ml-2 w-5" />

frontend/src/index.css

@@ -15,6 +15,8 @@
 html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 
 /* Sections
@@ -26,6 +28,8 @@ html {
 
 body {
   margin: 0;
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 
 /**