Skip to content

Commit 53db635

Browse files
pallyoungpallyoung
committed
fix(web): refine welcome layout across desktop and mobile
1 parent 8484c60 commit 53db635

4 files changed

Lines changed: 67 additions & 38 deletions

File tree

‎packages/web/src/features/welcome/index.test.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,16 +130,21 @@ describe("WelcomePage", () => {
130130
expect(document.querySelector(".welcome-card__hero")).toBeTruthy();
131131
expect(document.querySelector(".welcome-flow")).toBeTruthy();
132132
expect(document.querySelector(".welcome-flow__steps")).toBeTruthy();
133+
expect(document.querySelector(".welcome-flow__support")).toBeTruthy();
133134
expect(document.querySelector(".welcome-step-card")).toBeTruthy();
134135
expect(document.querySelector(".welcome-card__features")).toBeTruthy();
135136
expect(document.querySelector(".welcome-support-list")).toBeTruthy();
136137
const openWorkspaceButton = screen.getByRole("button", { name: "Open Workspace" });
137138
const settingsButton = screen.getByRole("button", { name: "Settings" });
138139
const stepCards = Array.from(document.querySelectorAll(".welcome-step-card"));
139140
const supportItems = Array.from(document.querySelectorAll(".welcome-feature"));
141+
const flowSupport = document.querySelector(".welcome-flow__support");
142+
const settingsCard = settingsButton.closest(".welcome-step-card");
140143

141144
expect(stepCards).toHaveLength(2);
142145
expect(supportItems).toHaveLength(2);
146+
expect(flowSupport?.contains(settingsButton)).toBe(true);
147+
expect(settingsCard).toBeNull();
143148
expect(
144149
openWorkspaceButton.querySelector('[data-icon-semantic="nav.newWorkspace"]')
145150
).toBeTruthy();
@@ -228,6 +233,7 @@ describe("WelcomePage", () => {
228233
expect(container.querySelector(".welcome-card__hero")).toBeTruthy();
229234
expect(container.querySelector(".welcome-flow")).toBeTruthy();
230235
expect(container.querySelector(".welcome-flow__steps")).toBeTruthy();
236+
expect(container.querySelector(".welcome-flow__support")).toBeTruthy();
231237
expect(container.querySelector(".welcome-card__features")).toBeTruthy();
232238
expect(container.querySelector(".welcome-support-list")).toBeTruthy();
233239
expect(container.querySelector(".welcome-card__panel")).toBeFalsy();

‎packages/web/src/features/welcome/index.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,14 +105,17 @@ export const WelcomePage: FC = () => {
105105

106106
<div className="welcome-step-card__title">{t("welcome.step_2_title")}</div>
107107
<p className="welcome-step-detail meta-text">{t("welcome.step_2_detail")}</p>
108-
<p className="welcome-settings-hint meta-text">{t("welcome.settings_hint")}</p>
109-
110-
<button className="welcome-link" onClick={handleOpenSettings}>
111-
<ThemedIcon semantic="nav.settings" size={14} />
112-
<span>{t("action.settings")}</span>
113-
</button>
114108
</section>
115109
</div>
110+
111+
<div className="welcome-flow__support">
112+
<p className="welcome-settings-hint meta-text">{t("welcome.settings_hint")}</p>
113+
114+
<button className="welcome-link" onClick={handleOpenSettings}>
115+
<ThemedIcon semantic="nav.settings" size={14} />
116+
<span>{t("action.settings")}</span>
117+
</button>
118+
</div>
116119
</section>
117120
</div>
118121

‎packages/web/src/styles/components.css‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2636,8 +2636,8 @@ body.is-dragging-pane {
26362636
}
26372637

26382638
.welcome-card {
2639-
width: min(100%, 920px);
2640-
max-width: 920px;
2639+
width: min(100%, 1040px);
2640+
max-width: 1040px;
26412641
display: flex;
26422642
flex-direction: column;
26432643
align-items: stretch;
@@ -2656,8 +2656,8 @@ body.is-dragging-pane {
26562656

26572657
.welcome-layout {
26582658
display: grid;
2659-
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
2660-
gap: var(--sp-8);
2659+
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
2660+
gap: var(--sp-7);
26612661
align-items: start;
26622662
}
26632663

@@ -2676,7 +2676,7 @@ body.is-dragging-pane {
26762676

26772677
.welcome-card--landing .welcome-card__hero {
26782678
gap: var(--sp-4);
2679-
padding-right: var(--sp-2);
2679+
padding-right: 0;
26802680
}
26812681

26822682
.welcome-card__actions,
@@ -2724,9 +2724,21 @@ body.is-dragging-pane {
27242724

27252725
.welcome-flow__steps {
27262726
display: grid;
2727+
grid-template-columns: repeat(2, minmax(0, 1fr));
27272728
gap: var(--sp-3);
27282729
}
27292730

2731+
.welcome-flow__support {
2732+
display: flex;
2733+
align-items: center;
2734+
justify-content: space-between;
2735+
gap: var(--sp-3);
2736+
padding: var(--sp-3) var(--sp-4);
2737+
border: 1px solid var(--component-mix-border-default-84pct-transparent);
2738+
border-radius: var(--radius-lg);
2739+
background: var(--component-mix-surface-page-96pct-surface-panel-4pct);
2740+
}
2741+
27302742
.welcome-step-card {
27312743
display: flex;
27322744
flex-direction: column;
@@ -2769,17 +2781,20 @@ body.is-dragging-pane {
27692781
line-height: var(--type-heading-5-line-height);
27702782
font-weight: var(--type-heading-5-weight);
27712783
color: var(--text-primary);
2784+
min-height: calc(var(--type-heading-5-line-height) * 2);
27722785
}
27732786

27742787
.welcome-step-detail {
2775-
max-width: 44ch;
2788+
max-width: 34ch;
27762789
font-size: var(--type-body-5-size);
27772790
line-height: var(--type-body-5-line-height);
27782791
font-weight: var(--type-body-5-weight);
27792792
color: var(--text-secondary);
2793+
flex: 1;
27802794
}
27812795

27822796
.welcome-settings-hint {
2797+
max-width: 32ch;
27832798
font-size: var(--type-body-6-size);
27842799
line-height: var(--type-body-6-line-height);
27852800
font-weight: var(--type-body-6-weight);
@@ -2796,19 +2811,20 @@ body.is-dragging-pane {
27962811
}
27972812

27982813
.welcome-title {
2799-
font-size: var(--type-heading-1-size);
2800-
line-height: var(--type-heading-1-line-height);
2801-
font-weight: var(--type-heading-1-weight);
2814+
font-size: var(--type-heading-3-size);
2815+
line-height: var(--type-heading-3-line-height);
2816+
font-weight: var(--type-heading-3-weight);
28022817
margin: 0;
28032818
color: var(--text);
2819+
max-width: 12ch;
28042820
}
28052821

28062822
.welcome-body {
2807-
font-size: var(--type-body-3-size);
2808-
line-height: var(--type-body-3-line-height);
2809-
font-weight: var(--type-body-3-weight);
2823+
font-size: var(--type-body-4-size);
2824+
line-height: var(--type-body-4-line-height);
2825+
font-weight: var(--type-body-4-weight);
28102826
color: var(--text-secondary);
2811-
max-width: 440px;
2827+
max-width: 38ch;
28122828
margin: 0;
28132829
}
28142830

@@ -3085,7 +3101,7 @@ body.is-dragging-pane {
30853101
.welcome-support {
30863102
display: flex;
30873103
flex-direction: column;
3088-
gap: var(--sp-3);
3104+
gap: var(--sp-2);
30893105
}
30903106

30913107
.welcome-support__title {
@@ -3100,14 +3116,14 @@ body.is-dragging-pane {
31003116
.welcome-support-list {
31013117
display: grid;
31023118
grid-template-columns: repeat(2, minmax(0, 1fr));
3103-
gap: var(--sp-3);
3119+
gap: var(--sp-2);
31043120
}
31053121

31063122
.welcome-feature {
31073123
display: flex;
31083124
align-items: flex-start;
31093125
gap: var(--sp-3);
3110-
padding: var(--sp-3) var(--sp-4);
3126+
padding: var(--sp-3);
31113127
border-radius: var(--radius-lg);
31123128
background: transparent;
31133129
min-height: 0;
@@ -3131,9 +3147,9 @@ body.is-dragging-pane {
31313147
}
31323148

31333149
.welcome-feature-title {
3134-
font-size: var(--type-body-3-size);
3135-
line-height: var(--type-body-3-line-height);
3136-
font-weight: var(--type-body-3-weight);
3150+
font-size: var(--type-body-4-size);
3151+
line-height: var(--type-body-4-line-height);
3152+
font-weight: var(--type-body-4-weight);
31373153
color: var(--text-primary);
31383154
}
31393155

@@ -12023,8 +12039,8 @@ body.is-dragging-pane .session-action-btn-drag {
1202312039
.welcome-card--mobile {
1202412040
width: 100%;
1202512041
max-width: none;
12026-
padding: var(--sp-5) var(--sp-4);
12027-
gap: var(--sp-4);
12042+
padding: var(--sp-4);
12043+
gap: var(--sp-3);
1202812044
border-radius: var(--radius-lg);
1202912045
box-shadow: none;
1203012046
}
@@ -12036,7 +12052,7 @@ body.is-dragging-pane .session-action-btn-drag {
1203612052
.welcome-card--mobile .welcome-layout {
1203712053
display: flex;
1203812054
flex-direction: column;
12039-
gap: var(--sp-4);
12055+
gap: var(--sp-3);
1204012056
}
1204112057

1204212058
.welcome-card--mobile .welcome-card__actions {
@@ -12049,17 +12065,18 @@ body.is-dragging-pane .session-action-btn-drag {
1204912065
}
1205012066

1205112067
.welcome-card--mobile .welcome-title {
12052-
font-size: var(--type-heading-1-size);
12053-
line-height: var(--type-heading-1-line-height);
12054-
font-weight: var(--type-heading-1-weight);
12068+
font-size: var(--type-heading-3-size);
12069+
line-height: var(--type-heading-3-line-height);
12070+
font-weight: var(--type-heading-3-weight);
1205512071
letter-spacing: 0;
12072+
max-width: 10ch;
1205612073
}
1205712074

1205812075
.welcome-card--mobile .welcome-body {
1205912076
max-width: none;
12060-
font-size: var(--type-body-4-size);
12061-
line-height: var(--type-body-4-line-height);
12062-
font-weight: var(--type-body-4-weight);
12077+
font-size: var(--type-body-5-size);
12078+
line-height: var(--type-body-5-line-height);
12079+
font-weight: var(--type-body-5-weight);
1206312080
}
1206412081

1206512082
.welcome-card--mobile .welcome-step-detail,

‎packages/web/src/styles/components.theme.test.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1268,24 +1268,25 @@ describe("components.css theme-sensitive surfaces", () => {
12681268
const welcomeLayout = getLastRuleBlock(".welcome-layout");
12691269
const welcomeFlow = getLastRuleBlock(".welcome-flow");
12701270
const welcomeSteps = getLastRuleBlock(".welcome-flow__steps");
1271+
const welcomeFlowSupport = getLastRuleBlock(".welcome-flow__support");
12711272
const stepCard = getLastRuleBlock(".welcome-step-card");
12721273
const supportList = getLastRuleBlock(".welcome-support-list");
12731274
const stepHint = getLastRuleBlock(".welcome-step-hint");
12741275
const stepDetail = getLastRuleBlock(".welcome-step-detail");
12751276
const settingsHint = getLastRuleBlock(".welcome-settings-hint");
12761277

12771278
expect(welcomeLayout).toContain("display: grid");
1278-
expect(welcomeLayout).toContain(
1279-
"grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr)"
1280-
);
1279+
expect(welcomeLayout).toContain("grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr)");
12811280
expect(welcomeFlow).toContain("flex-direction: column");
12821281
expect(welcomeSteps).toContain("display: grid");
1282+
expect(welcomeSteps).toContain("grid-template-columns: repeat(2, minmax(0, 1fr))");
1283+
expect(welcomeFlowSupport).toContain("display: flex");
12831284
expect(stepCard).toContain("border-radius: var(--radius-lg)");
12841285
expect(stepCard).toContain("background: var(--component-mix-surface-panel-92pct-surface-page)");
12851286
expect(supportList).toContain("grid-template-columns: repeat(2, minmax(0, 1fr))");
12861287
expect(stepHint).toContain("text-transform: uppercase");
12871288
expect(stepHint).toContain("color: var(--text-ter)");
1288-
expect(stepDetail).toContain("max-width: 44ch");
1289+
expect(stepDetail).toContain("max-width: 34ch");
12891290
expect(stepDetail).toContain("color: var(--text-secondary)");
12901291
expect(settingsHint).toContain("color: var(--text-tertiary)");
12911292
});
@@ -2640,6 +2641,7 @@ describe("components.css theme-sensitive surfaces", () => {
26402641
it("stacks mobile welcome and auth shells vertically so cards size to content", () => {
26412642
const welcomeContainer = getLastRuleBlock(".welcome-container--mobile");
26422643
const mobileWelcomeLayout = getLastRuleBlock(".welcome-card--mobile .welcome-layout");
2644+
const mobileWelcomeSteps = getLastRuleBlock(".welcome-card--mobile .welcome-flow__steps");
26432645
const mobileSupportList = getLastRuleBlock(".welcome-card--mobile .welcome-support-list");
26442646
const authScreen = getLastRuleBlock(".auth-screen--mobile");
26452647

@@ -2648,6 +2650,7 @@ describe("components.css theme-sensitive surfaces", () => {
26482650
expect(welcomeContainer).toContain("justify-content: flex-start");
26492651
expect(welcomeContainer).toContain("overflow-y: auto");
26502652
expect(mobileWelcomeLayout).toContain("flex-direction: column");
2653+
expect(mobileWelcomeSteps).toContain("grid-template-columns: 1fr");
26512654
expect(mobileSupportList).toContain("grid-template-columns: 1fr");
26522655
expect(authScreen).toContain("padding:");
26532656
});

0 commit comments

Comments
 (0)