Merge pull request #125 from arc53/fe-fixed

Fe fixed

frontend/src/App.tsx

@@ -19,7 +19,7 @@ export default function App() {
       />
       <div
         className={`transition-all duration-200 ${
-          navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-96' : ' ml-0 md:ml-16'
+          navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-60' : ' ml-0 md:ml-16'
         }`}
       >
         <Routes>

frontend/src/Navigation.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
+import Arrow2 from './assets/dropdown-arrow.svg';
 import Message from './assets/message.svg';
 import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
@@ -45,7 +46,7 @@ export default function Navigation({
       <div
         className={`${
           navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem] lg:-ml-80'
-        } fixed z-10 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all duration-200 lg:w-96`}
+        } fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all duration-200 lg:w-96`}
       >
         <div className={'h-16 w-full border-b-2'}>
           <button
@@ -77,9 +78,9 @@ export default function Navigation({
 
         <div className="flex-grow border-b-2 border-gray-100"></div>
         <div className="flex flex-grow flex-col-reverse border-b-2">
-          <div className="relative my-4 px-6 ">
+          <div className="relative my-4 px-6">
             <div
-              className="h-12 w-full cursor-pointer rounded-md border-2"
+              className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2"
               onClick={() => setIsDocsListOpen(!isDocsListOpen)}
             >
               {selectedDocs && (
@@ -87,6 +88,13 @@ export default function Navigation({
                   {selectedDocs.name} {selectedDocs.version}
                 </p>
               )}
+              <img
+                src={Arrow2}
+                alt="arrow"
+                className={`${
+                  isDocsListOpen ? 'rotate-0' : '-rotate-90'
+                } mr-3 w-3 transition-all`}
+              />
             </div>
             {isDocsListOpen && (
               <div className="absolute top-12 left-0 right-0 mx-6 max-h-52 overflow-y-scroll bg-white shadow-lg">
@@ -165,12 +173,14 @@ export default function Navigation({
           </a>
         </div>
       </div>
+      <div className="fixed h-16 w-full border-b-2 bg-gray-50 md:hidden">
         <button
-        className="fixed mt-5 ml-6 h-6 w-6 md:hidden"
+          className="mt-5 ml-6 h-6 w-6 md:hidden"
           onClick={() => setNavState('ACTIVE')}
         >
           <img src={Hamburger} alt="menu toggle" className="w-7" />
         </button>
+      </div>
       <SelectDocsModal
         modalState={selectedDocsModalState}
         setModalState={setSelectedDocsModalState}

frontend/src/assets/dropdown-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L5 5L10 0H0Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/conversation/Conversation.tsx

@@ -30,7 +30,7 @@ export default function Conversation() {
 
   return (
     <div className="flex justify-center p-6">
-      <div className="flex w-10/12 flex-col transition-all md:w-1/2">
+      <div className="flex mt-20 w-10/12 flex-col transition-all md:w-1/2">
         {messages.map((message, index) => {
           return (
             <ConversationBubble

frontend/src/preferences/SelectDocsModal.tsx

@@ -7,7 +7,7 @@ import {
   selectSourceDocs,
   selectSelectedDocs,
 } from './preferenceSlice';
-import { getDocs, Doc } from './selectDocsApi';
+import { getDocs, Doc } from './preferenceApi';
 
 export default function APIKeyModal({
   modalState,

frontend/src/preferences/selectDocsApi.ts

@@ -1,33 +0,0 @@
-//Exporting Doc type from here since its the first place its used and seems needless to make an entire file for it.
-export type Doc = {
-  name: string;
-  language: string;
-  version: string;
-  description: string;
-  fullName: string;
-  dat: string;
-  docLink: string;
-  model: string;
-};
-
-//Fetches all JSON objects from the source. We only use the objects with the "model" property in SelectDocsModal.tsx. Hopefully can clean up the source file later.
-export async function getDocs(): Promise<Doc[] | null> {
-  try {
-    //Fetch default source docs
-    const response = await fetch(
-      'https://d3dg1063dc54p9.cloudfront.net/combined.json',
-    );
-    const data = await response.json();
-
-    //Create array of Doc objects
-    const docs: Doc[] = [];
-
-    data.forEach((doc: object) => {
-      docs.push(doc as Doc);
-    });
-
-    return docs;
-  } catch (error) {
-    return null;
-  }
-}