cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 07:02:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fixed descriptions on checkbox components

Browse source
This commit is contained in:
nizune 2021-07-04 20:15:38 +02:00
parent 1c80d5675f
commit 8d8b13ec12
9 changed files with 37 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

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

16
src/components/ui/Checkbox.tsx
View file

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

5
src/components/ui/ColourSwatches.tsx
View file

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

9
src/components/ui/ComboBox.tsx
View file

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

19
src/components/ui/Tip.tsx
View file

@ -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>
</>
);
}

5
src/context/revoltjs/FileUploads.tsx
View file

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

8
src/pages/settings/panes/Notifications.tsx
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" />

16
src/pages/settings/panes/Panes.module.scss
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;

4
src/pages/settings/panes/Sync.tsx
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>
)
}