Skip to content

Centering account pages and making them consistent #1799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 18, 2025
Merged

Centering account pages and making them consistent #1799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4bdcdef
Small updates to the Settings page
samejr Mar 17, 2025
6775cd3
Remove max-w-md from Members page
samejr Mar 18, 2025
9764e98
Removing max width from Profile page
samejr Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}`
);
Expand Down Expand Up @@ -226,7 +226,7 @@ export const action: ActionFunction = async ({ request, params }) => {
return redirectWithSuccessMessage(
organizationSettingsPath({ slug: organizationSlug }),
request,
`Updated logo`
`Updated icon`
);
}
}
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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 */}
Expand Down
19 changes: 11 additions & 8 deletions apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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
Expand Down
25 changes: 17 additions & 8 deletions apps/webapp/app/routes/account._index/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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" })}
Expand All @@ -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" })}
Expand All @@ -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>
);
Expand Down