profile for mobile

app/profile/page.tsx

@@ -1,4 +1,5 @@
 import { ChevronLeftIcon } from "lucide-react";
+
 import { getSession } from "@auth0/nextjs-auth0";
 
 import { ProfilePage } from "./components/profile-page";
@@ -9,14 +10,11 @@ export default async function Profile() {
 
   return (
     <div className="flex-col md:flex">
-      <div className="flex-1 space-y-4 p-8 pt-6">
+      <div className="flex-1 space-y-4 p-5 sm:p-8 pt-6">
         <div className="max-w-screen-lg mx-auto justify-center">
-          <div className="flex items-center space-x-1 text-sm text-muted-foreground">
+          <div className="flex items-center space-x-1 text-sm text-black">
             <ChevronLeftIcon className="h-4 w-4" />
-            <a
-              href="/"
-              className="font-medium text-foreground text-muted-foreground"
-            >
+            <a href="/" className="font-light text-black">
               Back to chat
             </a>
           </div>

components/auth0/basic-info-form.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
@@ -21,52 +15,28 @@ export default function BasicInfoForm({ user }: { user: KeyValueMap }) {
   const phone = user.phone_number;
 
   return (
-    <Card className="w-full">
-      <CardHeader className="p-4 md:p-6">
-        <CardTitle className="text-lg font-normal"></CardTitle>
-        <CardDescription></CardDescription>
+    <Card className="w-full shadow-none">
+      <CardHeader className="p-4 md:p-6 mb-3">
+        <CardTitle className="text-lg sm:text-xl font-bold tracking-tight">General</CardTitle>
+        <CardDescription className="text-sm font-light">Read only profile</CardDescription>
       </CardHeader>
       <CardContent className="p-4 pt-0 md:p-6 md:pt-0">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="grid items-center gap-1.5">
             <Label htmlFor="name">Name</Label>
-            <Input
-              disabled
-              type="name"
-              id="name"
-              placeholder="Name"
-              defaultValue={name}
-            />
+            <Input disabled type="name" id="name" placeholder="Name" defaultValue={name} />
           </div>
           <div className="grid items-center gap-1.5">
             <Label htmlFor="email">Email</Label>
-            <Input
-              disabled
-              type="email"
-              id="email"
-              placeholder="Email"
-              defaultValue={email}
-            />
+            <Input disabled type="email" id="email" placeholder="Email" defaultValue={email} />
           </div>
           <div className="grid items-center gap-1.5">
             <Label htmlFor="nickname">Nickname</Label>
-            <Input
-              disabled
-              type="nickname"
-              id="nickname"
-              placeholder="Nickname"
-              defaultValue={nickname}
-            />
+            <Input disabled type="nickname" id="nickname" placeholder="Nickname" defaultValue={nickname} />
           </div>
           <div className="grid items-center gap-1.5">
             <Label htmlFor="phone">Phone</Label>
-            <Input
-              disabled
-              type="phone"
-              id="phone"
-              placeholder="(415) 555-5555"
-              defaultValue={phone}
-            />
+            <Input disabled type="phone" id="phone" placeholder="(415) 555-5555" defaultValue={phone} />
           </div>
         </div>
       </CardContent>

components/auth0/connected-accounts.tsx

@@ -9,6 +9,8 @@ import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/components/ui/use-toast";
 
+import { GoogleIcon } from "../icons";
+
 function Spinner() {
   return (
     <svg
@@ -128,10 +130,10 @@ export default function ConnectedAccounts({
   };
 
   return (
-    <Card>
-      <CardHeader className="p-4 md:p-6">
-        <CardTitle className="text-lg font-normal"></CardTitle>
-        <CardDescription>Connect your social accounts to access their information.</CardDescription>
+    <Card className="shadow-none">
+      <CardHeader className="p-4 md:p-6 mb-3">
+        <CardTitle className="text-lg sm:text-xl font-bold tracking-tight">Accounts</CardTitle>
+        <CardDescription className="text-sm font-light">Link social accounts to sync your data</CardDescription>
       </CardHeader>
 
       <CardContent className="grid gap-6 p-4 pt-0 md:p-6 md:pt-0">
@@ -168,18 +170,21 @@ export default function ConnectedAccounts({
                   key={connection}
                   className="flex flex-col md:flex-row items-center justify-between md:space-x-2 space-y-6 md:space-y-0"
                 >
-                  <Label className="flex flex-col space-y-1">
-                    <span className="leading-6">{displayName}</span>
+                  <Label className="flex flex-col space-y-2">
+                    <div className="flex gap-3 items-center">
+                      <GoogleIcon />
+                      <span className="leading-6 text-sm font-medium">{displayName}</span>
+                    </div>
                     {description && (
-                      <p className="font-normal leading-snug text-muted-foreground max-w-fit">{description}</p>
+                      <p className="font-light font-sm leading-5 text-muted-foreground max-w-fit">{description}</p>
                     )}
                   </Label>
-                  <div className="flex space-x-24 items-center justify-end md:min-w-24">
+                  <div className="flex space-x-24 items-center justify-end md:min-w-24 w-full sm:w-fit">
                     {isConnected ? (
                       <>
                         {onUnlink && (
                           <Button
-                            className="h-fit min-w-24"
+                            className="h-fit min-w-24 w-full sm:w-fit"
                             variant="outline"
                             onClick={handleUnlinkAccount(connection)}
                             disabled={isUnlinkingAccount === connection || isMainConnection}
@@ -191,7 +196,7 @@ export default function ConnectedAccounts({
                       </>
                     ) : (
                       <Button
-                        className="h-fit min-w-24"
+                        className="h-fit min-w-24 w-full sm:w-fit"
                         variant="outline"
                         disabled={!allowLink || isLinkingAccount === connection}
                         onClick={handleLinkAccount(connection, api)}

components/auth0/user-profile.tsx

@@ -35,26 +35,33 @@ export default function UserProfile({ user }: { user: KeyValueMap }) {
     <div className="max-w-screen-lg mx-auto gap-5 md:gap-5 lg:gap-5 justify-center p-2 flex flex-col w-full">
       <div className="md:block">
         <div className="space-y-0.5">
-          <h2 className="text-2xl font-bold tracking-tight">User Profile</h2>
-          <p className="text-muted-foreground">Info about you and your preferences.</p>
+          <h2 className="text-xl sm:text-2xl font-bold tracking-tight">User Profile</h2>
+          <p className="text-muted-foreground text-sm sm:text-base font-light">Info about you and your preferences.</p>
         </div>
-        <Separator className="my-6" />
-        <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+        <Separator className="my-6 hidden sm:inline-block" />
+        <div className="flex flex-col space-y-2 sm:space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0 mt-4 sm:mt-0">
           <aside className="lg:w-1/5">
-            <nav className={"flex space-x-1 lg:flex-col lg:space-x-0 lg:space-y-1 justify-start"}>
+            <nav
+              className={
+                "flex space-x-1 lg:flex-col lg:space-x-0 lg:space-y-1 justify-start w-full bg-[#F1F5F9] sm:bg-transparent rounded-lg sm:rounded-none p-1.5 sm:p-0"
+              }
+            >
               {[
                 { title: "General", id: "basic-info" },
-                { title: "Connected Accounts", id: "connected-accounts" },
+                { title: "Accounts", id: "connected-accounts" },
               ].map((item) => (
                 <button
                   onClick={handleItemClick(item.id)}
                   type="button"
                   key={item.id}
                   className={cn(
                     buttonVariants({ variant: "ghost" }),
-                    currentItem === item.id ? "bg-muted hover:bg-muted" : "hover:bg-transparent hover:underline",
+                    currentItem === item.id
+                      ? "bg-white hover:bg-white sm:bg-muted sm:hover:bg-muted"
+                      : "sm:hover:bg-transparent sm:hover:underline text-[#64748B] sm:text-black",
                     "justify-start",
-                    "px-3 py-1.5"
+                    "px-3 py-1.5",
+                    "flex-1 justify-center sm:justify-start"
                   )}
                 >
                   {item.title}
@@ -72,8 +79,7 @@ export default function UserProfile({ user }: { user: KeyValueMap }) {
                     connection: "google-oauth2",
                     displayName: "Google",
                     api: "google-all",
-                    description:
-                      "Create and manage events in your Google Calendar.",
+                    description: "Create and manage events in your Google Calendar.",
                   },
                 ]}
                 allowLink={true}

components/chat/navbar.tsx

@@ -15,7 +15,6 @@ import {
   LearnMenuIcon,
   LogoutIcon,
   MenuIcon,
-  ShareMenuIcon,
 } from "@/components/icons";
 import { Claims } from "@auth0/nextjs-auth0";
 

components/icons.tsx

@@ -786,7 +786,39 @@ function LogoutIcon() {
   );
 }
 
+function GoogleIcon() {
+  return (
+    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="36" height="36" rx="5.4" fill="#F1F5F9" />
+      <g clipPath="url(#clip0_1695_21975)">
+        <path
+          d="M26.4719 18.2C26.4719 17.46 26.4124 16.92 26.2837 16.36H17.9143V19.7H22.827C22.7279 20.53 22.1931 21.78 21.0045 22.6199L20.9879 22.7318L23.6341 24.8015L23.8174 24.82C25.5012 23.25 26.4719 20.94 26.4719 18.2Z"
+          fill="#4285F4"
+        />
+        <path
+          d="M17.9141 27C20.3209 27 22.3414 26.2 23.8173 24.82L21.0044 22.6199C20.2516 23.1499 19.2413 23.5199 17.9141 23.5199C15.5569 23.5199 13.5561 21.95 12.8429 19.78L12.7384 19.789L9.98679 21.939L9.95081 22.04C11.4167 24.9799 14.4277 27 17.9141 27Z"
+          fill="#34A853"
+        />
+        <path
+          d="M12.843 19.78C12.6548 19.22 12.5459 18.62 12.5459 18C12.5459 17.38 12.6548 16.78 12.8331 16.22L12.8281 16.1007L10.042 13.9162L9.95082 13.96C9.34667 15.18 9 16.55 9 18C9 19.45 9.34667 20.82 9.95082 22.04L12.843 19.78Z"
+          fill="#FBBC05"
+        />
+        <path
+          d="M17.9141 12.48C19.588 12.48 20.7171 13.21 21.3609 13.82L23.8767 11.34C22.3316 9.89 20.3209 9 17.9141 9C14.4277 9 11.4167 11.02 9.95081 13.96L12.833 16.22C13.5561 14.05 15.5569 12.48 17.9141 12.48Z"
+          fill="#EB4335"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1695_21975">
+          <rect width="18" height="18" fill="white" transform="translate(9 9)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
 export {
+  GoogleIcon,
   LogoutIcon,
   LearnMenuIcon,
   ShareMenuIcon,