Merge branch 'arc53:main' into revamp_icon_effects

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
+import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
 import { useState } from 'react';
@@ -25,6 +26,7 @@ export default function App() {
         <Routes>
           <Route path="/" element={<Conversation />} />
           <Route path="/about" element={<About />} />
+          <Route path="*" element={<PageNotFound />} />
         </Routes>
       </div>
     </div>

frontend/src/Hero.tsx

@@ -17,9 +17,9 @@ export default function Hero({ className = '' }: { className?: string }) {
         Start by entering your query in the input field below and we will do the
         rest!
       </p>
-      <div className="sections mt-1 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0  ">
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tr-none md:rounded-br-none">
-          <div className="h-full rounded-[45px] bg-white p-6 md:rounded-tr-none md:rounded-br-none">
+      <div className="sections mt-8 flex flex-wrap items-center justify-center sm:gap-1 md:gap-0  ">
+        <div className="mr-4 mb-4 h-[224px] rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1">
+          <div className="h-full rounded-[21px] bg-white p-6">
             <img
               src="/message-text.svg"
               alt="lock"
@@ -35,8 +35,8 @@ export default function Hero({ className = '' }: { className?: string }) {
           </div>
         </div>
 
-        <div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none  md:py-1 md:px-0">
-          <div className="rounded-[45px] bg-white px-6 py-4 md:rounded-none">
+        <div className="mr-4 mb-4 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1">
+          <div className="h-full rounded-[21px] bg-white p-6">
             <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
             <h2 className="mt-2 mb-3 text-lg font-bold">Secure Data Storage</h2>
             <p className=" w-[250px] text-xs text-gray-500">
@@ -47,8 +47,8 @@ export default function Hero({ className = '' }: { className?: string }) {
             </p>
           </div>
         </div>
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tl-none md:rounded-bl-none">
-          <div className="rounded-[45px] bg-white p-6 px-6 lg:rounded-tl-none lg:rounded-bl-none">
+        <div className="mb-4 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1">
+          <div className="h-full rounded-[21px] bg-white p-6">
             <img
               src="/message-programming.svg"
               alt="lock"

frontend/src/Navigation.tsx

@@ -7,7 +7,7 @@ import Message from './assets/message.svg';
 import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
 import Info from './assets/info.svg';
-import Link from './assets/link.svg';
+import Documentation from './assets/documentation.svg';
 import Discord from './assets/discord.svg';
 import Github from './assets/github.svg';
 import UploadIcon from './assets/upload.svg';
@@ -172,7 +172,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     <>
       {!navOpen && (
         <button
-          className="duration-25 absolute relative top-3 left-3 z-20 hidden transition-all md:block"
+          className="duration-25 absolute sticky top-3 left-3 z-20 hidden transition-all md:block"
           onClick={() => {
             setNavOpen(!navOpen);
           }}
@@ -338,7 +338,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             rel="noreferrer"
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
-            <img src={Link} alt="link" className="ml-2 w-5" />
+            <img src={Documentation} alt="documentation" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">Documentation</p>
           </a>
           <a

frontend/src/PageNotFound.tsx

@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+
+export default function PageNotFound() {
+  return (
+    <div className="mx-5 grid min-h-screen md:mx-36">
+      <p className="mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
+        <h1>404</h1>
+        <p>The page you are looking for does not exist.</p>
+        <button className="pointer-cursor mr-4 flex cursor-pointer items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white hover:bg-blue-3000">
+          <Link to="/">Go Back Home</Link>
+        </button>
+      </p>
+    </div>
+  );
+}

frontend/src/assets/documentation.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
+    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="#605b5b" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+    </svg>

frontend/src/conversation/ConversationBubble.tsx

@@ -67,7 +67,7 @@ const ConversationBubble = forwardRef<
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
-            className={`ml-2 mr-5 flex flex-col rounded-3xl bg-gray-1000 p-3.5 ${
+            className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'
                 ? 'flex-row rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
                 : 'flex-col rounded-3xl'

frontend/src/hooks/index.ts

@@ -4,42 +4,63 @@ export function useOutsideAlerter<T extends HTMLElement>(
   ref: RefObject<T>,
   handler: () => void,
   additionalDeps: unknown[],
+  handleEscapeKey?: boolean,
 ) {
   useEffect(() => {
-    function handleClickOutside(this: Document, event: MouseEvent) {
+    function handleClickOutside(event: MouseEvent) {
       if (ref.current && !ref.current.contains(event.target as Node)) {
         handler();
       }
     }
+
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        handler();
+      }
+    }
+
     document.addEventListener('mousedown', handleClickOutside);
+    if (handleEscapeKey) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
+      if (handleEscapeKey) {
+        document.removeEventListener('keydown', handleEscape);
+      }
     };
   }, [ref, ...additionalDeps]);
 }
 
-// Use isMobile for checking if the width is in the expected mobile range (less than 768px)
-// use IsDesktop for effects you explicitly only want when width is wider than 960px.
 export function useMediaQuery() {
   const mobileQuery = '(max-width: 768px)';
+  const darkModeQuery = '(prefers-color-scheme: dark)'; // Detect dark mode
   const desktopQuery = '(min-width: 960px)';
   const [isMobile, setIsMobile] = useState(false);
   const [isDesktop, setIsDesktop] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
   useEffect(() => {
     const mobileMedia = window.matchMedia(mobileQuery);
     const desktopMedia = window.matchMedia(desktopQuery);
+    const darkModeMedia = window.matchMedia(darkModeQuery);
+
     const updateMediaQueries = () => {
       setIsMobile(mobileMedia.matches);
       setIsDesktop(desktopMedia.matches);
+      setIsDarkMode(darkModeMedia.matches);
     };
+
     updateMediaQueries();
+
     const listener = () => updateMediaQueries();
     window.addEventListener('resize', listener);
+
     return () => {
       window.removeEventListener('resize', listener);
     };
-  }, [mobileQuery, desktopQuery]);
+  }, [mobileQuery, desktopQuery, darkModeQuery]);
 
-  return { isMobile, isDesktop };
+  return { isMobile, isDesktop, isDarkMode };
 }