Skip to content

Commit

Permalink
Adjust layout spacings
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandhose
sandhose committed Jan 8, 2025
1 parent e943eaa commit cac9d67
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 96 deletions.
15 changes: 8 additions & 7 deletions frontend/src/components/Layout/Layout.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,34 @@
*/

.layout-container {
--target-width: 378px;
--inline-padding: var(--cpd-space-4x);
box-sizing: border-box;
display: flex;
flex-direction: column;

max-width: calc(378px + var(--cpd-space-5x) * 2);
max-width: calc(var(--target-width) + var(--inline-padding) * 2);

/* Fallback for browsers that do not support 100svh */
min-height: 100vh;
min-height: 100svh;

margin: 0 auto;
padding-inline: var(--cpd-space-5x);
padding-block: var(--cpd-space-12x);
padding-inline: var(--inline-padding);
padding-block: var(--cpd-space-8x);
gap: var(--cpd-space-8x);

&.consent {
max-width: calc(460px + var(--cpd-space-5x) * 2);
--target-width: 460px;
}

&.wide {
max-width: calc(520px + var(--cpd-space-5x) * 2);
--target-width: 520px;
}
}

@media screen and (min-width: 768px) {
.layout-container {
padding-block-start: var(--cpd-space-20x);
padding-block-end: var(--cpd-space-10x);
padding-block: var(--cpd-space-12x);
}
}
8 changes: 7 additions & 1 deletion frontend/src/components/PageHeading/PageHeading.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
flex-direction: column;
gap: var(--cpd-space-4x);

/* Layout already has 6x padding, and we need 10x */
/* Layout already has 8x/12x padding, and we need 12x/20x */
margin-block-start: var(--cpd-space-4x);

& .icon {
Expand Down Expand Up @@ -74,3 +74,9 @@
}
}
}

@media screen and (min-width: 768px) {
.layout-container {
margin-block-start: var(--cpd-space-8x);
}
}
20 changes: 11 additions & 9 deletions frontend/src/routes/_account.lazy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,25 @@ function Account(): React.ReactElement {

return (
<Layout wide>
<div className="flex flex-col gap-4">
<header className="flex justify-between mb-4">
<Heading size="lg" weight="semibold">
<div className="flex flex-col gap-10">
<header className="flex justify-between items-center">
<Heading size="md" weight="semibold">
{t("frontend.account.title")}
</Heading>

<EndSessionButton endSession={onSessionEnd} />
</header>

<UserGreeting user={session.user} siteConfig={siteConfig} />
<div className="flex flex-col gap-4">
<UserGreeting user={session.user} siteConfig={siteConfig} />

<UnverifiedEmailAlert user={session.user} />
<UnverifiedEmailAlert user={session.user} />

<NavBar>
<NavItem to="/">{t("frontend.nav.settings")}</NavItem>
<NavItem to="/sessions">{t("frontend.nav.devices")}</NavItem>
</NavBar>
<NavBar>
<NavItem to="/">{t("frontend.nav.settings")}</NavItem>
<NavItem to="/sessions">{t("frontend.nav.devices")}</NavItem>
</NavBar>
</div>
</div>

<Outlet />
Expand Down
162 changes: 83 additions & 79 deletions frontend/tests/routes/account/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,13 +298,13 @@ exports[`Account home page > renders the page 1`] = `
class="_layoutContainer_0c8bf9 _wide_0c8bf9"
>
<div
class="flex flex-col gap-4"
class="flex flex-col gap-10"
>
<header
class="flex justify-between mb-4"
class="flex justify-between items-center"
>
<h1
class="_typography_yh5dq_162 _font-heading-lg-semibold_yh5dq_135"
class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
>
Your account
</h1>
Expand Down Expand Up @@ -336,94 +336,98 @@ exports[`Account home page > renders the page 1`] = `
</button>
</header>
<div
class="_user_66f22a"
class="flex flex-col gap-4"
>
<span
aria-label="@alice:example.com"
class="_avatar_mcap2_17 _avatar_66f22a _avatar-imageless_mcap2_61"
data-color="6"
data-type="round"
role="img"
style="--cpd-avatar-size: var(--cpd-space-14x);"
>
A
</span>
<div
class="_meta_66f22a"
class="_user_66f22a"
>
<p
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
<span
aria-label="@alice:example.com"
class="_avatar_mcap2_17 _avatar_66f22a _avatar-imageless_mcap2_61"
data-color="6"
data-type="round"
role="img"
style="--cpd-avatar-size: var(--cpd-space-14x);"
>
Alice
</p>
<p
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _mxid_66f22a"
>
@alice:example.com
</p>
</div>
<button
aria-controls="radix-:r3:"
aria-expanded="false"
aria-haspopup="dialog"
aria-labelledby=":r6:"
class="_icon-button_bh2qc_17 _editButton_66f22a"
data-state="closed"
role="button"
style="--cpd-icon-button-size: var(--cpd-space-6x);"
tabindex="0"
type="button"
>
A
</span>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
class="_meta_66f22a"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<p
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
>
<path
clip-rule="evenodd"
d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.212l1.414-5.657a1 1 0 0 1 .263-.465L15.706 2.637Zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.77 3.771-.942L16.93 9.9Z"
fill-rule="evenodd"
/>
</svg>
Alice
</p>
<p
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _mxid_66f22a"
>
@alice:example.com
</p>
</div>
</button>
</div>
<nav
class="_navBar_214497"
>
<ul
class="_navBarItems_214497"
>
<li
class="_navTab_8603fc"
<button
aria-controls="radix-:r3:"
aria-expanded="false"
aria-haspopup="dialog"
aria-labelledby=":r6:"
class="_icon-button_bh2qc_17 _editButton_66f22a"
data-state="closed"
role="button"
style="--cpd-icon-button-size: var(--cpd-space-6x);"
tabindex="0"
type="button"
>
<a
aria-current="page"
class="_navItem_8603fc"
data-status="active"
href="/"
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
Settings
</a>
</li>
<li
class="_navTab_8603fc"
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.212l1.414-5.657a1 1 0 0 1 .263-.465L15.706 2.637Zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.77 3.771-.942L16.93 9.9Z"
fill-rule="evenodd"
/>
</svg>
</div>
</button>
</div>
<nav
class="_navBar_214497"
>
<ul
class="_navBarItems_214497"
>
<a
class="_navItem_8603fc"
href="/sessions"
<li
class="_navTab_8603fc"
>
Devices
</a>
</li>
</ul>
</nav>
<a
aria-current="page"
class="_navItem_8603fc"
data-status="active"
href="/"
>
Settings
</a>
</li>
<li
class="_navTab_8603fc"
>
<a
class="_navItem_8603fc"
href="/sessions"
>
Devices
</a>
</li>
</ul>
</nav>
</div>
</div>
<div
class="flex flex-col gap-4 mb-4"
Expand Down

0 comments on commit cac9d67

Please sign in to comment.