cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-10 01:03:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

Update: started work on new advanced settings

Browse source
This commit is contained in:
nizune 2021-07-08 16:02:52 +02:00
parent 69193e9a46
commit 5bd494fa9a
3 changed files with 26 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@ interface Props {
readonly contrast?: boolean; readonly contrast?: boolean;
readonly plain?: boolean; readonly plain?: boolean;
readonly error?: boolean; readonly error?: boolean;
readonly iconbutton?: boolean;
} }
export type ButtonProps = Props & export type ButtonProps = Props &
@ -54,6 +55,14 @@ export default styled.button<Props>`
font-size: 13px; font-size: 13px;
`} `}
${(props) =>
props.iconbutton &&
css`
height: 38px !important;
width: 38px !important;
min-width: unset !important;
`}
${(props) => ${(props) =>
props.accent && props.accent &&
css` css`

22
src/pages/settings/panes/Appearance.tsx
View file

@ -37,6 +37,7 @@ import mutantSVG from "../assets/mutant_emoji.svg";
import notoSVG from "../assets/noto_emoji.svg"; import notoSVG from "../assets/noto_emoji.svg";
import openmojiSVG from "../assets/openmoji_emoji.svg"; import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg"; import twemojiSVG from "../assets/twemoji_emoji.svg";
import { Reset, Import } from "@styled-icons/boxicons-regular";
interface Props { interface Props {
settings: Settings; settings: Settings;
@ -245,24 +246,13 @@ export function Component(props: Props) {
<Text id="app.settings.pages.appearance.overrides" /> <Text id="app.settings.pages.appearance.overrides" />
</h3> </h3>
<div className={styles.actions}> <div className={styles.actions}>
<Button contrast onClick={() => setTheme({ custom: {} })}> <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
<Text id="app.settings.pages.appearance.reset_overrides" /> <Reset size={22}/>
</Button>
<Button
contrast
onClick={() => writeClipboard(JSON.stringify(theme))}>
<Text id="app.settings.pages.appearance.export_clipboard" />
</Button>
<Button
contrast
onClick={async () => {
const text = await navigator.clipboard.readText();
setOverride(JSON.parse(text));
}}>
<Text id="app.settings.pages.appearance.import_clipboard" />
</Button> </Button>
<div className={styles.code}>Text</div>
<Button <Button
contrast contrast
iconbutton
onClick={async () => { onClick={async () => {
openScreen({ openScreen({
id: "_input", id: "_input",
@ -276,7 +266,7 @@ export function Component(props: Props) {
setOverride(JSON.parse(string)), setOverride(JSON.parse(string)),
}); });
}}> }}>
<Text id="app.settings.pages.appearance.import_manual" /> <Import size={22}/>
</Button> </Button>
</div> </div>
<div className={styles.overrides}> <div className={styles.overrides}>

12
src/pages/settings/panes/Panes.module.scss
View file

@ -254,6 +254,16 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 8px; margin-bottom: 8px;
.code {
display: flex;
flex-grow: 1;
border-radius: 4px;
padding: 8px;
background: var(--secondary-background);
align-items: center;
font-family: var(--codeblock-font);
}
} }
.overrides { .overrides {
@ -408,7 +418,7 @@
margin-top: 20px; margin-top: 20px;
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 800px) {
.session { .session {
align-items: unset; align-items: unset;
flex-direction: column; flex-direction: column;