diff --git a/external/lang b/external/lang
index 6ccd590846c35e8d3b948e9203510ccf8718a79c..c2245a290439f0ed8efe70eb6a11cfb42c3e13c1 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 6ccd590846c35e8d3b948e9203510ccf8718a79c
+Subproject commit c2245a290439f0ed8efe70eb6a11cfb42c3e13c1
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
index bc87c5cc98ac323fc4609c5dd3f62363844a6540..7fad94d8adccb67348effc20a8f7867804b797ab 100644
--- a/src/components/ui/Checkbox.tsx
+++ b/src/components/ui/Checkbox.tsx
@@ -3,9 +3,9 @@ import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
const CheckboxBase = styled.label`
+ margin-top: 20px;
gap: 4px;
z-index: 1;
- padding: 4px;
display: flex;
border-radius: 4px;
align-items: center;
@@ -16,25 +16,19 @@ const CheckboxBase = styled.label`
transition: 0.2s ease all;
- p {
- margin: 0;
- }
-
input {
display: none;
}
&:hover {
- background: var(--secondary-background);
-
.check {
background: var(--background);
}
}
&[disabled] {
- opacity: 0.5;
- cursor: unset;
+ opacity: .5;
+ cursor: not-allowed;
&:hover {
background: unset;
@@ -43,15 +37,15 @@ const CheckboxBase = styled.label`
`;
const CheckboxContent = styled.span`
- flex-grow: 1;
display: flex;
+ flex-grow: 1;
font-size: 1rem;
font-weight: 600;
flex-direction: column;
`;
const CheckboxDescription = styled.span`
- font-size: 0.8em;
+ font-size: .75rem;
font-weight: 400;
color: var(--secondary-foreground);
`;
diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index cbc13bd284f1d4c12b9b6b58573c061a21cd455a..46a473fc80ca6077b82daf219088d95fad4b49b1 100644
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -1,5 +1,6 @@
import { useRef } from "preact/hooks";
-import { Check, Pencil } from "@styled-icons/boxicons-regular";
+import { Check } from "@styled-icons/boxicons-regular";
+import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components";
interface Props {
@@ -98,7 +99,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
type="large"
onClick={() => ref.current.click()}
>
- <Pencil size={32} />
+ <Palette size={32} />
</Swatch>
<input
type="color"
diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx
index 6551c9ca7368d14c8f1ce832a62b4fd591a731b8..989f0787b351c5b9e8c632494956de7e14ade81f 100644
--- a/src/components/ui/ComboBox.tsx
+++ b/src/components/ui/ComboBox.tsx
@@ -2,16 +2,19 @@ import styled from "styled-components";
export default styled.select`
padding: 8px;
- border-radius: 2px;
+ border-radius: 6px;
font-family: inherit;
color: var(--secondary-foreground);
background: var(--secondary-background);
-
+ font-size: .875rem;
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
+ transition: box-shadow .3s;
+ cursor: pointer;
+ width: 100%;
&:focus {
- outline-color: var(--accent);
+ box-shadow: 0 0 0 2pt var(--accent);
}
`;
diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx
index 489572b915f688b63a9101c50e8630b12a8d4ed6..f664a58cac3965f6632a73a437ab295df0ef13f3 100644
--- a/src/components/ui/Tip.tsx
+++ b/src/components/ui/Tip.tsx
@@ -7,6 +7,13 @@ interface Props {
error?: boolean
}
+export const Separator = styled.div<Props>`
+ height: 1px;
+ width: calc(100% - 10px);
+ background: var(--secondary-header);
+ margin: 18px auto;
+`;
+
export const TipBase = styled.div<Props>`
display: flex;
padding: 12px;
@@ -46,9 +53,13 @@ export const TipBase = styled.div<Props>`
export default function Tip(props: Props & { children: Children }) {
const { children, ...tipProps } = props;
return (
- <TipBase {...tipProps}>
- <InfoCircle size={20} />
- <span>{props.children}</span>
- </TipBase>
+ <>
+ <Separator />
+ <TipBase {...tipProps}>
+ <InfoCircle size={20} />
+ <span>{props.children}</span>
+ </TipBase>
+ </>
+
);
}
diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx
index ab9156b04561398264280d02ff6b8b2f78fa8abc..74fa2753c45f95bd8a3cb082b474f40831c50ae2 100644
--- a/src/context/revoltjs/FileUploads.tsx
+++ b/src/context/revoltjs/FileUploads.tsx
@@ -8,7 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
import Preloader from "../../components/ui/Preloader";
import { determineFileSize } from "../../lib/fileSize";
import IconButton from '../../components/ui/IconButton';
-import { Edit, Plus, X, XCircle } from "@styled-icons/boxicons-regular";
+import { Plus, X, XCircle } from "@styled-icons/boxicons-regular";
+import { Pencil } from "@styled-icons/boxicons-solid";
import { useIntermediate } from "../intermediate/Intermediate";
type Props = {
@@ -190,7 +191,7 @@ export function FileUploader(props: Props) {
<Preloader type="ring" />
</div> :
<div className={styles.edit}>
- <Edit size={30} />
+ <Pencil size={30} />
</div> }
</div>
<div className={styles.modify}>
diff --git a/src/pages/settings/panes/Notifications.tsx b/src/pages/settings/panes/Notifications.tsx
index 1dca0cd6925c427e85df6d3799e91fec7f22e83d..9f1e3018e8a3e7ee20cac47d13c7d223db7f1a17 100644
--- a/src/pages/settings/panes/Notifications.tsx
+++ b/src/pages/settings/panes/Notifications.tsx
@@ -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" />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 4695af59e7d12ad07838bd4cb25e25811cbb3d49..f2f41494202b20d59f52cede6c342c760e95f8bf 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -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;
diff --git a/src/pages/settings/panes/Sync.tsx b/src/pages/settings/panes/Sync.tsx
index ad7c84f82ba327c07bcc2845798da099b4e9a647..2055016b2c89dd208841822527e5e992db511fb5 100644
--- a/src/pages/settings/panes/Sync.tsx
+++ b/src/pages/settings/panes/Sync.tsx
@@ -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>
)
}