Skip to content

Commit 7ce6339

Browse files
santteegtsantteegt
committed
improve UI styling for mobile-first
1 parent 497b2bf commit 7ce6339

File tree

9 files changed

+335
-68
lines changed

9 files changed

+335
-68
lines changed

‎build/ui/src/App.css‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
22
text-align: center;
33
display: flex;
44
flex-direction: column;
5+
min-height: 100vh;
6+
width: 100%;
7+
overflow-x: hidden;
58
}
69

710
.App-logo {
811
height: 40vmin;
912
pointer-events: none;
13+
max-height: 200px;
1014
}
1115

1216
@media (prefers-reduced-motion: no-preference) {
@@ -18,9 +22,33 @@
1822
.App-header {
1923
display: flex;
2024
flex-direction: column;
21-
height: 100vh;
22-
font-size: calc(10px + 2vmin);
25+
min-height: 100vh;
26+
font-size: calc(10px + 1vmin);
2327
color: black;
28+
width: 100%;
29+
}
30+
31+
/* Mobile-first responsive design */
32+
@media (max-width: 768px) {
33+
.App-header {
34+
font-size: calc(8px + 1.5vmin);
35+
}
36+
37+
.App-logo {
38+
height: 30vmin;
39+
max-height: 120px;
40+
}
41+
}
42+
43+
@media (max-width: 480px) {
44+
.App-header {
45+
font-size: calc(6px + 1.2vmin);
46+
}
47+
48+
.App-logo {
49+
height: 25vmin;
50+
max-height: 100px;
51+
}
2452
}
2553

2654
.App-link {
@@ -63,6 +91,41 @@
6391
padding: 20px;
6492
}
6593

94+
/* Mobile responsive adjustments */
95+
@media (max-width: 768px) {
96+
.menu {
97+
padding: 10px;
98+
margin-bottom: 16px;
99+
}
100+
101+
.menu-item {
102+
padding: 8px;
103+
font-size: 1rem;
104+
}
105+
106+
.detail {
107+
font-size: 18px;
108+
padding: 15px;
109+
}
110+
}
111+
112+
@media (max-width: 480px) {
113+
.menu {
114+
padding: 8px;
115+
margin-bottom: 12px;
116+
}
117+
118+
.menu-item {
119+
padding: 6px;
120+
font-size: 0.9rem;
121+
}
122+
123+
.detail {
124+
font-size: 16px;
125+
padding: 10px;
126+
}
127+
}
128+
66129
.error-message {
67130
font-size: 0.875rem;
68131
color: red;

‎build/ui/src/Dashboard.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -77,36 +77,22 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
7777
};
7878

7979
const styles = {
80-
container: {
81-
minHeight: "100vh",
80+
loadingOverlay: {
81+
position: "fixed" as const,
82+
top: 0,
83+
left: 0,
84+
width: "100%",
85+
height: "100%",
86+
backgroundColor: "rgba(0, 0, 0, 0.55)",
8287
display: "flex",
8388
justifyContent: "center",
8489
alignItems: "center",
90+
zIndex: 9999,
8591
},
8692
};
8793

8894
return (
8995
<div className="App">
90-
{isLoading && (
91-
<>
92-
<div style={styles.container}>
93-
<div
94-
style={{
95-
display: "flex",
96-
flexDirection: "column",
97-
alignItems: "center",
98-
}}
99-
>
100-
<CircularProgress sx={{ marginBottom: "1rem" }} />
101-
{!rocketpoolValue?.walletStatus && (
102-
<Typography variant="body1">
103-
Loading on-chain Rocket Pool data...
104-
</Typography>
105-
)}
106-
</div>
107-
</div>
108-
</>
109-
)}
11096
{rocketpoolValue?.walletStatus && (
11197
<>
11298
{rocketpoolValue.walletStatus.walletInitialized &&
@@ -115,10 +101,11 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
115101
)}
116102
<Box
117103
sx={{
118-
margin: 8,
104+
margin: { xs: 1, sm: 2, md: 4, lg: 8 },
119105
display: "flex",
120106
flexDirection: "column",
121107
alignItems: "left",
108+
padding: { xs: 1, sm: 2 },
122109
}}
123110
>
124111
{!clientsSynced && activeTab !== "Info" ? (
@@ -129,9 +116,12 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
129116
) : (
130117
<Card
131118
sx={{
132-
padding: 4,
119+
padding: { xs: 2, sm: 3, md: 4 },
133120
borderRadius: 2,
134121
boxShadow: 4,
122+
width: "100%",
123+
maxWidth: "100%",
124+
overflow: "hidden",
135125
}}
136126
>
137127
<div className="content">
@@ -152,6 +142,24 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
152142
)}
153143
</>
154144
)}
145+
{isLoading && (
146+
<div style={styles.loadingOverlay}>
147+
<div
148+
style={{
149+
display: "flex",
150+
flexDirection: "column",
151+
alignItems: "center",
152+
}}
153+
>
154+
<CircularProgress sx={{ marginBottom: "1rem" }} />
155+
{!rocketpoolValue?.walletStatus && (
156+
<Typography variant="body1" color="white">
157+
Loading on-chain Rocket Pool data...
158+
</Typography>
159+
)}
160+
</div>
161+
</div>
162+
)}
155163
</div>
156164
);
157165
}

‎build/ui/src/components/BalanceBox/balanceBox.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,24 @@
66
/*background-color: rgba(25, 118, 210, 1);*/
77
}
88

9+
/* Mobile responsive adjustments */
10+
@media (max-width: 768px) {
11+
.dismissable-card {
12+
bottom: 10px;
13+
right: 10px;
14+
left: 10px;
15+
max-width: none;
16+
}
17+
}
18+
19+
@media (max-width: 480px) {
20+
.dismissable-card {
21+
bottom: 5px;
22+
right: 5px;
23+
left: 5px;
24+
}
25+
}
26+
927
hr {
1028
margin: 0 15px; /* adds some space above and below the line */
1129
border: none; /* removes the default border */

‎build/ui/src/components/Info/EthClients.tsx‎

Lines changed: 49 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ function EthClients(): JSX.Element {
2020

2121
useEffect(() => {
2222
fetchData();
23+
// eslint-disable-next-line react-hooks/exhaustive-deps
2324
}, []);
2425

2526
function EcStatusComponent(): JSX.Element {
@@ -106,8 +107,15 @@ function EthClients(): JSX.Element {
106107
sx={{
107108
display: "flex",
108109
alignItems: "center",
109-
justifyContent: "space-evenly",
110-
gap: 2,
110+
justifyContent: "center",
111+
gap: { xs: 1.5, sm: 0.8, md: 0.6 },
112+
flexWrap: "wrap",
113+
flexDirection: { xs: "column", sm: "row" },
114+
"& > *": {
115+
flex: { xs: "1 1 100%", sm: "0 0 auto" },
116+
minWidth: { xs: "100%", sm: "140px", md: "150px" },
117+
maxWidth: { xs: "100%", sm: "160px", md: "170px" },
118+
},
111119
}}
112120
>
113121
<Box
@@ -119,16 +127,24 @@ function EthClients(): JSX.Element {
119127
>
120128
<Card
121129
sx={{
122-
borderRadius: 2,
123-
p: 2,
130+
borderRadius: 1.5,
131+
p: { xs: 1.2, sm: 1.2, md: 1.3 },
124132
display: "flex",
125133
flexDirection: "column",
126134
justifyContent: "center",
127135
alignItems: "center",
136+
width: "100%",
137+
minHeight: { xs: "auto", sm: "85px", md: "90px" },
138+
boxShadow: { xs: 1, sm: 1.5 },
128139
}}
129140
>
130141
<div style={{ alignItems: "center", justifyContent: "center" }}>
131-
<Typography sx={{ fontWeight: "bold", pb: 2, px: 1 }}>
142+
<Typography sx={{
143+
fontWeight: "bold",
144+
pb: { xs: 1, sm: 1.2 },
145+
px: 0.5,
146+
fontSize: { xs: "0.85rem", sm: "0.9rem" }
147+
}}>
132148
Execution Client
133149
</Typography>
134150
<EcStatusComponent />
@@ -140,9 +156,11 @@ function EthClients(): JSX.Element {
140156
display: "flex",
141157
flexDirection: "column",
142158
alignItems: "center",
159+
justifyContent: "center",
160+
minHeight: { xs: "40px", sm: "70px", md: "75px" },
143161
}}
144162
>
145-
<SyncAltRoundedIcon sx={{ mb: 4, fontSize: 48 }} />
163+
<SyncAltRoundedIcon sx={{ mb: { xs: 1.7, sm: 3.4, md: 3.6 }, fontSize: { xs: 27, sm: 41, md: 43 } }} />
146164
</Box>
147165

148166
<Box
@@ -154,16 +172,24 @@ function EthClients(): JSX.Element {
154172
>
155173
<Card
156174
sx={{
157-
borderRadius: 2,
158-
p: 2,
175+
borderRadius: 1.5,
176+
p: { xs: 1.2, sm: 1.2, md: 1.3 },
159177
display: "flex",
160178
flexDirection: "column",
161179
justifyContent: "center",
162180
alignItems: "center",
181+
width: "100%",
182+
minHeight: { xs: "auto", sm: "85px", md: "90px" },
183+
boxShadow: { xs: 1, sm: 1.5 },
163184
}}
164185
>
165186
<div style={{ alignItems: "center", justifyContent: "center" }}>
166-
<Typography sx={{ fontWeight: "bold", pb: 2, px: 1 }}>
187+
<Typography sx={{
188+
fontWeight: "bold",
189+
pb: { xs: 1, sm: 1.2 },
190+
px: 0.5,
191+
fontSize: { xs: "0.85rem", sm: "0.9rem" }
192+
}}>
167193
Consensus Client
168194
</Typography>
169195
<CcStatusComponent />
@@ -176,9 +202,11 @@ function EthClients(): JSX.Element {
176202
display: "flex",
177203
flexDirection: "column",
178204
alignItems: "center",
205+
justifyContent: "center",
206+
minHeight: { xs: "40px", sm: "70px", md: "75px" },
179207
}}
180208
>
181-
<TrendingFlatRoundedIcon sx={{ mb: 4, fontSize: 48 }} />
209+
<TrendingFlatRoundedIcon sx={{ mb: { xs: 1.7, sm: 3.4, md: 3.6 }, fontSize: { xs: 27, sm: 41, md: 43 } }} />
182210
</Box>
183211

184212
<Box
@@ -190,16 +218,24 @@ function EthClients(): JSX.Element {
190218
>
191219
<Card
192220
sx={{
193-
borderRadius: 2,
194-
p: 2,
221+
borderRadius: 1.5,
222+
p: { xs: 1.2, sm: 1.2, md: 1.3 },
195223
display: "flex",
196224
flexDirection: "column",
197225
justifyContent: "center",
198226
alignItems: "center",
227+
width: "100%",
228+
minHeight: { xs: "auto", sm: "85px", md: "90px" },
229+
boxShadow: { xs: 1, sm: 1.5 },
199230
}}
200231
>
201232
<div style={{ alignItems: "center", justifyContent: "center" }}>
202-
<Typography sx={{ fontWeight: "bold", pb: 2, px: 1 }}>
233+
<Typography sx={{
234+
fontWeight: "bold",
235+
pb: { xs: 1, sm: 1.2 },
236+
px: 0.5,
237+
fontSize: { xs: "0.85rem", sm: "0.9rem" }
238+
}}>
203239
Signer
204240
</Typography>
205241
<SignerStatusComponent />

‎build/ui/src/components/Info/InfoTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Typography, Box, Card, Chip, Link, Container } from "@mui/material";
2+
import { Typography, Box, Card, /*Chip,*/ Link, Container } from "@mui/material";
33
import { RocketpoolContext } from "../Providers/Context";
44
import "./infoTab.css";
55
import EthClients from "./EthClients";

‎build/ui/src/components/Setup/minipool.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,20 @@
44
flex-grow: 1;
55
}
66

7+
@media (max-width: 768px) {
8+
.minipool-container {
9+
flex-direction: column;
10+
}
11+
}
12+
13+
.validator-status {
14+
display: flex;
15+
justify-content: flex-end;
16+
}
17+
718
.actions-container {
8-
/*display: flex;
9-
align-items: center;*/
19+
/* display: flex;
20+
align-items: center; */
1021
margin-left: 32px;
1122
}
1223

0 commit comments

Comments
 (0)