diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 0e31d885d70371d9f96e7805fafa74500afdec4f..6fd41b2eeddb6e0caa39d697ef5de016e4a71c05 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -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` diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index 24b0008ea2feab9a0cb12812973bac1efc021846..e8647a80da65421e993ba99b6eb82988b36bbe45 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -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}> diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 15ae4847c6ea9c304903f09930be6cffdb467bd5..dd3b64a300728bd8902167cbf05a5b19d2e24509 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -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;