mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-29 18:30:58 -05:00
Update: started work on new advanced settings
This commit is contained in:
parent
69193e9a46
commit
5bd494fa9a
3 changed files with 26 additions and 17 deletions
|
@ -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`
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue