From 8f1cde9c907f5884c5204c53a8fef23a9e03f78a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 3 Nov 2020 13:19:47 +0100
Subject: [PATCH] icon tweaks (#200)

---
 src/components/atoms/EtherscanLink.module.css |  4 +-
 .../UserPreferences/Appearance.module.css     | 33 ++++++++++++++
 .../molecules/UserPreferences/Appearance.tsx  | 43 +++++++++++++++++++
 .../molecules/UserPreferences/Theme.tsx       | 28 ------------
 .../UserPreferences/index.module.css          |  5 +--
 .../molecules/UserPreferences/index.tsx       |  4 +-
 src/images/copy.svg                           |  3 ++
 src/images/external.svg                       |  4 +-
 src/images/moon.svg                           |  3 ++
 src/images/refresh.svg                        |  4 +-
 src/images/sun.svg                            | 11 +++++
 11 files changed, 103 insertions(+), 39 deletions(-)
 create mode 100644 src/components/molecules/UserPreferences/Appearance.module.css
 create mode 100644 src/components/molecules/UserPreferences/Appearance.tsx
 delete mode 100644 src/components/molecules/UserPreferences/Theme.tsx
 create mode 100644 src/images/copy.svg
 create mode 100644 src/images/moon.svg
 create mode 100644 src/images/sun.svg

diff --git a/src/components/atoms/EtherscanLink.module.css b/src/components/atoms/EtherscanLink.module.css
index 64b37ac1d..12221af79 100644
--- a/src/components/atoms/EtherscanLink.module.css
+++ b/src/components/atoms/EtherscanLink.module.css
@@ -3,8 +3,8 @@
 }
 
 .link svg {
-  width: 0.7em;
-  height: 0.7em;
+  width: 0.6em;
+  height: 0.6em;
   display: inline-block;
   fill: var(--brand-grey-light);
 }
diff --git a/src/components/molecules/UserPreferences/Appearance.module.css b/src/components/molecules/UserPreferences/Appearance.module.css
new file mode 100644
index 000000000..95f965292
--- /dev/null
+++ b/src/components/molecules/UserPreferences/Appearance.module.css
@@ -0,0 +1,33 @@
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: calc(var(--spacer) / 8);
+}
+
+.button {
+  display: block;
+  flex: 0 0 48%;
+  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2)
+    calc(var(--spacer) / 4) calc(var(--spacer) / 2) !important;
+  border-radius: var(--border-radius);
+  text-transform: none;
+}
+
+.button,
+.button:hover,
+.button:active {
+  color: var(--color-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.button svg {
+  width: var(--font-size-h4);
+  height: var(--font-size-h4);
+  fill: currentColor;
+  margin-bottom: calc(var(--spacer) / 5);
+}
+
+.button.selected {
+  color: var(--font-color-text);
+  border-color: var(--color-secondary);
+}
diff --git a/src/components/molecules/UserPreferences/Appearance.tsx b/src/components/molecules/UserPreferences/Appearance.tsx
new file mode 100644
index 000000000..86cf5237e
--- /dev/null
+++ b/src/components/molecules/UserPreferences/Appearance.tsx
@@ -0,0 +1,43 @@
+import React, { ReactElement } from 'react'
+import { DarkMode } from 'use-dark-mode'
+import Button from '../../atoms/Button'
+import FormHelp from '../../atoms/Input/Help'
+import Label from '../../atoms/Input/Label'
+import styles from './Appearance.module.css'
+import { ReactComponent as Moon } from '../../../images/moon.svg'
+import { ReactComponent as Sun } from '../../../images/sun.svg'
+
+const buttons = ['Light', 'Dark']
+
+export default function Appearance({
+  darkMode
+}: {
+  darkMode: DarkMode
+}): ReactElement {
+  return (
+    <li>
+      <Label htmlFor="">Appearance</Label>
+      <div className={styles.buttons}>
+        {buttons.map((button) => {
+          const isDark = button === 'Dark'
+          const selected =
+            (isDark && darkMode.value) || (!isDark && !darkMode.value)
+
+          return (
+            <Button
+              key={button}
+              className={`${styles.button} ${selected ? styles.selected : ''}`}
+              size="small"
+              style="text"
+              onClick={() => (isDark ? darkMode.enable() : darkMode.disable())}
+            >
+              {isDark ? <Moon /> : <Sun />}
+              {button}
+            </Button>
+          )
+        })}
+      </div>
+      <FormHelp>Defaults to your OS setting, select to override.</FormHelp>
+    </li>
+  )
+}
diff --git a/src/components/molecules/UserPreferences/Theme.tsx b/src/components/molecules/UserPreferences/Theme.tsx
deleted file mode 100644
index 663ce49fb..000000000
--- a/src/components/molecules/UserPreferences/Theme.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { ReactElement } from 'react'
-import { DarkMode } from 'use-dark-mode'
-import Input from '../../atoms/Input'
-
-const options = ['Light', 'Dark']
-
-export default function Theme({
-  darkMode
-}: {
-  darkMode: DarkMode
-}): ReactElement {
-  const value = darkMode.value === true ? 'Dark' : 'Light'
-
-  return (
-    <li>
-      <Input
-        name="theme"
-        label="Theme"
-        help="Defaults to your OS setting, select a theme to override."
-        type="select"
-        options={options}
-        value={value}
-        onChange={() => darkMode.toggle()}
-        size="small"
-      />
-    </li>
-  )
-}
diff --git a/src/components/molecules/UserPreferences/index.module.css b/src/components/molecules/UserPreferences/index.module.css
index ba420e823..1adc1a58c 100644
--- a/src/components/molecules/UserPreferences/index.module.css
+++ b/src/components/molecules/UserPreferences/index.module.css
@@ -50,9 +50,8 @@
 }
 
 .preferencesDetails li {
-  padding-top: calc(var(--spacer) / 2);
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: calc(var(--spacer) / 2);
+  padding-top: calc(var(--spacer) / 3);
+  padding-bottom: calc(var(--spacer) / 3);
 }
 
 .preferencesDetails li:last-child,
diff --git a/src/components/molecules/UserPreferences/index.tsx b/src/components/molecules/UserPreferences/index.tsx
index e16576bad..46e34fa73 100644
--- a/src/components/molecules/UserPreferences/index.tsx
+++ b/src/components/molecules/UserPreferences/index.tsx
@@ -6,7 +6,7 @@ import Currency from './Currency'
 import Debug from './Debug'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
 import useDarkMode from 'use-dark-mode'
-import Theme from './Theme'
+import Appearance from './Appearance'
 import { darkModeConfig } from '../../../../app.config'
 
 export default function UserPreferences(): ReactElement {
@@ -18,7 +18,7 @@ export default function UserPreferences(): ReactElement {
       content={
         <ul className={styles.preferencesDetails}>
           <Currency />
-          <Theme darkMode={darkMode} />
+          <Appearance darkMode={darkMode} />
           <Debug />
         </ul>
       }
diff --git a/src/images/copy.svg b/src/images/copy.svg
new file mode 100644
index 000000000..fbf8d205e
--- /dev/null
+++ b/src/images/copy.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7895 0H1.68421C0.757895 0 0 0.654545 0 1.45455V11.6364H1.68421V1.45455H11.7895V0ZM14.3158 2.90909H5.05263C4.12632 2.90909 3.36842 3.56364 3.36842 4.36364V14.5455C3.36842 15.3455 4.12632 16 5.05263 16H14.3158C15.2421 16 16 15.3455 16 14.5455V4.36364C16 3.56364 15.2421 2.90909 14.3158 2.90909ZM14.3158 14.5455H5.05263V4.36364H14.3158V14.5455Z" />
+</svg>
diff --git a/src/images/external.svg b/src/images/external.svg
index 4b2560d80..50918266a 100644
--- a/src/images/external.svg
+++ b/src/images/external.svg
@@ -1,3 +1,3 @@
-<svg width="15" height="16" viewBox="0 0 15 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.3158 15.229L12.8696 3.67517L12.7286 14.0733L14.6162 14.0478L14.8 0.428955L1.18121 0.612751L1.15442 2.49911L11.5538 2.35937L0 13.9132L1.3158 15.229Z" />
+<svg width="14" height="15" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.24467 14.429L12.1739 3.49969L12.0405 13.3357L13.8261 13.3116L14 0.428955L1.11736 0.602815L1.09201 2.38721L10.9293 2.25502L0 13.1843L1.24467 14.429Z" />
 </svg>
diff --git a/src/images/moon.svg b/src/images/moon.svg
new file mode 100644
index 000000000..0e5288b6f
--- /dev/null
+++ b/src/images/moon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="20" viewBox="0 0 12 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.383497 0.0683685C-0.0452013 0.11587 -0.146735 0.675883 0.244647 0.857554C3.69593 2.46093 5.92533 6.05018 5.92533 10.0003C5.92533 13.9504 3.69593 17.5396 0.244647 19.1438C-0.144999 19.3255 -0.0460696 19.8872 0.384364 19.9322C6.60309 20.6239 12 15.9346 12 10.0003C12 4.0568 6.59094 -0.625815 0.383497 0.0683685Z" />
+</svg>
diff --git a/src/images/refresh.svg b/src/images/refresh.svg
index ac77f3c38..755312fa2 100644
--- a/src/images/refresh.svg
+++ b/src/images/refresh.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
-<path d="M13.64 2.35C12.19 0.9 10.2 0 7.99 0C3.57 0 0 3.58 0 8C0 12.42 3.57 16 7.99 16C11.72 16 14.83 13.45 15.72 10H13.64C12.82 12.33 10.6 14 7.99 14C4.68 14 1.99 11.31 1.99 8C1.99 4.69 4.68 2 7.99 2C9.65 2 11.13 2.69 12.21 3.78L8.99 7H15.99V0L13.64 2.35Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6485 2.35C12.1976 0.9 10.2064 0 7.995 0C3.57223 0 0 3.58 0 8C0 12.42 3.57223 16 7.995 16C11.7273 16 14.8393 13.45 15.7298 10H13.6485C12.828 12.33 10.6066 14 7.995 14C4.68293 14 1.99124 11.31 1.99124 8C1.99124 4.69 4.68293 2 7.995 2C9.65603 2 11.137 2.69 12.2176 3.78L8.99562 7H16V0L13.6485 2.35Z" />
 </svg>
diff --git a/src/images/sun.svg b/src/images/sun.svg
new file mode 100644
index 000000000..3f521359b
--- /dev/null
+++ b/src/images/sun.svg
@@ -0,0 +1,11 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 3.66667C6.95724 3.66667 3.66667 6.95619 3.66667 11C3.66667 15.0428 6.95724 18.3333 11 18.3333C15.0428 18.3333 18.3333 15.0428 18.3333 11C18.3333 6.95619 15.0428 3.66667 11 3.66667Z" />
+<path d="M11 2.61905C10.7109 2.61905 10.4762 2.38333 10.4762 2.09524V0.52381C10.4762 0.233619 10.7109 0 11 0C11.2891 0 11.5238 0.233619 11.5238 0.52381V2.09524C11.5238 2.38333 11.2891 2.61905 11 2.61905Z" />
+<path d="M16.9253 5.0736C16.7211 4.86932 16.7211 4.53722 16.9253 4.33294L18.0379 3.22036C18.2422 3.01608 18.5743 3.01608 18.7786 3.22036C18.9829 3.42465 18.9829 3.75675 18.7786 3.96103L17.666 5.0736C17.4628 5.27684 17.1307 5.27789 16.9253 5.0736Z" />
+<path d="M21.4762 11.5238H19.9048C19.6156 11.5238 19.381 11.2881 19.381 11C19.381 10.7098 19.6156 10.4762 19.9048 10.4762H21.4762C21.7653 10.4762 22 10.7098 22 11C22 11.2881 21.7653 11.5238 21.4762 11.5238Z" />
+<path d="M18.0379 18.7775L16.9253 17.667C16.7211 17.4628 16.7211 17.1307 16.9253 16.9264C17.1296 16.7221 17.4617 16.7221 17.666 16.9264L18.7786 18.0379C18.9829 18.2422 18.9829 18.5743 18.7786 18.7786C18.5733 18.9818 18.2422 18.9818 18.0379 18.7775Z" />
+<path d="M11 22C10.7109 22 10.4762 21.7643 10.4762 21.4762V19.9048C10.4762 19.6146 10.7109 19.381 11 19.381C11.2891 19.381 11.5238 19.6146 11.5238 19.9048V21.4762C11.5238 21.7643 11.2891 22 11 22Z" />
+<path d="M3.22139 18.7775C3.0171 18.5733 3.0171 18.2412 3.22139 18.0369L4.33396 16.9253C4.53825 16.7211 4.87034 16.7211 5.07463 16.9253C5.27891 17.1296 5.27891 17.4617 5.07463 17.666L3.96205 18.7765C3.75777 18.9818 3.42672 18.9818 3.22139 18.7775Z" />
+<path d="M2.09524 11.5238H0.52381C0.234667 11.5238 0 11.2881 0 11C0 10.7098 0.234667 10.4762 0.52381 10.4762H2.09524C2.38438 10.4762 2.61905 10.7098 2.61905 11C2.61905 11.2881 2.38438 11.5238 2.09524 11.5238Z" />
+<path d="M4.33396 5.0736L3.22139 3.96103C3.0171 3.75675 3.0171 3.42465 3.22139 3.22036C3.42567 3.01608 3.75777 3.01608 3.96205 3.22036L5.07463 4.33294C5.27891 4.53722 5.27891 4.86932 5.07463 5.0736C4.87034 5.27789 4.53825 5.27789 4.33396 5.0736Z" />
+</svg>