Skip to content

Commit ea63aa4

Browse files
techanviltechanvil
authored
Merge pull request #12764 from google/fix/12459-styling-issues
Update styling for splash screen.
2 parents 30436b8 + abd6ccd commit ea63aa4

33 files changed

Lines changed: 62 additions & 13 deletions

File tree

‎assets/js/components/setup/SetupUsingProxyWithSignIn/SplashContent.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ import SplashScreenshotSVG from './SetupFlowSVG';
3939
import AnalyticsOptIn from './AnalyticsOptIn';
4040
import SplashBackground from '@/svg/graphics/splash-graphic.svg';
4141
import Typography from '@/js/components/Typography';
42+
import {
43+
BREAKPOINT_SMALL,
44+
BREAKPOINT_TABLET,
45+
useBreakpoint,
46+
} from '@/js/hooks/useBreakpoint';
4247
import { Cell, Row } from '@/js/material-components';
4348
import { DISCONNECTED_REASON_CONNECTED_URL_MISMATCH } from '@/js/googlesitekit/datastore/user/constants';
4449

@@ -60,9 +65,13 @@ export default function SplashContent( {
6065
global.document.body.classList.add( 'googlesitekit-setup-flow' );
6166
} );
6267

68+
const breakpoint = useBreakpoint();
69+
const isMobileOrTablet =
70+
breakpoint === BREAKPOINT_SMALL || breakpoint === BREAKPOINT_TABLET;
71+
6372
const cellDetailsProp = analyticsModuleActive
6473
? { smSize: 4, mdSize: 6, lgSize: 6 }
65-
: { smSize: 4, mdSize: 7, lgSize: 6 };
74+
: { smSize: 4, mdSize: 8, lgSize: 6 };
6675

6776
return (
6877
<Fragment>
@@ -72,7 +81,7 @@ export default function SplashContent( {
7281
<Typography
7382
as="h1"
7483
className="googlesitekit-setup__title"
75-
size="medium"
84+
size={ isMobileOrTablet ? 'small' : 'medium' }
7685
type="headline"
7786
>
7887
{ title }

‎assets/js/components/setup/SetupUsingProxyWithSignIn/__snapshots__/index.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1373,7 +1373,7 @@ exports[`SetupUsingProxyWithSignIn with the \`setupFlowRefresh\` feature flag en
13731373
class="mdc-layout-grid__inner googlesitekit-setup__content"
13741374
>
13751375
<div
1376-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-7-tablet mdc-layout-grid__cell--span-4-phone"
1376+
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone"
13771377
>
13781378
<h1
13791379
class="googlesitekit-typography googlesitekit-setup__title googlesitekit-typography--headline googlesitekit-typography--medium"
@@ -2029,7 +2029,7 @@ exports[`SetupUsingProxyWithSignIn with the \`setupFlowRefresh\` feature flag en
20292029
class="mdc-layout-grid__inner googlesitekit-setup__content"
20302030
>
20312031
<div
2032-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-7-tablet mdc-layout-grid__cell--span-4-phone"
2032+
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone"
20332033
>
20342034
<h1
20352035
class="googlesitekit-typography googlesitekit-setup__title googlesitekit-typography--headline googlesitekit-typography--medium"
@@ -2397,7 +2397,7 @@ exports[`SetupUsingProxyWithSignIn with the \`setupFlowRefresh\` feature flag en
23972397
class="mdc-layout-grid__inner googlesitekit-setup__content"
23982398
>
23992399
<div
2400-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-7-tablet mdc-layout-grid__cell--span-4-phone"
2400+
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone"
24012401
>
24022402
<h1
24032403
class="googlesitekit-typography googlesitekit-setup__title googlesitekit-typography--headline googlesitekit-typography--medium"
@@ -2765,7 +2765,7 @@ exports[`SetupUsingProxyWithSignIn with the \`setupFlowRefresh\` feature flag en
27652765
class="mdc-layout-grid__inner googlesitekit-setup__content"
27662766
>
27672767
<div
2768-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-7-tablet mdc-layout-grid__cell--span-4-phone"
2768+
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone"
27692769
>
27702770
<h1
27712771
class="googlesitekit-typography googlesitekit-setup__title googlesitekit-typography--headline googlesitekit-typography--medium"

‎assets/sass/components/global/_googlesitekit-logo.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,11 @@
6767
width: 78px;
6868
}
6969
}
70+
71+
.googlesitekit-setup-flow {
72+
.googlesitekit-logo {
73+
.googlesitekit-logo__logo-sitekit {
74+
display: inline;
75+
}
76+
}
77+
}

‎assets/sass/components/setup/_googlesitekit-setup.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,14 @@
150150
}
151151

152152
.googlesitekit-setup__reset-notice {
153-
margin-right: $grid-gap-phone;
153+
margin: $grid-gap-phone $grid-gap-phone 0 $grid-gap-phone;
154+
155+
@media (min-width: $bp-nonMobile) {
156+
margin: $grid-gap-desktop $grid-gap-desktop 0 $grid-gap-desktop;
157+
}
154158

155159
@media (min-width: $bp-desktop) {
156-
margin-right: $grid-gap-desktop;
160+
margin: 0 10px 0 0;
157161
}
158162
}
159163
}

‎assets/sass/components/setup/_googlesitekit-splash.scss‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,15 @@
3131
}
3232
}
3333

34+
@media (max-width: $bp-desktop) {
35+
padding: 0;
36+
}
37+
3438
& > .mdc-layout-grid {
3539
padding-bottom: 0;
3640

37-
@media (min-width: $bp-tablet) {
38-
padding-right: 0;
41+
@media (max-width: $bp-desktop) {
42+
padding: 0;
3943
}
4044
}
4145

@@ -54,6 +58,10 @@
5458
.googlesitekit-opt-in {
5559
margin-bottom: 42px;
5660

61+
@media (max-width: $bp-desktop) {
62+
margin-bottom: 36px;
63+
}
64+
5765
label {
5866
color: $c-surfaces-on-background-variant;
5967

@@ -73,17 +81,23 @@
7381
margin-top: $grid-gap-desktop;
7482
padding: $grid-gap-desktop;
7583

84+
@media (max-width: $bp-desktop) {
85+
margin-top: 0;
86+
padding: $grid-gap-phone;
87+
}
88+
7689
.googlesitekit-splash__analytics-recommended-badge {
7790
background-color: $c-site-kit-sk-50;
7891
border-radius: 4px;
7992
color: $c-content-primary;
93+
margin-left: 7px;
8094
padding: 4px 8px;
8195
}
8296

8397
.googlesitekit-setup__analytics-opt-in-wrapper-header {
8498
align-items: center;
8599
display: flex;
86-
gap: 12px;
100+
gap: 9px;
87101
margin-bottom: 18px;
88102
}
89103

@@ -108,7 +122,16 @@
108122
}
109123

110124
& + .googlesitekit-opt-in {
111-
padding: 0 $grid-gap-desktop;
125+
margin-top: $grid-gap-desktop;
126+
padding: 0 $grid-gap-phone;
127+
128+
@media (min-width: $bp-desktop) {
129+
padding: 0 $grid-gap-desktop;
130+
}
131+
132+
.googlesitekit-cta-link {
133+
font-weight: 500;
134+
}
112135
}
113136
}
114137

@@ -163,7 +186,12 @@
163186
.googlesitekit-setup__content {
164187
@media (max-width: $bp-desktop) {
165188
max-width: none;
166-
padding: 1rem 1.5rem 0;
189+
padding: 10px $grid-gap-desktop 0;
190+
}
191+
192+
@media (max-width: $bp-tablet) {
193+
padding-left: $grid-gap-phone;
194+
padding-right: $grid-gap-phone;
167195
}
168196

169197
@media (min-width: $bp-nonTablet) {

‎tests/backstop/reference/google-site-kit_Modules_Analytics4_Setup_SetupForm_Initial_setup_flow_0_document_0_small.png‎

1.23 KB
Loading

‎tests/backstop/reference/google-site-kit_Setup___Using_Proxy_With_Sign-in_and_setupFlowRefresh_enabled_Connected_0_document_0_small.png‎

3.65 KB
Loading

‎tests/backstop/reference/google-site-kit_Setup___Using_Proxy_With_Sign-in_and_setupFlowRefresh_enabled_Connected_0_document_1_medium.png‎

2.6 KB
Loading

‎tests/backstop/reference/google-site-kit_Setup___Using_Proxy_With_Sign-in_and_setupFlowRefresh_enabled_Connected_0_document_2_large.png‎

-850 Bytes
Loading

‎tests/backstop/reference/google-site-kit_Setup___Using_Proxy_With_Sign-in_and_setupFlowRefresh_enabled_Default_-_Staging_environment_warning_0_document_0_small.png‎

3.36 KB
Loading

0 commit comments

Comments
 (0)