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 (
+
+
+
+ {buttons.map((button) => {
+ const isDark = button === 'Dark'
+ const selected =
+ (isDark && darkMode.value) || (!isDark && !darkMode.value)
+
+ return (
+
+ )
+ })}
+
+ Defaults to your OS setting, select to override.
+
+ )
+}
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 (
-
- darkMode.toggle()}
- size="small"
- />
-
- )
-}
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={
}
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 @@
+
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 @@
-