Skip to content

Commit 4c20d39

Browse files
Robot-InventorRobot-Inventor
authored
fix: improve design of initial setup screen (#1254)
1 parent 2f29b7a commit 4c20d39

File tree

2 files changed

+48
-35
lines changed

2 files changed

+48
-35
lines changed

‎src/css/initialSetup.css‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,38 +12,42 @@ body {
1212
font-size: 100%;
1313
background: radial-gradient(#1c1f63, #111 50%);
1414
color: white;
15-
position: relative;
15+
}
16+
17+
body {
18+
display: flex;
1619
}
1720

1821
main {
1922
width: max-content;
2023
max-width: 100%;
2124
height: 80%;
22-
position: absolute;
23-
top: 50%;
24-
left: 50%;
25-
transform: translate(-50%, -50%);
2625
padding: 2rem;
27-
display: grid;
28-
grid-template-rows: auto auto auto 1fr auto;
29-
grid-template-columns: auto;
26+
display: flex;
27+
gap: 3rem;
28+
margin: auto;
3029
}
3130

3231
#shadowban-scanner-installed {
33-
text-align: center;
3432
font-size: 1.2rem;
3533
}
3634

3735
h1 {
3836
line-height: 110%;
3937
font-size: 4rem;
4038
text-align: center;
41-
background: linear-gradient(-45deg, #1ec4db, #6a6cf2);
39+
background: linear-gradient(to bottom, white, #a2a5b0);
4240
background-clip: border-box;
4341
background-clip: border-box;
4442
-webkit-background-clip: text;
4543
-webkit-text-fill-color: transparent;
46-
margin-bottom: 0.5em;
44+
}
45+
46+
#text-container,
47+
#button-container {
48+
display: flex;
49+
flex-direction: column;
50+
justify-content: center;
4751
}
4852

4953
#instruction {
@@ -53,14 +57,10 @@ h1 {
5357
}
5458

5559
#settings-buttons {
56-
--settings-buttons-margin-top: 1rem;
57-
58-
margin: auto;
59-
margin-top: var(--settings-buttons-margin-top);
60-
height: calc(100% - var(--settings-buttons-margin-top));
60+
margin: 1rem 0;
61+
height: 100%;
6162
max-height: 20rem;
62-
display: grid;
63-
grid-template-columns: 1fr 1fr;
63+
display: flex;
6464
max-width: 50rem;
6565
gap: 1rem;
6666
}
@@ -71,7 +71,6 @@ h1 {
7171
--button-default-border-width: 0.1rem;
7272

7373
width: calc(100% - var(--button-margin) * 2);
74-
height: 100%;
7574
background: rgb(255, 255, 255, 20%);
7675
backdrop-filter: blur(3rem);
7776
border-radius: 0.5rem;
@@ -85,6 +84,7 @@ h1 {
8584
background 0.3s,
8685
transform 0.3s,
8786
border-color 0.3s;
87+
aspect-ratio: 1 / 1;
8888
}
8989

9090
@media (orientation: portrait) {
@@ -93,22 +93,30 @@ h1 {
9393
margin-top: 1rem;
9494
}
9595

96+
body {
97+
height: max-content;
98+
}
99+
96100
main {
97-
height: 100%;
101+
min-height: 100%;
98102
max-width: 100%;
99103
width: 100%;
104+
flex-direction: column;
105+
}
106+
107+
#shadowban-scanner-installed {
108+
font-size: 1rem;
100109
}
101110

102111
#settings-buttons {
103-
grid-template-columns: 1fr;
104-
grid-template-rows: 1fr 1fr;
105112
max-height: none;
106-
padding: 2rem 0;
113+
margin: 2rem 0;
107114
max-width: 100%;
115+
flex-direction: column;
108116
}
109117

110118
.settings-button-item {
111-
width: calc(100% - var(--button-padding));
119+
width: 100%;
112120
}
113121
}
114122

@@ -146,8 +154,8 @@ h1 {
146154
cursor: pointer;
147155
color: white;
148156
font-size: 100%;
149-
padding: 0.5em 1em;
150-
border-radius: 0.25em;
157+
padding: 0.5em 2em;
158+
border-radius: 2em;
151159
}
152160

153161
.basic-secondary-button:disabled,
@@ -162,6 +170,7 @@ h1 {
162170
}
163171

164172
.basic-primary-button {
165-
background: linear-gradient(-45deg, #1ec4db, #6a6cf2);
173+
background: white;
174+
color: #333;
166175
border: none;
167176
}

‎src/html/initialSetup.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,19 @@
99
</head>
1010
<body>
1111
<main>
12-
<div id="shadowban-scanner-installed" data-sb-translation="shadowbanScannerHasBeenInstalled"></div>
13-
<h1 data-sb-translation="letsStartWithASimpleInitialSetup"></h1>
14-
<div id="instruction" data-sb-translation="pleaseSelectOneOfThem"></div>
15-
<div id="settings-buttons">
16-
<!-- The contents of this element are dynamically generated. -->
12+
<div id="text-container">
13+
<div id="shadowban-scanner-installed" data-sb-translation="shadowbanScannerHasBeenInstalled"></div>
14+
<h1 data-sb-translation="letsStartWithASimpleInitialSetup"></h1>
1715
</div>
18-
<div id="navigation-buttons">
19-
<button id="back-button" class="basic-secondary-button" data-sb-translation="back"></button>
20-
<button id="next-button" class="basic-primary-button" data-sb-translation="next"></button>
16+
<div id="button-container">
17+
<div id="instruction" data-sb-translation="pleaseSelectOneOfThem"></div>
18+
<div id="settings-buttons">
19+
<!-- The contents of this element are dynamically generated. -->
20+
</div>
21+
<div id="navigation-buttons">
22+
<button id="back-button" class="basic-secondary-button" data-sb-translation="back"></button>
23+
<button id="next-button" class="basic-primary-button" data-sb-translation="next"></button>
24+
</div>
2125
</div>
2226
</main>
2327
<script src="../js/initialSetup.js"></script>

0 commit comments

Comments
 (0)