Skip to content

Commit db5ddc2

Browse files
zoltantothcomzoltantothcom
committed
Fix toggle buttons on m obile screens
1 parent dbd425e commit db5ddc2

File tree

4 files changed

+79
-7
lines changed

4 files changed

+79
-7
lines changed

‎__tests__/components/__snapshots__/Header.test.js.snap‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ exports[`<Header /> component renders with DARK theme 1`] = `
77
border-radius: 50%;
88
cursor: pointer;
99
height: 2.5rem;
10-
margin: 0 0 0 1rem;
10+
margin: 0.5rem 1.5rem 0 0;
1111
outline: 0;
1212
width: 2.5rem;
13+
z-index: 10;
1314
}
1415
1516
.c5 svg,
@@ -89,6 +90,8 @@ exports[`<Header /> component renders with DARK theme 1`] = `
8990
display: -webkit-inline-flex;
9091
display: -ms-inline-flexbox;
9192
display: inline-flex;
93+
margin: 1rem 0;
94+
width: 100%;
9295
}
9396
9497
.c3 {
@@ -125,6 +128,12 @@ exports[`<Header /> component renders with DARK theme 1`] = `
125128
color: #FFFFFF;
126129
}
127130
131+
@media (min-width:769px) {
132+
.c5 {
133+
margin: 0.5rem 0 0 1.5rem;
134+
}
135+
}
136+
128137
@media (min-width:769px) {
129138
.c0 {
130139
-webkit-box-pack: justify;
@@ -134,6 +143,13 @@ exports[`<Header /> component renders with DARK theme 1`] = `
134143
}
135144
}
136145
146+
@media (min-width:541px) {
147+
.c4 {
148+
margin: 0;
149+
width: auto;
150+
}
151+
}
152+
137153
<div>
138154
<header
139155
className="c0"
@@ -240,9 +256,10 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
240256
border-radius: 50%;
241257
cursor: pointer;
242258
height: 2.5rem;
243-
margin: 0 0 0 1rem;
259+
margin: 0.5rem 1.5rem 0 0;
244260
outline: 0;
245261
width: 2.5rem;
262+
z-index: 10;
246263
}
247264
248265
.c5 svg,
@@ -322,6 +339,8 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
322339
display: -webkit-inline-flex;
323340
display: -ms-inline-flexbox;
324341
display: inline-flex;
342+
margin: 1rem 0;
343+
width: 100%;
325344
}
326345
327346
.c3 {
@@ -358,6 +377,12 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
358377
color: #EDB8ED;
359378
}
360379
380+
@media (min-width:769px) {
381+
.c5 {
382+
margin: 0.5rem 0 0 1.5rem;
383+
}
384+
}
385+
361386
@media (min-width:769px) {
362387
.c0 {
363388
-webkit-box-pack: justify;
@@ -367,6 +392,13 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
367392
}
368393
}
369394
395+
@media (min-width:541px) {
396+
.c4 {
397+
margin: 0;
398+
width: auto;
399+
}
400+
}
401+
370402
<div>
371403
<header
372404
className="c0"

‎__tests__/components/__snapshots__/Toggle.test.js.snap‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ exports[`<Toggle /> renders JS toggle in DARK more 1`] = `
77
border-radius: 50%;
88
cursor: pointer;
99
height: 2.5rem;
10-
margin: 0 0 0 1rem;
10+
margin: 0.5rem 1.5rem 0 0;
1111
outline: 0;
1212
width: 2.5rem;
13+
z-index: 10;
1314
}
1415
1516
.c0 svg,
@@ -36,6 +37,12 @@ exports[`<Toggle /> renders JS toggle in DARK more 1`] = `
3637
fill: #F2E8F2;
3738
}
3839
40+
@media (min-width:769px) {
41+
.c0 {
42+
margin: 0.5rem 0 0 1.5rem;
43+
}
44+
}
45+
3946
<div>
4047
<button
4148
className="c0"
@@ -74,9 +81,10 @@ exports[`<Toggle /> renders JS toggle in LIGHT more 1`] = `
7481
border-radius: 50%;
7582
cursor: pointer;
7683
height: 2.5rem;
77-
margin: 0 0 0 1rem;
84+
margin: 0.5rem 1.5rem 0 0;
7885
outline: 0;
7986
width: 2.5rem;
87+
z-index: 10;
8088
}
8189
8290
.c0 svg,
@@ -103,6 +111,12 @@ exports[`<Toggle /> renders JS toggle in LIGHT more 1`] = `
103111
fill: #F2E8F2;
104112
}
105113
114+
@media (min-width:769px) {
115+
.c0 {
116+
margin: 0.5rem 0 0 1.5rem;
117+
}
118+
}
119+
106120
<div>
107121
<button
108122
className="c0"
@@ -141,9 +155,10 @@ exports[`<Toggle /> renders the MODE toggle in DARK mode 1`] = `
141155
border-radius: 50%;
142156
cursor: pointer;
143157
height: 2.5rem;
144-
margin: 0 0 0 1rem;
158+
margin: 0.5rem 1.5rem 0 0;
145159
outline: 0;
146160
width: 2.5rem;
161+
z-index: 10;
147162
}
148163
149164
.c0 svg,
@@ -170,6 +185,12 @@ exports[`<Toggle /> renders the MODE toggle in DARK mode 1`] = `
170185
fill: #F2E8F2;
171186
}
172187
188+
@media (min-width:769px) {
189+
.c0 {
190+
margin: 0.5rem 0 0 1.5rem;
191+
}
192+
}
193+
173194
<div>
174195
<button
175196
className="c0"
@@ -202,9 +223,10 @@ exports[`<Toggle /> renders the MODE toggle in LIGHT mode 1`] = `
202223
border-radius: 50%;
203224
cursor: pointer;
204225
height: 2.5rem;
205-
margin: 0 0 0 1rem;
226+
margin: 0.5rem 1.5rem 0 0;
206227
outline: 0;
207228
width: 2.5rem;
229+
z-index: 10;
208230
}
209231
210232
.c0 svg,
@@ -231,6 +253,12 @@ exports[`<Toggle /> renders the MODE toggle in LIGHT mode 1`] = `
231253
fill: #F2E8F2;
232254
}
233255
256+
@media (min-width:769px) {
257+
.c0 {
258+
margin: 0.5rem 0 0 1.5rem;
259+
}
260+
}
261+
234262
<div>
235263
<button
236264
className="c0"

‎src/components/Header.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ const StyledLinkContainer = styled.div`
2323

2424
const StyledSettingsContainer = styled.div`
2525
display: inline-flex;
26+
margin: 1rem 0;
27+
width: 100%;
28+
29+
@media (min-width: 541px) {
30+
margin: 0;
31+
width: auto;
32+
}
2633
`;
2734

2835
const linkStyle = css`

‎src/components/Toggle.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,14 @@ const StyledToggle = styled.button`
1212
border-radius: 50%;
1313
cursor: pointer;
1414
height: 2.5rem;
15-
margin: 0 0 0 1rem;
15+
margin: 0.5rem 1.5rem 0 0;
1616
outline: 0;
1717
width: 2.5rem;
18+
z-index: 10;
19+
20+
@media (min-width: 769px) {
21+
margin: 0.5rem 0 0 1.5rem;
22+
}
1823
1924
& svg,
2025
& g {

0 commit comments

Comments
 (0)