this repo has no description
Restyle settings sheet
+223
-184
+24
-1
src/pages/settings.css
+24
-1
src/pages/settings.css
···
1
+
#settings-container {
2
+
background-color: var(--bg-faded-color);
3
+
}
4
+
1
5
#settings-container h2 {
2
-
font-size: 0.9em;
6
+
font-size: 85%;
3
7
text-transform: uppercase;
4
8
color: var(--text-insignificant-color);
9
+
font-weight: normal;
5
10
}
6
11
#settings-container h2 ~ h2 {
7
12
margin-top: 2em;
13
+
}
14
+
15
+
#settings-container :is(section, .section) {
16
+
background-color: var(--bg-color);
17
+
margin: 0 -16px;
18
+
padding: 8px 16px;
19
+
border-top: var(--hairline-width) solid var(--outline-color);
20
+
border-bottom: var(--hairline-width) solid var(--outline-color);
21
+
}
22
+
#settings-container :is(section, .section) > li + li {
23
+
border-top: var(--hairline-width) solid var(--outline-color);
8
24
}
9
25
10
26
#settings-container ul {
···
82
98
#settings-container .radio-group label:has(input:checked) input:checked + span {
83
99
color: inherit;
84
100
}
101
+
102
+
@media (min-width: 40em) {
103
+
#settings-container :is(section, .section) {
104
+
margin-inline: 0;
105
+
border-radius: 8px;
106
+
}
107
+
}
+199
-183
src/pages/settings.jsx
+199
-183
src/pages/settings.jsx
···
33
33
<Icon icon="x" alt="Close" />
34
34
</button> */}
35
35
<h2>Accounts</h2>
36
-
<ul class="accounts-list">
37
-
{accounts.map((account, i) => {
38
-
const isCurrent = account.info.id === currentAccount;
39
-
const isDefault = i === (currentDefault || 0);
40
-
return (
41
-
<li>
42
-
<div>
43
-
{moreThanOneAccount && (
44
-
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
45
-
<Icon icon="check-circle" alt="Current" />
46
-
</span>
47
-
)}
48
-
<Avatar url={account.info.avatarStatic} size="xxl" />
49
-
<NameText
50
-
account={account.info}
51
-
showAcct
52
-
onClick={() => {
53
-
states.showAccount = `${account.info.username}@${account.instanceURL}`;
54
-
}}
55
-
/>
56
-
</div>
57
-
<div class="actions">
58
-
{isDefault && moreThanOneAccount && (
59
-
<>
60
-
<span class="tag">Default</span>{' '}
61
-
</>
62
-
)}
63
-
{!isCurrent && (
64
-
<button
65
-
type="button"
66
-
class="light"
36
+
<section>
37
+
<ul class="accounts-list">
38
+
{accounts.map((account, i) => {
39
+
const isCurrent = account.info.id === currentAccount;
40
+
const isDefault = i === (currentDefault || 0);
41
+
return (
42
+
<li>
43
+
<div>
44
+
{moreThanOneAccount && (
45
+
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
46
+
<Icon icon="check-circle" alt="Current" />
47
+
</span>
48
+
)}
49
+
<Avatar url={account.info.avatarStatic} size="xxl" />
50
+
<NameText
51
+
account={account.info}
52
+
showAcct
67
53
onClick={() => {
68
-
store.session.set('currentAccount', account.info.id);
69
-
location.reload();
54
+
states.showAccount = `${account.info.username}@${account.instanceURL}`;
70
55
}}
71
-
>
72
-
<Icon icon="transfer" /> Switch
73
-
</button>
74
-
)}
75
-
<div>
76
-
{!isDefault && moreThanOneAccount && (
56
+
/>
57
+
</div>
58
+
<div class="actions">
59
+
{isDefault && moreThanOneAccount && (
60
+
<>
61
+
<span class="tag">Default</span>{' '}
62
+
</>
63
+
)}
64
+
{!isCurrent && (
77
65
<button
78
66
type="button"
79
-
class="plain small"
67
+
class="light"
80
68
onClick={() => {
81
-
// Move account to the top of the list
82
-
accounts.splice(i, 1);
83
-
accounts.unshift(account);
84
-
store.local.setJSON('accounts', accounts);
85
-
setCurrentDefault(i);
69
+
store.session.set('currentAccount', account.info.id);
70
+
location.reload();
86
71
}}
87
72
>
88
-
Set as default
73
+
<Icon icon="transfer" /> Switch
89
74
</button>
90
75
)}
91
-
{isCurrent && (
92
-
<>
93
-
{' '}
76
+
<div>
77
+
{!isDefault && moreThanOneAccount && (
94
78
<button
95
79
type="button"
96
80
class="plain small"
97
81
onClick={() => {
98
-
const yes = confirm(
99
-
'Are you sure you want to log out?',
100
-
);
101
-
if (!yes) return;
82
+
// Move account to the top of the list
102
83
accounts.splice(i, 1);
84
+
accounts.unshift(account);
103
85
store.local.setJSON('accounts', accounts);
104
-
location.reload();
86
+
setCurrentDefault(i);
105
87
}}
106
88
>
107
-
Log out
89
+
Set as default
108
90
</button>
109
-
</>
110
-
)}
91
+
)}
92
+
{isCurrent && (
93
+
<>
94
+
{' '}
95
+
<button
96
+
type="button"
97
+
class="plain small"
98
+
onClick={() => {
99
+
const yes = confirm(
100
+
'Are you sure you want to log out?',
101
+
);
102
+
if (!yes) return;
103
+
accounts.splice(i, 1);
104
+
store.local.setJSON('accounts', accounts);
105
+
location.reload();
106
+
}}
107
+
>
108
+
Log out
109
+
</button>
110
+
</>
111
+
)}
112
+
</div>
111
113
</div>
112
-
</div>
113
-
</li>
114
-
);
115
-
})}
116
-
</ul>
117
-
{moreThanOneAccount && (
118
-
<p>
119
-
<small>
120
-
Note: <i>Default</i> account will always be used for first load.
121
-
Switched accounts will persist during the session.
122
-
</small>
114
+
</li>
115
+
);
116
+
})}
117
+
</ul>
118
+
{moreThanOneAccount && (
119
+
<p>
120
+
<small>
121
+
Note: <i>Default</i> account will always be used for first load.
122
+
Switched accounts will persist during the session.
123
+
</small>
124
+
</p>
125
+
)}
126
+
<p style={{ textAlign: 'end' }}>
127
+
<a href="/#/login" class="button" onClick={onClose}>
128
+
Add new account
129
+
</a>
123
130
</p>
124
-
)}
125
-
<p style={{ textAlign: 'end' }}>
126
-
<a href="/#/login" class="button" onClick={onClose}>
127
-
Add new account
128
-
</a>
129
-
</p>
130
-
<h2>Theme</h2>
131
-
<form
132
-
ref={themeFormRef}
133
-
onInput={(e) => {
134
-
console.log(e);
135
-
e.preventDefault();
136
-
const formData = new FormData(themeFormRef.current);
137
-
const theme = formData.get('theme');
138
-
const html = document.documentElement;
131
+
</section>
132
+
<h2>Settings</h2>
133
+
<ul class="section">
134
+
<li>
135
+
<div>
136
+
<label>Appearance</label>
137
+
</div>
138
+
<div>
139
+
<form
140
+
ref={themeFormRef}
141
+
onInput={(e) => {
142
+
console.log(e);
143
+
e.preventDefault();
144
+
const formData = new FormData(themeFormRef.current);
145
+
const theme = formData.get('theme');
146
+
const html = document.documentElement;
139
147
140
-
if (theme === 'auto') {
141
-
html.classList.remove('is-light', 'is-dark');
142
-
} else {
143
-
html.classList.toggle('is-light', theme === 'light');
144
-
html.classList.toggle('is-dark', theme === 'dark');
145
-
}
146
-
document
147
-
.querySelector('meta[name="color-scheme"]')
148
-
.setAttribute('content', theme);
148
+
if (theme === 'auto') {
149
+
html.classList.remove('is-light', 'is-dark');
150
+
} else {
151
+
html.classList.toggle('is-light', theme === 'light');
152
+
html.classList.toggle('is-dark', theme === 'dark');
153
+
}
154
+
document
155
+
.querySelector('meta[name="color-scheme"]')
156
+
.setAttribute('content', theme);
149
157
150
-
if (theme === 'auto') {
151
-
store.local.del('theme');
152
-
} else {
153
-
store.local.set('theme', theme);
154
-
}
155
-
}}
156
-
>
157
-
<div class="radio-group">
158
-
<label>
159
-
<input
160
-
type="radio"
161
-
name="theme"
162
-
value="light"
163
-
defaultChecked={currentTheme === 'light'}
164
-
/>
165
-
<span>Light</span>
166
-
</label>
158
+
if (theme === 'auto') {
159
+
store.local.del('theme');
160
+
} else {
161
+
store.local.set('theme', theme);
162
+
}
163
+
}}
164
+
>
165
+
<div class="radio-group">
166
+
<label>
167
+
<input
168
+
type="radio"
169
+
name="theme"
170
+
value="light"
171
+
defaultChecked={currentTheme === 'light'}
172
+
/>
173
+
<span>Light</span>
174
+
</label>
175
+
<label>
176
+
<input
177
+
type="radio"
178
+
name="theme"
179
+
value="dark"
180
+
defaultChecked={currentTheme === 'dark'}
181
+
/>
182
+
<span>Dark</span>
183
+
</label>
184
+
<label>
185
+
<input
186
+
type="radio"
187
+
name="theme"
188
+
value="auto"
189
+
defaultChecked={
190
+
currentTheme !== 'light' && currentTheme !== 'dark'
191
+
}
192
+
/>
193
+
<span>Auto</span>
194
+
</label>
195
+
</div>
196
+
</form>
197
+
</div>
198
+
</li>
199
+
<li>
167
200
<label>
168
201
<input
169
-
type="radio"
170
-
name="theme"
171
-
value="dark"
172
-
defaultChecked={currentTheme === 'dark'}
173
-
/>
174
-
<span>Dark</span>
202
+
type="checkbox"
203
+
checked={snapStates.settings.boostsCarousel}
204
+
onChange={(e) => {
205
+
states.settings.boostsCarousel = e.target.checked;
206
+
}}
207
+
/>{' '}
208
+
Boosts carousel (experimental)
175
209
</label>
176
-
<label>
177
-
<input
178
-
type="radio"
179
-
name="theme"
180
-
value="auto"
181
-
defaultChecked={
182
-
currentTheme !== 'light' && currentTheme !== 'dark'
183
-
}
184
-
/>
185
-
<span>Auto</span>
186
-
</label>
210
+
</li>
211
+
</ul>
212
+
<h2>Hidden features</h2>
213
+
<section>
214
+
<div>
215
+
<button
216
+
type="button"
217
+
class="light"
218
+
onClick={() => {
219
+
states.showDrafts = true;
220
+
states.showSettings = false;
221
+
}}
222
+
>
223
+
Unsent drafts
224
+
</button>
187
225
</div>
188
-
</form>
189
-
<h2>Settings</h2>
190
-
<label>
191
-
<input
192
-
type="checkbox"
193
-
checked={snapStates.settings.boostsCarousel}
194
-
onChange={(e) => {
195
-
states.settings.boostsCarousel = e.target.checked;
196
-
}}
197
-
/>{' '}
198
-
Boosts carousel (experimental)
199
-
</label>
200
-
<h2>Hidden features</h2>
201
-
<p>
202
-
<button
203
-
type="button"
204
-
class="light"
205
-
onClick={() => {
206
-
states.showDrafts = true;
207
-
states.showSettings = false;
208
-
}}
209
-
>
210
-
Unsent drafts
211
-
</button>
212
-
</p>
226
+
</section>
213
227
<h2>About</h2>
214
-
<p>
215
-
<a href="https://github.com/cheeaun/phanpy" target="_blank">
216
-
Built
217
-
</a>{' '}
218
-
by{' '}
219
-
<a
220
-
href="https://mastodon.social/@cheeaun"
221
-
// target="_blank"
222
-
onClick={(e) => {
223
-
e.preventDefault();
224
-
states.showAccount = 'cheeaun@mastodon.social';
225
-
}}
226
-
>
227
-
@cheeaun
228
-
</a>
229
-
.
230
-
</p>
231
-
{__BUILD_TIME__ && (
228
+
<section>
232
229
<p>
233
-
Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
234
-
{__COMMIT_HASH__ && (
235
-
<>
236
-
(
237
-
<a
238
-
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
239
-
target="_blank"
240
-
>
241
-
<code>{__COMMIT_HASH__}</code>
242
-
</a>
243
-
)
244
-
</>
245
-
)}
230
+
<a href="https://github.com/cheeaun/phanpy" target="_blank">
231
+
Built
232
+
</a>{' '}
233
+
by{' '}
234
+
<a
235
+
href="https://mastodon.social/@cheeaun"
236
+
// target="_blank"
237
+
onClick={(e) => {
238
+
e.preventDefault();
239
+
states.showAccount = 'cheeaun@mastodon.social';
240
+
}}
241
+
>
242
+
@cheeaun
243
+
</a>
244
+
.
246
245
</p>
247
-
)}
246
+
{__BUILD_TIME__ && (
247
+
<p>
248
+
Last build: <RelativeTime datetime={new Date(__BUILD_TIME__)} />{' '}
249
+
{__COMMIT_HASH__ && (
250
+
<>
251
+
(
252
+
<a
253
+
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
254
+
target="_blank"
255
+
>
256
+
<code>{__COMMIT_HASH__}</code>
257
+
</a>
258
+
)
259
+
</>
260
+
)}
261
+
</p>
262
+
)}
263
+
</section>
248
264
</main>
249
265
</div>
250
266
);