feat(frontend): landing page ui optimization (#149)

PengyuChen01 · pengyu · autofix-ci[bot] · web-flow · commit f9cbbc939239 · 2025-03-04T20:36:51.000-06:00
Co-authored-by: pengyu &lt;pengyuchen01@gmail.com&gt;
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/frontend/src/app/(main)/page.tsx b/frontend/src/app/(main)/page.tsx
@@ -8,9 +8,15 @@ import { useAuthContext } from '@/providers/AuthProvider';
 import { ProjectsSection } from '@/components/root/projects-section';
 import { PromptForm, PromptFormRef } from '@/components/root/prompt-form';
 import { ProjectContext } from '@/components/chat/code-engine/project-context';
-
+import { SignInModal } from '@/components/sign-in-modal';
+import { SignUpModal } from '@/components/sign-up-modal';
+import { useRouter } from 'next/navigation';
 export default function HomePage() {
+  // States for AuthChoiceModal
   const [showAuthChoice, setShowAuthChoice] = useState(false);
+  const router = useRouter();
+  const [showSignIn, setShowSignIn] = useState(false);
+  const [showSignUp, setShowSignUp] = useState(false);
 
   const promptFormRef = useRef<PromptFormRef>(null);
   const { isAuthorized } = useAuthContext();
@@ -19,9 +25,7 @@ export default function HomePage() {
   const handleSubmit = async () => {
     if (!promptFormRef.current) return;
 
-    // Get form data from the prompt form
     const { message, isPublic, model } = promptFormRef.current.getPromptData();
-
     if (!message.trim()) return;
 
     try {
@@ -37,12 +41,11 @@ export default function HomePage() {
       }
     } catch (error) {
       console.error('Error creating project:', error);
-      // Error handling is done via toast in ProjectContext
     }
   };
 
   return (
-    <div className="pt-32 pb-24 px-6 ">
+    <div className="pt-32 pb-24 px-6">
       <motion.div
         className="flex flex-col items-center"
         initial={{ opacity: 0, y: 20 }}
@@ -85,19 +88,28 @@ export default function HomePage() {
         </div>
       </motion.div>
 
-      {/* Modals */}
+      {/* Choice Modal */}
       <AuthChoiceModal
         isOpen={showAuthChoice}
         onClose={() => setShowAuthChoice(false)}
         onSignUpClick={() => {
           setShowAuthChoice(false);
+          setTimeout(() => {
+            setShowSignUp(true);
+          }, 100);
         }}
         onSignInClick={() => {
           setShowAuthChoice(false);
+          setTimeout(() => {
+            setShowSignIn(true);
+          }, 100);
         }}
       />
 
-      {/* Add this to your global CSS for the subtle pulse animation */}
+      {/* SignInModal & SignUpModal */}
+      <SignInModal isOpen={showSignIn} onClose={() => setShowSignIn(false)} />
+      <SignUpModal isOpen={showSignUp} onClose={() => setShowSignUp(false)} />
+
       <style jsx global>{`
         .animate-pulse-subtle {
           animation: pulse-subtle 2s infinite;
diff --git a/frontend/src/components/auth-choice-modal.tsx b/frontend/src/components/auth-choice-modal.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { BackgroundGradient } from '@/components/ui/background-gradient';
 import { Button } from '@/components/ui/button';
@@ -24,6 +25,7 @@ export function AuthChoiceModal({
         <VisuallyHidden>
           <DialogTitle>Choose Authentication Method</DialogTitle>
         </VisuallyHidden>
+
         <BackgroundGradient className="rounded-[22px] p-4 bg-white dark:bg-zinc-900">
           <div className="w-full p-6 space-y-6">
             <h2 className="text-2xl font-semibold text-center dark:text-white">
@@ -33,16 +35,31 @@ export function AuthChoiceModal({
               Choose how you want to continue
             </p>
             <div className="space-y-4">
+              {/* Sign In button */}
               <Button
                 className="w-full py-6 text-lg bg-primary hover:bg-primary/90"
-                onClick={onSignInClick}
+                onClick={() => {
+                  // 1) Close current modal
+                  onClose();
+                  // 2) After a brief delay, call onSignInClick
+                  setTimeout(() => {
+                    onSignInClick();
+                  }, 100);
+                }}
               >
                 Sign in
               </Button>
+
+              {/* Sign Up button */}
               <Button
                 variant="outline"
                 className="w-full py-6 text-lg"
-                onClick={onSignUpClick}
+                onClick={() => {
+                  onClose();
+                  setTimeout(() => {
+                    onSignUpClick();
+                  }, 100);
+                }}
               >
                 Create an account
               </Button>
diff --git a/frontend/src/components/root/nav.tsx b/frontend/src/components/root/nav.tsx
@@ -174,15 +174,15 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
         alert('Coming Soon');
       } else if (label === 'Codefox Journey') {
         e.preventDefault();
-        window.open('https://github.com/Sma1lboy/codefox', '_blank');
+        alert('Coming Soon');
       } else {
         handleTabChange(index);
       }
     };
 
     return (
       <>
-        <div className={`fixed top-5 left-0 right-0 z-50 ${className}`}>
+        <div className={` top-5 left-0 right-0 z-50 ${className}`}>
           <motion.div
             className={`w-full flex justify-around items-center px-6 py-4 ${containerClassName}`}
             initial="hidden"
diff --git a/frontend/src/components/root/prompt-form.tsx b/frontend/src/components/root/prompt-form.tsx
@@ -211,7 +211,7 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
               >
                 <SelectTrigger
                   className={cn(
-                    'w-[117px] h-6 border-0 focus:ring-0 hover:bg-gray-100 dark:hover:bg-gray-600 pl-1',
+                    'h-6 border-0 focus:ring-0 hover:bg-gray-100 dark:hover:bg-gray-600 pl-1 min-w-max',
                     (isLoading || isRegenerating) &&
                       'opacity-50 cursor-not-allowed'
                   )}
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
@@ -8,6 +8,7 @@ import UserSettings from './user-settings';
 import { SideBarItem } from './sidebar-item';
 import { Chat } from '@/graphql/type';
 import { EventEnum } from '../const/EventEnum';
+import { useRouter } from 'next/navigation';
 
 import {
   SidebarContent,
@@ -49,6 +50,7 @@ export function ChatSideBar({
   onRefetch,
 }: SidebarProps) {
   // Use a local state only for the currently selected chat.
+  const router = useRouter();
   const [currentChatid, setCurrentChatid] = useState('');
   const { setCurProject, pollChatProject } = useContext(ProjectContext);
   // Handler for starting a new chat.
@@ -84,8 +86,27 @@ export function ChatSideBar({
           className="lg:flex items-center justify-center cursor-pointer p-2 ml-3.5 mt-2"
           onClick={() => setIsCollapsed(!isCollapsed)}
         />
-
-        <div className="flex items-center justify-start w-[85%] h-14 text-sm xl:text-lg font-normal pl-4 gap-2">
+        <Button
+          onClick={() => router.push('/')}
+          variant="ghost"
+          className="
+            w-full
+            h-14
+            flex
+            items-center
+            justify-start
+            px-4
+            gap-2
+            text-sm
+            xl:text-lg
+            font-normal
+            rounded-md
+            hover:bg-yellow-50
+            transition-all
+            duration-200
+            ease-in-out
+          "
+        >
           <Image
             src="/codefox.svg"
             alt="CodeFox Logo"
@@ -98,9 +119,10 @@ export function ChatSideBar({
               CodeFox
             </span>
           )}
-        </div>
+        </Button>
+
         {/* Divider Line */}
-        <div className="border-t border-dotted border-gray-300 my-2 w-[85%] mx-auto"></div>
+        <div className="border-t border-dotted border-gray-300 my-2 w-full mx-auto" />
 
         <Button
           onClick={() => setIsModalOpen(true)}
diff --git a/frontend/src/components/sign-in-modal.tsx b/frontend/src/components/sign-in-modal.tsx
@@ -43,7 +43,9 @@ export function SignInModal({ isOpen, onClose }: SignInModalProps) {
       if (data?.login) {
         // Store tokens where desired (session storage for access, local for refresh)
         login(data.login.accessToken, data.login.refreshToken);
-        toast.success('Login successful!');
+        toast.success('Login successful!', {
+          position: 'bottom-right',
+        });
         setErrorMessage(null);
         onClose(); // Close the modal
 

Original file line number	Diff line number	Diff line change
`@@ -211,7 +211,7 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(`
`211`	`211`	`>`
`212`	`212`	`<SelectTrigger`
`213`	`213`	`className={cn(`
`214`		`- 'w-[117px] h-6 border-0 focus:ring-0 hover:bg-gray-100 dark:hover:bg-gray-600 pl-1',`
	`214`	`+ 'h-6 border-0 focus:ring-0 hover:bg-gray-100 dark:hover:bg-gray-600 pl-1 min-w-max',`
`215`	`215`	`(isLoading \|\| isRegenerating) &&`
`216`	`216`	`'opacity-50 cursor-not-allowed'`
`217`	`217`	`)}`