From 4474d2ec566b8a8b979e6f9a3aa62574383ba769 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 8 Jul 2021 21:51:12 +0100
Subject: [PATCH] Re-design theme overrides.

---
 external/lang                              |  2 +-
 src/pages/settings/panes/Appearance.tsx    | 44 +++++++------
 src/pages/settings/panes/Panes.module.scss | 74 ++++++++++++++++------
 3 files changed, 82 insertions(+), 38 deletions(-)

diff --git a/external/lang b/external/lang
index 39359e76..b18d44b5 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 39359e76b961fa7ee9f83a0cabdc811ccecdb600
+Subproject commit b18d44b56037d09bd2fac68be04e42723e50a3d7
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index ccc8a13b..8a906308 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -37,7 +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";
+import { Reset, Import, Pencil } from "@styled-icons/boxicons-regular";
 import Tooltip from "../../../components/common/Tooltip";
 
 interface Props {
@@ -240,12 +240,9 @@ export function Component(props: Props) {
             </div>
 
             <CollapsibleSection
-                id="settings_advanced_appearance"
                 defaultValue={false}
-                summary={<Text id="app.settings.pages.appearance.advanced" />}>
-                <h3>
-                    <Text id="app.settings.pages.appearance.overrides" />
-                </h3>
+                id="settings_overrides"
+                summary={<Text id="app.settings.pages.appearance.overrides" />}>
                 <div className={styles.actions}>
                     <Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
                         <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
@@ -312,23 +309,27 @@ export function Component(props: Props) {
                             "hover",
                         ] as const
                     ).map((x) => (
-                        <div className={styles.entry} key={x}>
+                        <div className={styles.entry} key={x}
+                            style={{ backgroundColor: theme[x] }}>
+                            <div className={styles.input}>
+                                <input
+                                    type="color"
+                                    value={theme[x]}
+                                    onChange={(v) =>
+                                        setOverride({
+                                            [x]: v.currentTarget.value,
+                                        })
+                                    }
+                                />
+                            </div>
                             <span>{x}</span>
                             <div className={styles.override}>
-                                <div
-                                    className={styles.picker}
-                                    style={{ backgroundColor: theme[x] }}>
-                                    <input
-                                        type="color"
-                                        value={theme[x]}
-                                        onChange={(v) =>
-                                            setOverride({
-                                                [x]: v.currentTarget.value,
-                                            })
-                                        }
-                                    />
+                                <div className={styles.picker}
+                                    onClick={e => e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}>
+                                    <Pencil size={24} />
                                 </div>
                                 <InputBox
+                                    type="text"
                                     className={styles.text}
                                     value={theme[x]}
                                     onChange={(y) =>
@@ -341,7 +342,12 @@ export function Component(props: Props) {
                         </div>
                     ))}
                 </div>
+            </CollapsibleSection>
 
+            <CollapsibleSection
+                id="settings_advanced_appearance"
+                defaultValue={false}
+                summary={<Text id="app.settings.pages.appearance.advanced" />}>
                 <h3>
                     <Text id="app.settings.pages.appearance.mono_font" />
                 </h3>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 85f3855c..f8e9689c 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -252,7 +252,7 @@
     .actions {
         gap: 8px;
         display: flex;
-        margin-bottom: 8px;
+        margin: 8px 0;
 
         .code {
             cursor: pointer;
@@ -274,28 +274,74 @@
     }
 
     .overrides {
+        row-gap: 8px;
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        column-gap: 16px;
+        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
 
         .entry {
-            gap: 8px;
             padding: 12px;
             margin-top: 8px;
             border-radius: 6px;
-
-            .override {
-                display: flex;
-            }
+            border: 1px solid black;
 
             span {
                 flex: 1;
                 display: block;
-                font-size: .875rem;
                 font-weight: 600;
-                margin-bottom: 4px;
+                font-size: .875rem;
+                margin-bottom: 8px;
                 text-transform: capitalize;
+
+                color: transparent;
+                background: inherit;
+                background-clip: text;
+                -webkit-background-clip: text;
+                filter: sepia(1) invert(1) contrast(9) grayscale(1);
             }
 
+            .override {
+                gap: 16px;
+                display: flex;
+
+                .picker {
+                    width: 38px;
+                    height: 38px;
+                    display: grid;
+                    cursor: pointer;
+                    border-radius: 6px;
+                    place-items: center;
+                    background: var(--primary-background);
+                }
+
+                input[type="text"] {
+                    width: 0;
+                    min-width: 0;
+                    flex-grow: 1;
+                }
+            }
+
+            .input {
+                width: 0;
+                height: 0;
+                position: relative;
+
+                input {
+                    opacity: 0;
+                    border: none;
+                    display: block;
+                    cursor: pointer;
+                    position: relative;
+
+                    top: 48px;
+                }
+            }
+
+            /*.override {
+                display: flex;
+            }
+
+
             .picker {
                 width: 30px;
                 height: 30px;
@@ -307,20 +353,12 @@
                 //TOFIX - Looks wonky on Chromium
                 border: 1px solid black;
 
-                input {
-                    opacity: 0;
-                    width: 30px;
-                    height: 30px;
-                    border: none;
-                    display: block;
-                    cursor: pointer;
-                }
             }
 
             .text {
                 border-radius: 4px;
                 padding: 0 4px 0;
-            }
+            }*/
         }
     }
 }