From 8d8b13ec12e3031cd8ccac87e91c53d082f95f1b Mon Sep 17 00:00:00 2001 From: nizune <9-nizune@users.noreply.gitlab.insrt.uk> Date: Sun, 4 Jul 2021 20:15:38 +0200 Subject: [PATCH] Fixed descriptions on checkbox components --- external/lang | 2 +- src/components/ui/Checkbox.tsx | 16 +++++----------- src/components/ui/ColourSwatches.tsx | 5 +++-- src/components/ui/ComboBox.tsx | 9 ++++++--- src/components/ui/Tip.tsx | 19 +++++++++++++++---- src/context/revoltjs/FileUploads.tsx | 5 +++-- src/pages/settings/panes/Notifications.tsx | 8 ++------ src/pages/settings/panes/Panes.module.scss | 16 +--------------- src/pages/settings/panes/Sync.tsx | 4 +--- 9 files changed, 37 insertions(+), 47 deletions(-) diff --git a/external/lang b/external/lang index 6ccd5908..c2245a29 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 bc87c5cc..7fad94d8 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 cbc13bd2..46a473fc 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()} > - + ` + height: 1px; + width: calc(100% - 10px); + background: var(--secondary-header); + margin: 18px auto; +`; + export const TipBase = styled.div` display: flex; padding: 12px; @@ -46,9 +53,13 @@ export const TipBase = styled.div` export default function Tip(props: Props & { children: Children }) { const { children, ...tipProps } = props; return ( - - - {props.children} - + <> + + + + {props.children} + + + ); } diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx index ab9156b0..74fa2753 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) { :
- +
}
diff --git a/src/pages/settings/panes/Notifications.tsx b/src/pages/settings/panes/Notifications.tsx index 1dca0cd6..9f1e3018 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) { } onChange={async desktopEnabled => { if (desktopEnabled) { let permission = await Notification.requestPermission(); @@ -57,13 +58,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) { }} > -

- -

} onChange={async pushEnabled => { try { const reg = await navigator.serviceWorker?.getRegistration(); @@ -99,9 +98,6 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) { }} > -

- -

diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 4695af59..f2f41494 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 ad7c84f8..2055016b 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 ]) => } onChange={enabled => { props.dispatcher({ type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY', @@ -33,9 +34,6 @@ export function Component(props: Props & WithDispatcher) { }} > -

- -

) }