diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index e8647a80..ccc8a13b 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -38,6 +38,7 @@ 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"; +import Tooltip from "../../../components/common/Tooltip"; interface Props { settings: Settings; @@ -246,28 +247,41 @@ export function Component(props: Props) {
- -
Text
- + }> + + +
writeClipboard(JSON.stringify(theme))}> + }> + {JSON.stringify(theme)} + +
+ }> + +
{( diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index dd3b64a3..85f3855c 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -252,17 +252,24 @@ .actions { gap: 8px; display: flex; - flex-wrap: wrap; margin-bottom: 8px; .code { - display: flex; + cursor: pointer; + + min-width: 0; flex-grow: 1; - border-radius: 4px; padding: 8px; - background: var(--secondary-background); - align-items: center; + border-radius: 4px; font-family: var(--codeblock-font); + background: var(--secondary-background); + + > div { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } } @@ -272,8 +279,9 @@ .entry { gap: 8px; - padding: 2px; + padding: 12px; margin-top: 8px; + border-radius: 6px; .override { display: flex;