Fixed descriptions on checkbox components

This commit is contained in:
nizune
2021-07-04 20:15:38 +02:00
parent 720bc263a5
commit e6f46e7455
9 changed files with 37 additions and 47 deletions

View File

@@ -39,6 +39,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
<Checkbox
disabled={!("Notification" in window)}
checked={options?.desktopEnabled ?? false}
description={<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />}
onChange={async desktopEnabled => {
if (desktopEnabled) {
let permission = await Notification.requestPermission();
@@ -57,13 +58,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
}}
>
<Text id="app.settings.pages.notifications.enable_desktop" />
<p>
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
</p>
</Checkbox>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
checked={pushEnabled ?? false}
description={<Text id="app.settings.pages.notifications.descriptions.enable_push" />}
onChange={async pushEnabled => {
try {
const reg = await navigator.serviceWorker?.getRegistration();
@@ -99,9 +98,6 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
}}
>
<Text id="app.settings.pages.notifications.enable_push" />
<p>
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
</p>
</Checkbox>
<h3>
<Text id="app.settings.pages.notifications.sounds" />

View File

@@ -321,30 +321,16 @@
}
}
.notifications {
label {
margin-top: 12px;
}
p {
margin-top: 0;
font-size: 0.9em;
color: var(--secondary-foreground);
}
}
.languages {
.list {
margin-bottom: 1em;
.entry {
padding: 2px 8px;
height: 50px;
border-radius: 4px;
}
.entry > span > span {
gap: 8px;
gap: 20px;
display: flex;
align-items: center;
flex-direction: row;

View File

@@ -25,6 +25,7 @@ export function Component(props: Props & WithDispatcher) {
([ key, title ]) =>
<Checkbox
checked={(props.options?.disabled ?? []).indexOf(key) === -1}
description={<Text id={`app.settings.pages.sync.descriptions.${key}`} />}
onChange={enabled => {
props.dispatcher({
type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY',
@@ -33,9 +34,6 @@ export function Component(props: Props & WithDispatcher) {
}}
>
<Text id={`app.settings.pages.${title}`} />
<p>
<Text id={`app.settings.pages.sync.descriptions.${key}`} />
</p>
</Checkbox>
)
}