From b9d07152c80efc94a242c72403f234c0edf79feb Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 8 Jul 2021 20:57:52 +0100
Subject: [PATCH] Add tooltips to advanced settings. Add click to copy theme.

---
 src/pages/settings/panes/Appearance.tsx    | 58 ++++++++++++++--------
 src/pages/settings/panes/Panes.module.scss | 20 +++++---
 2 files changed, 50 insertions(+), 28 deletions(-)

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 id="app.settings.pages.appearance.overrides" />
                 </h3>
                 <div className={styles.actions}>
-                    <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
-                        <Reset size={22}/>
-                    </Button>
-                    <div className={styles.code}>Text</div>
-                    <Button
-                        contrast
-                        iconbutton
-                        onClick={async () => {
-                            openScreen({
-                                id: "_input",
-                                question: (
-                                    <Text id="app.settings.pages.appearance.import_theme" />
-                                ),
-                                field: (
-                                    <Text id="app.settings.pages.appearance.theme_data" />
-                                ),
-                                callback: async (string) =>
-                                    setOverride(JSON.parse(string)),
-                            });
-                        }}>
-                        <Import size={22}/>
-                    </Button>
+                    <Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
+                        <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
+                            <Reset size={22}/>
+                        </Button>
+                    </Tooltip>
+                    <div className={styles.code} onClick={() => writeClipboard(JSON.stringify(theme))}>
+                        <Tooltip content={<Text id="app.special.copy" />}>
+                            {JSON.stringify(theme)}
+                        </Tooltip>
+                    </div>
+                    <Tooltip content={<Text id="app.settings.pages.appearance.import" />}>
+                        <Button
+                            contrast
+                            iconbutton
+                            onClick={async () => {
+                                try {
+                                    const text = await navigator.clipboard.readText();
+                                    setOverride(JSON.parse(text));
+                                } catch (err) {
+                                    openScreen({
+                                        id: "_input",
+                                        question: (
+                                            <Text id="app.settings.pages.appearance.import_theme" />
+                                        ),
+                                        field: (
+                                            <Text id="app.settings.pages.appearance.theme_data" />
+                                        ),
+                                        callback: async (string) =>
+                                            setOverride(JSON.parse(string)),
+                                    });
+                                }
+                            }}>
+                            <Import size={22}/>
+                        </Button>
+                    </Tooltip>
                 </div>
                 <div className={styles.overrides}>
                     {(
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;