Merge pull request #1999 from hanzalahwaheed/feat/ui-enhancements

Feat: UI enhancements

frontend/src/App.tsx

@@ -37,9 +37,9 @@ function MainLayout() {
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <ActionButtons showNewChat={true} showShare={true} />
       <div
-        className={`h-[calc(100dvh-64px)] overflow-auto lg:h-screen ${
+        className={`h-[calc(100dvh-64px)] overflow-auto transition-all duration-300 ease-in-out lg:h-screen ${
           !(isMobile || isTablet)
-            ? `ml-0 ${!navOpen ? 'lg:mx-auto' : 'lg:ml-72'}`
+            ? `${navOpen ? 'lg:ml-72' : 'lg:ml-0'}`
             : 'ml-0 lg:ml-16'
         }`}
       >

frontend/src/Navigation.tsx

@@ -292,20 +292,26 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   useDefaultDocument();
   return (
     <>
-      {!navOpen && (
+      {(isMobile || isTablet) && navOpen && (
-        <div className="absolute top-3 left-3 z-20 hidden transition-all duration-25 lg:block">
+        <div
+          className="fixed inset-0 z-10 bg-black opacity-50 transition-opacity duration-300"
+          onClick={() => setNavOpen(false)}
+        />
+      )}
+
+      {
+        <div className="absolute top-3 left-3 z-20 hidden transition-all duration-300 ease-in-out lg:block">
           <div className="flex items-center gap-3">
             <button
               onClick={() => {
                 setNavOpen(!navOpen);
               }}
+              className="transition-transform duration-200 hover:scale-110"
             >
               <img
                 src={Expand}
                 alt="Toggle navigation menu"
-                className={`${
+                className="m-auto transition-all duration-300 ease-in-out"
-                  !navOpen ? 'rotate-180' : 'rotate-0'
-                } m-auto transition-all duration-200`}
               />
             </button>
             {queries?.length > 0 && (
@@ -313,6 +319,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 onClick={() => {
                   newChat();
                 }}
+                className="transition-transform duration-200 hover:scale-110"
               >
                 <img
                   src={openNewChat}
@@ -326,12 +333,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </div>
           </div>
         </div>
-      )}
+      }
       <div
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-72'
-        } bg-lotion dark:border-r-purple-taupe dark:bg-chinese-black fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-20 dark:text-white`}
+        } bg-lotion dark:border-r-purple-taupe dark:bg-chinese-black fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-300 ease-in-out dark:text-white`}
       >
         <div
           className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -345,7 +352,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             }}
           >
             <a href="/" className="flex gap-1.5">
-              <img className="mb-2 h-10" src={DocsGPT3} alt="DocsGPT Logo" />
+              <img className="h-10" src={DocsGPT3} alt="DocsGPT Logo" />
               <p className="my-auto text-2xl font-semibold">DocsGPT</p>
             </a>
           </div>
@@ -358,9 +365,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <img
               src={Expand}
               alt="Toggle navigation menu"
-              className={`${
+              className="m-auto transition-all duration-300 ease-in-out hover:scale-110"
-                !navOpen ? 'rotate-180' : 'rotate-0'
-              } m-auto transition-all duration-200`}
             />
           </button>
         </div>

frontend/src/agents/AgentLogs.tsx

@@ -49,7 +49,7 @@ export default function AgentLogs() {
         </p>
       </div>
       <div className="mt-5 flex w-full flex-wrap items-center justify-between gap-2 px-4">
-        <h1 className="text-eerie-black m-0 text-[40px] font-bold dark:text-white">
+        <h1 className="text-eerie-black m-0 text-[32px] font-bold md:text-[40px] dark:text-white">
           Agent Logs
         </h1>
       </div>

frontend/src/agents/NewAgent.tsx

@@ -527,7 +527,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
         </p>
       </div>
       <div className="mt-5 flex w-full flex-wrap items-center justify-between gap-2 px-4">
-        <h1 className="text-eerie-black m-0 text-[40px] font-bold dark:text-white">
+        <h1 className="text-eerie-black m-0 text-[32px] font-bold lg:text-[40px] dark:text-white">
           {modeConfig[effectiveMode].heading}
         </h1>
         <div className="flex flex-wrap items-center gap-1">

frontend/src/agents/index.tsx

@@ -111,7 +111,7 @@ function AgentsList() {
   }, [token]);
   return (
     <div className="p-4 md:p-12">
-      <h1 className="text-eerie-black mb-0 text-[40px] font-bold dark:text-[#E0E0E0]">
+      <h1 className="text-eerie-black mb-0 text-[32px] font-bold lg:text-[40px] dark:text-[#E0E0E0]">
         Agents
       </h1>
       <p className="dark:text-gray-4000 mt-5 text-[15px] text-[#71717A]">

frontend/src/components/CopyButton.tsx

@@ -8,10 +8,6 @@ import CopyIcon from '../assets/copy.svg?react';
 
 type CopyButtonProps = {
   textToCopy: string;
-  bgColorLight?: string;
-  bgColorDark?: string;
-  hoverBgColorLight?: string;
-  hoverBgColorDark?: string;
   iconSize?: string;
   padding?: string;
   showText?: boolean;
@@ -27,14 +23,11 @@ const DEFAULT_COPIED_DURATION = 2000;
 const DEFAULT_BG_LIGHT = '#FFFFFF';
 const DEFAULT_BG_DARK = 'transparent';
 const DEFAULT_HOVER_BG_LIGHT = '#EEEEEE';
-const DEFAULT_HOVER_BG_DARK = '#4A4A4A';
+const DEFAULT_HOVER_BG_DARK = '#464152';
 
 export default function CopyButton({
   textToCopy,
-  bgColorLight = DEFAULT_BG_LIGHT,
+
-  bgColorDark = DEFAULT_BG_DARK,
-  hoverBgColorLight = DEFAULT_HOVER_BG_LIGHT,
-  hoverBgColorDark = DEFAULT_HOVER_BG_DARK,
   iconSize = DEFAULT_ICON_SIZE,
   padding = DEFAULT_PADDING,
   showText = false,
@@ -50,9 +43,10 @@ export default function CopyButton({
   const iconWrapperClasses = clsx(
     'flex items-center justify-center rounded-full transition-colors duration-150 ease-in-out',
     padding,
-    `bg-[${bgColorLight}] dark:bg-[${bgColorDark}]`,
+    `bg-[${DEFAULT_BG_LIGHT}] dark:bg-[${DEFAULT_BG_DARK}]`,
-    `hover:bg-[${hoverBgColorLight}] dark:hover:bg-[${hoverBgColorDark}]`,
     {
+      [`hover:bg-[${DEFAULT_HOVER_BG_LIGHT}] dark:hover:bg-[${DEFAULT_HOVER_BG_DARK}]`]:
+        !isCopied,
       'bg-green-100 dark:bg-green-900 hover:bg-green-100 dark:hover:bg-green-900':
         isCopied,
     },