Fixed descriptions on checkbox components

external/lang

@@ -1 +1 @@
-Subproject commit 6ccd590846c35e8d3b948e9203510ccf8718a79c
+Subproject commit c2245a290439f0ed8efe70eb6a11cfb42c3e13c1

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;
+        opacity: .5;
-        cursor: unset;
+        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);
 `;

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"

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);
     }
 `;

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} />
+            <Separator />
-            <span>{props.children}</span>
+            <TipBase {...tipProps}>
-        </TipBase>
+                <InfoCircle size={20} />
+                <span>{props.children}</span>
+            </TipBase>
+        </>
+        
     );
 }

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}>

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" />

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;

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>
                 )
             }