Skip to content

Commit 2605d3a

Browse files
sandhosesandhose
committed
Adjust layout spacings
1 parent 99c8867 commit 2605d3a

File tree

4 files changed

+109
-96
lines changed

4 files changed

+109
-96
lines changed

‎frontend/src/components/Layout/Layout.module.css‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,34 @@
66
*/
77

88
.layout-container {
9+
--target-width: 378px;
10+
--inline-padding: var(--cpd-space-4x);
911
box-sizing: border-box;
1012
display: flex;
1113
flex-direction: column;
1214

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

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

1921
margin: 0 auto;
20-
padding-inline: var(--cpd-space-5x);
21-
padding-block: var(--cpd-space-12x);
22+
padding-inline: var(--inline-padding);
23+
padding-block: var(--cpd-space-8x);
2224
gap: var(--cpd-space-8x);
2325

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

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

3335
@media screen and (min-width: 768px) {
3436
.layout-container {
35-
padding-block-start: var(--cpd-space-20x);
36-
padding-block-end: var(--cpd-space-10x);
37+
padding-block: var(--cpd-space-12x);
3738
}
3839
}

‎frontend/src/components/PageHeading/PageHeading.module.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
flex-direction: column;
1111
gap: var(--cpd-space-4x);
1212

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

1616
& .icon {
@@ -74,3 +74,9 @@
7474
}
7575
}
7676
}
77+
78+
@media screen and (min-width: 768px) {
79+
.page-heading {
80+
margin-block-start: var(--cpd-space-8x);
81+
}
82+
}

‎frontend/src/routes/_account.lazy.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,25 @@ function Account(): React.ReactElement {
3333

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

4242
<EndSessionButton endSession={onSessionEnd} />
4343
</header>
4444

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

47-
<UnverifiedEmailAlert user={session.user} />
48+
<UnverifiedEmailAlert user={session.user} />
4849

49-
<NavBar>
50-
<NavItem to="/">{t("frontend.nav.settings")}</NavItem>
51-
<NavItem to="/sessions">{t("frontend.nav.devices")}</NavItem>
52-
</NavBar>
50+
<NavBar>
51+
<NavItem to="/">{t("frontend.nav.settings")}</NavItem>
52+
<NavItem to="/sessions">{t("frontend.nav.devices")}</NavItem>
53+
</NavBar>
54+
</div>
5355
</div>
5456

5557
<Outlet />

‎frontend/tests/routes/account/__snapshots__/index.test.tsx.snap‎

Lines changed: 83 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -298,13 +298,13 @@ exports[`Account home page > renders the page 1`] = `
298298
class="_layoutContainer_0c8bf9 _wide_0c8bf9"
299299
>
300300
<div
301-
class="flex flex-col gap-4"
301+
class="flex flex-col gap-10"
302302
>
303303
<header
304-
class="flex justify-between mb-4"
304+
class="flex justify-between items-center"
305305
>
306306
<h1
307-
class="_typography_yh5dq_162 _font-heading-lg-semibold_yh5dq_135"
307+
class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
308308
>
309309
Your account
310310
</h1>
@@ -336,94 +336,98 @@ exports[`Account home page > renders the page 1`] = `
336336
</button>
337337
</header>
338338
<div
339-
class="_user_66f22a"
339+
class="flex flex-col gap-4"
340340
>
341-
<span
342-
aria-label="@alice:example.com"
343-
class="_avatar_mcap2_17 _avatar_66f22a _avatar-imageless_mcap2_61"
344-
data-color="6"
345-
data-type="round"
346-
role="img"
347-
style="--cpd-avatar-size: var(--cpd-space-14x);"
348-
>
349-
A
350-
</span>
351341
<div
352-
class="_meta_66f22a"
342+
class="_user_66f22a"
353343
>
354-
<p
355-
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
344+
<span
345+
aria-label="@alice:example.com"
346+
class="_avatar_mcap2_17 _avatar_66f22a _avatar-imageless_mcap2_61"
347+
data-color="6"
348+
data-type="round"
349+
role="img"
350+
style="--cpd-avatar-size: var(--cpd-space-14x);"
356351
>
357-
Alice
358-
</p>
359-
<p
360-
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _mxid_66f22a"
361-
>
362-
@alice:example.com
363-
</p>
364-
</div>
365-
<button
366-
aria-controls="radix-:r3:"
367-
aria-expanded="false"
368-
aria-haspopup="dialog"
369-
aria-labelledby=":r6:"
370-
class="_icon-button_bh2qc_17 _editButton_66f22a"
371-
data-state="closed"
372-
role="button"
373-
style="--cpd-icon-button-size: var(--cpd-space-6x);"
374-
tabindex="0"
375-
type="button"
376-
>
352+
A
353+
</span>
377354
<div
378-
class="_indicator-icon_133tf_26"
379-
style="--cpd-icon-button-size: 100%;"
355+
class="_meta_66f22a"
380356
>
381-
<svg
382-
fill="currentColor"
383-
height="1em"
384-
viewBox="0 0 24 24"
385-
width="1em"
386-
xmlns="http://www.w3.org/2000/svg"
357+
<p
358+
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
387359
>
388-
<path
389-
clip-rule="evenodd"
390-
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"
391-
fill-rule="evenodd"
392-
/>
393-
</svg>
360+
Alice
361+
</p>
362+
<p
363+
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _mxid_66f22a"
364+
>
365+
@alice:example.com
366+
</p>
394367
</div>
395-
</button>
396-
</div>
397-
<nav
398-
class="_navBar_214497"
399-
>
400-
<ul
401-
class="_navBarItems_214497"
402-
>
403-
<li
404-
class="_navTab_8603fc"
368+
<button
369+
aria-controls="radix-:r3:"
370+
aria-expanded="false"
371+
aria-haspopup="dialog"
372+
aria-labelledby=":r6:"
373+
class="_icon-button_bh2qc_17 _editButton_66f22a"
374+
data-state="closed"
375+
role="button"
376+
style="--cpd-icon-button-size: var(--cpd-space-6x);"
377+
tabindex="0"
378+
type="button"
405379
>
406-
<a
407-
aria-current="page"
408-
class="_navItem_8603fc"
409-
data-status="active"
410-
href="/"
380+
<div
381+
class="_indicator-icon_133tf_26"
382+
style="--cpd-icon-button-size: 100%;"
411383
>
412-
Settings
413-
</a>
414-
</li>
415-
<li
416-
class="_navTab_8603fc"
384+
<svg
385+
fill="currentColor"
386+
height="1em"
387+
viewBox="0 0 24 24"
388+
width="1em"
389+
xmlns="http://www.w3.org/2000/svg"
390+
>
391+
<path
392+
clip-rule="evenodd"
393+
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"
394+
fill-rule="evenodd"
395+
/>
396+
</svg>
397+
</div>
398+
</button>
399+
</div>
400+
<nav
401+
class="_navBar_214497"
402+
>
403+
<ul
404+
class="_navBarItems_214497"
417405
>
418-
<a
419-
class="_navItem_8603fc"
420-
href="/sessions"
406+
<li
407+
class="_navTab_8603fc"
421408
>
422-
Devices
423-
</a>
424-
</li>
425-
</ul>
426-
</nav>
409+
<a
410+
aria-current="page"
411+
class="_navItem_8603fc"
412+
data-status="active"
413+
href="/"
414+
>
415+
Settings
416+
</a>
417+
</li>
418+
<li
419+
class="_navTab_8603fc"
420+
>
421+
<a
422+
class="_navItem_8603fc"
423+
href="/sessions"
424+
>
425+
Devices
426+
</a>
427+
</li>
428+
</ul>
429+
</nav>
430+
</div>
427431
</div>
428432
<div
429433
class="flex flex-col gap-4 mb-4"

0 commit comments

Comments
 (0)