Centering account pages and making them consistent (#1799)

samejr · web-flow · commit ec1cec57676c · 2025-03-18T12:57:23.000Z
* Small updates to the Settings page

* Remove max-w-md from Members page

* Removing max width from Profile page
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
@@ -31,7 +31,7 @@ import { Button } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
-import { Header2 } from "~/components/primitives/Headers";
+import { Header2, Header3 } from "~/components/primitives/Headers";
 import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
@@ -171,7 +171,7 @@ export const action: ActionFunction = async ({ request, params }) => {
         });
 
         return redirectWithSuccessMessage(
-          organizationPath({ slug: organizationSlug }),
+          organizationSettingsPath({ slug: organizationSlug }),
           request,
           `Organization renamed to ${submission.value.organizationName}`
         );
@@ -226,7 +226,7 @@ export const action: ActionFunction = async ({ request, params }) => {
         return redirectWithSuccessMessage(
           organizationSettingsPath({ slug: organizationSlug }),
           request,
-          `Updated logo`
+          `Updated icon`
         );
       }
     }
@@ -286,17 +286,20 @@ export default function Page() {
 
       <PageBody>
         <MainHorizontallyCenteredContainer>
-          <div className="flex flex-col gap-4">
+          <div className="mb-3 border-b border-grid-dimmed pb-3">
+            <Header2>Settings</Header2>
+          </div>
+          <div className="flex flex-col gap-6">
             <div>
               <LogoForm organization={organization} />
             </div>
 
             <div>
               <Form method="post" {...renameForm.props}>
                 <input type="hidden" name="action" value="rename" />
-                <Fieldset>
+                <Fieldset className="gap-y-0">
                   <InputGroup fullWidth>
-                    <Label htmlFor={organizationName.id}>Rename your organization</Label>
+                    <Label htmlFor={organizationName.id}>Organization name</Label>
                     <Input
                       {...conform.input(organizationName, { type: "text" })}
                       defaultValue={organization.title}
@@ -310,13 +313,14 @@ export default function Page() {
                     confirmButton={
                       <Button
                         type="submit"
-                        variant={"primary/small"}
+                        variant={"secondary/small"}
                         disabled={isRenameLoading}
                         LeadingIcon={isRenameLoading ? SpinnerWhite : undefined}
                       >
                         Rename organization
                       </Button>
                     }
+                    className="border-t-0"
                   />
                 </Fieldset>
               </Form>
@@ -327,7 +331,7 @@ export default function Page() {
               <Form
                 method="post"
                 {...deleteForm.props}
-                className="max-w-md rounded-sm border border-rose-500/40"
+                className="w-full rounded-sm border border-rose-500/40"
               >
                 <input type="hidden" name="action" value="delete" />
                 <Fieldset className="p-4">
@@ -384,10 +388,10 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
 
   return (
     <Fieldset>
-      <InputGroup>
-        <Label>Logo</Label>
-        <div className="flex items-end gap-2">
-          <div className="grid size-20 place-items-center overflow-hidden rounded-sm border border-charcoal-700 bg-charcoal-850">
+      <InputGroup fullWidth>
+        <Label>Icon</Label>
+        <div className="flex w-full items-end justify-between gap-2">
+          <div className="grid place-items-center overflow-hidden rounded-sm border border-charcoal-750 bg-background-bright">
             <Avatar avatar={avatar} className="size-20" includePadding />
           </div>
           {/* Letters */}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
@@ -164,15 +164,18 @@ export default function Page() {
       <PageBody>
         <MainHorizontallyCenteredContainer>
           <Header2>
-            Members ({limits.used}/{limits.limit})
+            Members{" "}
+            <span className="font-normal text-text-dimmed">
+              ({limits.used}/{limits.limit})
+            </span>
           </Header2>
-          <ul className="divide-ui-border flex w-full max-w-md flex-col divide-y border-b border-grid-bright">
+          <ul className="divide-ui-border mt-3 flex w-full flex-col divide-y border-y border-grid-bright">
             {members.map((member) => (
               <li key={member.user.id} className="flex items-center gap-x-4 py-4">
                 <UserAvatar
                   avatarUrl={member.user.avatarUrl}
                   name={member.user.name}
-                  className="h-10 w-10"
+                  className="size-10"
                 />
                 <div className="flex flex-col gap-0.5">
                   <Header3>
@@ -194,8 +197,8 @@ export default function Page() {
 
           {invites.length > 0 && (
             <>
-              <Header2 className="mt-4">Pending invites</Header2>
-              <ul className="flex w-full max-w-md flex-col divide-y divide-charcoal-800 border-b border-charcoal-800">
+              <Header2 className="mb-3 mt-4">Pending invites</Header2>
+              <ul className="flex w-full flex-col divide-y divide-charcoal-800 border-b border-grid-bright">
                 {invites.map((invite) => (
                   <li key={invite.id} className="flex items-center gap-4 py-4">
                     <div className="rounded-md border border-charcoal-750 bg-charcoal-800 p-1.5">
@@ -225,18 +228,18 @@ export default function Page() {
               title="Unlock more team members"
               to={v3BillingPath(organization)}
               buttonLabel="Upgrade"
-              panelClassName="mt-4 max-w-sm"
+              panelClassName="mt-4"
             >
               <Paragraph variant="small">
                 You've used all {limits.limit} of your available team members. Upgrade your plan to
                 enable more.
               </Paragraph>
             </InfoPanel>
           ) : (
-            <div className="mt-4 flex max-w-md justify-end">
+            <div className="mt-4 flex justify-end">
               <LinkButton
                 to={inviteTeamMemberPath(organization)}
-                variant={"primary/small"}
+                variant={"secondary/small"}
                 LeadingIcon={UserPlusIcon}
               >
                 Invite a team member
diff --git a/apps/webapp/app/routes/account._index/route.tsx b/apps/webapp/app/routes/account._index/route.tsx
@@ -5,12 +5,18 @@ import { Form, type MetaFunction, useActionData } from "@remix-run/react";
 import { type ActionFunction, json } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
-import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
+import {
+  MainCenteredContainer,
+  MainHorizontallyCenteredContainer,
+  PageBody,
+  PageContainer,
+} from "~/components/layout/AppLayout";
 import { Button } from "~/components/primitives/Buttons";
 import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
+import { Header2 } from "~/components/primitives/Headers";
 import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
@@ -138,14 +144,17 @@ export default function Page() {
       </NavBar>
 
       <PageBody>
-        <div className="grid place-items-center pt-12">
-          <Form method="post" {...form.props} className="w-80 max-w-md">
+        <MainHorizontallyCenteredContainer className="grid place-items-center">
+          <div className="mb-3 w-full border-b border-grid-dimmed pb-3">
+            <Header2>Profile</Header2>
+          </div>
+          <Form method="post" {...form.props} className="w-full">
             <InputGroup className="mb-4">
               <Label htmlFor={name.id}>Profile picture</Label>
-              <UserProfilePhoto className="h-24 w-24" />
+              <UserProfilePhoto className="size-24" />
             </InputGroup>
             <Fieldset>
-              <InputGroup>
+              <InputGroup fullWidth>
                 <Label htmlFor={name.id}>Full name</Label>
                 <Input
                   {...conform.input(name, { type: "text" })}
@@ -156,7 +165,7 @@ export default function Page() {
                 <Hint>Your teammates will see this</Hint>
                 <FormError id={name.errorId}>{name.error}</FormError>
               </InputGroup>
-              <InputGroup>
+              <InputGroup fullWidth>
                 <Label htmlFor={email.id}>Email address</Label>
                 <Input
                   {...conform.input(email, { type: "text" })}
@@ -180,14 +189,14 @@ export default function Page() {
 
               <FormButtons
                 confirmButton={
-                  <Button type="submit" variant={"primary/small"}>
+                  <Button type="submit" variant={"secondary/small"}>
                     Update
                   </Button>
                 }
               />
             </Fieldset>
           </Form>
-        </div>
+        </MainHorizontallyCenteredContainer>
       </PageBody>
     </PageContainer>
   );
