Update: started work on new advanced settings

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`

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}>

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;