Merge 'dev' into 'feat/agent-notifications'

autogpt_platform/frontend/src/app/(platform)/login/page.tsx

@@ -43,24 +43,8 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="mt-16 flex h-full min-h-[85vh] flex-col items-center justify-center md:mt-0">
+    <div className="flex h-full min-h-[85vh] flex-col items-center justify-center py-10">
       <AuthCard title="Login to your account">
-        {isCloudEnv ? (
-          <>
-            <div className="mb-3 w-full">
-              <GoogleOAuthButton
-                onClick={() => handleProviderLogin("google")}
-                isLoading={isGoogleLoading}
-                disabled={isLoading}
-              />
-            </div>
-            <div className="mb-3 flex w-full items-center">
-              <div className="h-px flex-1 bg-gray-300"></div>
-              <span className="text-md mx-3 text-gray-500">or</span>
-              <div className="h-px flex-1 bg-gray-300"></div>
-            </div>
-          </>
-        ) : null}
         <Form {...form}>
           <form onSubmit={handleSubmit} className="flex w-full flex-col gap-1">
             <FormField
@@ -121,6 +105,13 @@ export default function LoginPage() {
               {isLoading ? "Logging in..." : "Login"}
             </Button>
           </form>
+          {isCloudEnv ? (
+            <GoogleOAuthButton
+              onClick={() => handleProviderLogin("google")}
+              isLoading={isGoogleLoading}
+              disabled={isLoading}
+            />
+          ) : null}
           <AuthFeedback
             type="login"
             message={feedback}

autogpt_platform/frontend/src/app/(platform)/signup/page.tsx

@@ -56,25 +56,8 @@ export default function SignupPage() {
   const termsError = form.formState.errors.agreeToTerms?.message;
 
   return (
-    <div className="mt-24 flex h-full min-h-[85vh] flex-col items-center justify-center md:mt-0">
+    <div className="flex h-full min-h-[85vh] flex-col items-center justify-center py-10">
       <AuthCard title="Create a new account">
-        {isCloudEnv ? (
-          <>
-            <div className="mb-2 w-full">
-              <GoogleOAuthButton
-                onClick={() => handleProviderSignup("google")}
-                isLoading={isGoogleLoading}
-                disabled={isLoading}
-              />
-            </div>
-            <div className="mb-3 flex w-full items-center">
-              <div className="h-px flex-1 bg-gray-300"></div>
-              <span className="text-md mx-3 text-gray-500">or</span>
-              <div className="h-px flex-1 bg-gray-300"></div>
-            </div>
-          </>
-        ) : null}
-
         <Form {...form}>
           <form onSubmit={handleSubmit} className="flex w-full flex-col gap-1">
             <FormField
@@ -201,6 +184,13 @@ export default function SignupPage() {
             </Button>
           </form>
         </Form>
+        {isCloudEnv ? (
+          <GoogleOAuthButton
+            onClick={() => handleProviderSignup("google")}
+            isLoading={isGoogleLoading}
+            disabled={isLoading}
+          />
+        ) : null}
         <AuthFeedback
           type="signup"
           message={feedback}

autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx

@@ -15,7 +15,7 @@ export async function Navbar() {
     <>
       <nav className="sticky top-0 z-40 hidden h-16 items-center rounded-bl-2xl rounded-br-2xl border border-white/50 bg-[#f3f4f6]/20 p-3 backdrop-blur-[26px] md:inline-flex">
         {/* Left section */}
-        <div className="flex flex-1 items-center gap-6">
+        <div className="flex flex-1 items-center gap-5">
           {isLoggedIn
             ? loggedInLinks.map((link) => (
                 <NavbarLink key={link.name} name={link.name} href={link.href} />

autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarLink.tsx

@@ -11,6 +11,8 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Text } from "../../../atoms/Text/Text";
 
+const iconWidthClass = "h-5 w-5";
+
 interface Props {
   name: string;
   href: string;
@@ -21,42 +23,50 @@ export function NavbarLink({ name, href }: Props) {
   const isActive = pathname.includes(href);
 
   return (
-    <Link
-      href={href}
-      data-testid={`navbar-link-${name.toLowerCase()}`}
-      className="font-poppins text-[20px] leading-[28px]"
-    >
+    <Link href={href} data-testid={`navbar-link-${name.toLowerCase()}`}>
       <div
         className={cn(
           "flex items-center justify-start gap-1 p-2",
           isActive &&
-            "rounded-small bg-neutral-800 p-2 transition-all duration-300 dark:bg-neutral-200",
+            "rounded-small bg-neutral-800 py-2 pl-2 pr-3 transition-all duration-300 dark:bg-neutral-200",
         )}
       >
         {href === "/marketplace" && (
           <StorefrontIcon
-            className={cn("h-6 w-6", isActive && "text-white dark:text-black")}
+            className={cn(
+              iconWidthClass,
+              isActive && "text-white dark:text-black",
+            )}
           />
         )}
         {href === "/build" && (
           <CubeIcon
-            className={cn("h-6 w-6", isActive && "text-white dark:text-black")}
+            className={cn(
+              iconWidthClass,
+              isActive && "text-white dark:text-black",
+            )}
           />
         )}
         {href === "/monitor" && (
           <IconLaptop
-            className={cn("h-6 w-6", isActive && "text-white dark:text-black")}
+            className={cn(
+              iconWidthClass,
+              isActive && "text-white dark:text-black",
+            )}
           />
         )}
         {href === "/library" && (
           <HouseIcon
-            className={cn("h-6 w-6", isActive && "text-white dark:text-black")}
+            className={cn(
+              iconWidthClass,
+              isActive && "text-white dark:text-black",
+            )}
           />
         )}
         <Text
-          variant="body-medium"
+          variant="h4"
           className={cn(
-            "hidden lg:block",
+            "hidden !font-poppins lg:block",
             isActive ? "!text-white" : "!text-black",
           )}
         >