Skip to content

Commit adff4cd

Browse files
Turbo87Turbo87
committed
settings/appearance: Add theme previews
1 parent b03e923 commit adff4cd

File tree

6 files changed

+131
-5
lines changed

6 files changed

+131
-5
lines changed

‎app/components/footer.module.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
:root {
1+
:root, [data-theme="classic"] {
22
--footer-bg-color: var(--green800);
33
--footer-header-color: var(--yellow500);
44
--footer-header-shadow-color: var(--green900);
@@ -7,6 +7,10 @@
77
--footer-link-hover-shadow-color: var(--green900);
88
}
99

10+
[data-theme="new-design"] {
11+
--footer-bg-color: var(--grey900);
12+
}
13+
1014
.footer {
1115
display: grid;
1216
justify-items: center;

‎app/components/theme-preview.hbs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div local-class="preview" data-theme={{@theme}} ...attributes>
2+
<div local-class="header">
3+
<div local-class="logo"></div>
4+
<div local-class="title"></div>
5+
</div>
6+
7+
<div local-class="main">
8+
<div local-class="text"></div>
9+
<div local-class="text"></div>
10+
<div local-class="box">
11+
<div local-class="text"></div>
12+
<div local-class="text"></div>
13+
</div>
14+
</div>
15+
16+
<div local-class="footer">
17+
<div local-class="title"></div>
18+
<div local-class="link"></div>
19+
</div>
20+
</div>

‎app/components/theme-preview.module.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
.preview {
2+
display: grid;
3+
grid-template-rows: 1fr 4fr 2fr;
4+
background-color: var(--main-bg);
5+
border: 1px solid var(--main-bg-dark);
6+
border-radius: 4px;
7+
overflow: hidden;
8+
}
9+
10+
.header {
11+
display: flex;
12+
align-items: center;
13+
background-color: var(--header-bg-color);
14+
15+
.logo {
16+
margin-left: 5%;
17+
height: 35%;
18+
aspect-ratio: 1;
19+
border-radius: 99999px;
20+
background-color: var(--yellow500);
21+
}
22+
23+
.title {
24+
margin-left: 5%;
25+
height: 35%;
26+
width: 40%;
27+
border-radius: 99999px;
28+
background-color: white;
29+
}
30+
}
31+
32+
.main {
33+
background-color: var(--main-bg);
34+
35+
.text {
36+
margin-top: 4%;
37+
margin-left: 5%;
38+
height: calc(35% / 4);
39+
width: 70%;
40+
border-radius: 99999px;
41+
background-color: var(--main-color);
42+
43+
& + .text {
44+
width: 50%;
45+
}
46+
}
47+
48+
.box {
49+
display: inline-block;
50+
margin-top: 5%;
51+
margin-left: 5%;
52+
height: 40%;
53+
width: 50%;
54+
border-radius: 2px;
55+
background-color: white;
56+
57+
.text {
58+
margin-top: 7%;
59+
margin-left: 5%;
60+
height: calc(35% / (4 * 0.4));
61+
width: 50%;
62+
border-radius: 99999px;
63+
background-color: var(--main-color);
64+
65+
& + .text {
66+
width: 70%;
67+
background-color: var(--main-color-light);
68+
}
69+
}
70+
}
71+
}
72+
73+
.footer {
74+
background-color: var(--footer-bg-color);
75+
76+
.title {
77+
margin-top: 4%;
78+
margin-left: 5%;
79+
height: calc(35% / 3);
80+
width: 15%;
81+
border-radius: 99999px;
82+
background-color: var(--footer-header-color);
83+
}
84+
85+
.link {
86+
margin-top: 4%;
87+
margin-left: 5%;
88+
height: calc(35% / 3);
89+
width: 25%;
90+
border-radius: 99999px;
91+
background-color: var(--footer-link-color);
92+
}
93+
}

‎app/styles/application.module.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
:root {
1+
:root, [data-theme="classic"] {
22
--violet800: hsl(252, 44%, 24%);
33
--grey900: hsl(200, 15%, 19%);
44
--grey700: hsl(200, 11%, 43%);
@@ -29,10 +29,9 @@
2929
--placeholder-bg2: hsl(213, 16%, 75%);
3030
}
3131

32-
:root[data-theme="new-design"] {
32+
[data-theme="new-design"] {
3333
--header-bg-color: var(--violet800);
3434
--main-bg: white;
35-
--footer-bg-color: var(--grey900);
3635
}
3736

3837
* {

‎app/styles/settings/appearance.module.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,14 @@
66

77
.theme-label {
88
display: inline-block;
9-
padding: 10px;
9+
padding: 16px;
1010
background: white;
1111
border-radius: 6px;
1212
box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
1313
}
14+
15+
.theme-preview {
16+
width: 200px;
17+
height: 160px;
18+
margin-bottom: 16px;
19+
}

‎app/templates/settings/appearance.hbs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
<form local-class="themes-form">
99
<label local-class="theme-label">
10+
<ThemePreview @theme="classic" local-class="theme-preview" />
11+
1012
<RadioButton
1113
@groupValue={{this.theme}}
1214
@value="classic"
@@ -17,6 +19,8 @@
1719
</label>
1820

1921
<label local-class="theme-label">
22+
<ThemePreview @theme="new-design" local-class="theme-preview" />
23+
2024
<RadioButton
2125
@groupValue={{this.theme}}
2226
@value="new-design"

0 commit comments

Comments
 (0)