Update: started work on new advanced settings

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

View file

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

View file

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

View file

@ -254,6 +254,16 @@
display: flex;
flex-wrap: wrap;
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 {
@ -408,7 +418,7 @@
margin-top: 20px;
}
@media only screen and (max-width: 900px) {
@media only screen and (max-width: 800px) {
.session {
align-items: unset;
flex-direction: column;