Updating accounts

webscopeio · Apr 5, 2024 · 34ea7e6 · 34ea7e6
1 parent 537cdd8
commit 34ea7e6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/apps/next/app/settings/layout.tsx b/apps/next/app/settings/layout.tsx
@@ -18,7 +18,9 @@ export default async function Layout({
     <ApplicationLayout userId={user?.id}>
       <section className="mx-auto max-w-5xl space-y-6 py-6">
         <header className="space-y-2">
-          <h2 className="text-5xl font-semibold tracking-tight">Settings</h2>
+          <h2 className="text-4xl font-semibold tracking-tight lg:text-5xl">
+            Settings
+          </h2>
           <p>Manage your accounts, profile and credentials settings</p>
         </header>
         <div className="flex flex-col gap-6 lg:flex-row">

diff --git a/apps/next/components/user/accounts.tsx b/apps/next/components/user/accounts.tsx
@@ -150,23 +150,31 @@ const AccountsComponent: React.FC<{
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="flex items-center gap-x-4">
-          <AvatarPlaceholder preferredHue={preferredHue} className="size-10" />
-          <div>
-            <h4 className="font-semibold">{username}</h4>
-            <p>{email}</p>
+        <div className="flex items-end gap-x-4">
+          <div className="flex flex-col items-start justify-center gap-x-4 gap-y-2 sm:flex-row">
+            <AvatarPlaceholder
+              preferredHue={preferredHue}
+              className="size-10"
+            />
+            <div>
+              <h4 className="font-semibold">{username}</h4>
+              <p>{email}</p>
+            </div>
           </div>
-          <div className="ml-auto flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
+          <div className="ml-auto flex items-center rounded-md bg-secondary text-secondary-foreground sm:space-x-1">
             <Button
               onClick={() => signOut()}
               disabled={isPending}
               variant="secondary"
-              className="px-3 shadow-none"
+              className="hidden px-3 shadow-none sm:block"
             >
               {isPending && <CircleIcon className="mr-2 size-4 animate-spin" />}
               Sign out
             </Button>
-            <Separator orientation="vertical" className="h-[20px]" />
+            <Separator
+              orientation="vertical"
+              className="hidden h-[20px] sm:block"
+            />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="secondary" className="px-2 shadow-none">