mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -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 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`
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue