diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 0e31d885..6fd41b2e 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` 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 24b0008e..e8647a80 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
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 15ae4847..dd3b64a3 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;