From f6b5e134b411f5f04af64cee83f91261177cbcf9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 9 May 2019 00:58:05 +0200
Subject: [PATCH] preferences icon

---
 package.json                |  1 +
 src/App.css                 |  6 +++++-
 src/components/Titlebar.css |  2 +-
 src/images/cog.svg          |  3 +++
 src/main.js                 |  4 ++--
 src/screens/Home.css        | 17 +++++++++++++++++
 src/screens/Home.jsx        |  6 +++++-
 src/screens/Preferences.css | 29 +++++++++++++++++++++++------
 src/screens/Preferences.jsx |  4 +++-
 webpack.common.config.js    |  7 ++++++-
 10 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 src/images/cog.svg

diff --git a/package.json b/package.json
index 988a882..a11d765 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.4.4",
+    "@svgr/webpack": "^4.2.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.1",
diff --git a/src/App.css b/src/App.css
index d244c75..4bea8b0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,6 +13,7 @@ body {
     width: 100%;
     height: 100%;
     background: #fcfcfc !important;
+    overflow: hidden;
 }
 
 html.dark,
@@ -66,13 +67,16 @@ button {
 }
 
 .app {
+    margin-top: 35px;
     padding: 5% 7%;
     cursor: default;
-    height: calc(100vh - 35px);
+    height: 100vh;
     transition: .15s ease-out;
     width: 100%;
+    overflow-y: auto;
 }
 
+.app,
 .app > div {
     display: flex;
     align-items: center;
diff --git a/src/components/Titlebar.css b/src/components/Titlebar.css
index 61799cc..9c58888 100644
--- a/src/components/Titlebar.css
+++ b/src/components/Titlebar.css
@@ -1,5 +1,5 @@
 .titlebar {
-    align-self: flex-start;
+    position: fixed;
     width: 100%;
     height: 35px;
     line-height: 35px;
diff --git a/src/images/cog.svg b/src/images/cog.svg
new file mode 100644
index 0000000..43f1806
--- /dev/null
+++ b/src/images/cog.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M32,17.969 L32,13.969 L27.219,11.977 C27.086,11.602 26.946,11.24 26.774,10.883 L28.704,6.078 L25.875,3.25 L21.112,5.211 C20.75,5.036 20.378,4.888 19.995,4.75 L17.969,0 L13.969,0 L11.992,4.734 C11.594,4.875 11.211,5.023 10.831,5.203 L6.078,3.294 L3.25,6.122 L5.188,10.833 C5,11.219 4.847,11.614 4.703,12.021 L0,14.031 L0,18.031 L4.706,19.992 C4.852,20.398 5.008,20.794 5.195,21.18 L3.292,25.922 L6.12,28.75 L10.844,26.805 C11.222,26.985 11.61,27.13 12.008,27.266 L14.031,32 L18.031,32 L20.01,27.242 C20.39,27.101 20.765,26.953 21.124,26.781 L25.921,28.703 L28.749,25.875 L26.78,21.102 C26.947,20.743 27.085,20.38 27.218,20.008 L32,17.969 Z M15.969,22 C12.657,22 9.969,19.312 9.969,16 C9.969,12.688 12.657,10 15.969,10 C19.281,10 21.969,12.688 21.969,16 C21.969,19.312 19.281,22 15.969,22 Z"/>
+</svg>
diff --git a/src/main.js b/src/main.js
index 5f3033e..1684f8f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -31,9 +31,9 @@ const createWindow = async () => {
     frame: false,
     show: false,
     title: 'Ocean',
-    scrollBounce: true,
     webPreferences: {
-      nodeIntegration: true
+      nodeIntegration: true,
+      scrollBounce: true
     }
   })
 
diff --git a/src/screens/Home.css b/src/screens/Home.css
index fbdc43c..52001e1 100644
--- a/src/screens/Home.css
+++ b/src/screens/Home.css
@@ -17,6 +17,23 @@
     border-color: #303030;
 }
 
+.preferences-link {
+    position: absolute;
+    right: 5%;
+    top: 1.5rem;
+}
+
+.preferences-link svg {
+    fill: #8b98a9;
+    transition: fill .2s ease-out;
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.preferences-link:hover svg {
+    fill: #f6388a;
+}
+
 .number-unit-wrap {
     display: flex;
     width: 100%;
diff --git a/src/screens/Home.jsx b/src/screens/Home.jsx
index e6eef5d..b020b3c 100644
--- a/src/screens/Home.jsx
+++ b/src/screens/Home.jsx
@@ -5,6 +5,7 @@ import Total from '../components/Total'
 import Account from '../components/Account'
 import Ticker from '../components/Ticker'
 import Spinner from '../components/Spinner'
+import IconCog from '../images/cog.svg'
 import './Home.css'
 
 export default class Home extends PureComponent {
@@ -15,8 +16,11 @@ export default class Home extends PureComponent {
 
     return (
       <>
-        <Link to="preferences">Preferences</Link>
         <main className="main">
+          <Link className="preferences-link" to="preferences">
+            <IconCog />
+          </Link>
+
           {needsConfig ? (
             'Needs config'
           ) : isLoading ? (
diff --git a/src/screens/Preferences.css b/src/screens/Preferences.css
index 6852a52..6ca0abe 100644
--- a/src/screens/Preferences.css
+++ b/src/screens/Preferences.css
@@ -1,11 +1,30 @@
 .preferences {
     text-align: left;
     width: 100%;
+    margin: 5%;
+    position: relative;
 }
 
 .preferences__title {
-    font-size: 3rem;
-    margin-top: 0;
+    font-size: 2rem;
+    margin-top: -1rem;
+    margin-bottom: 3rem;
+}
+
+.preferences__close {
+    text-decoration: none;
+    font-family: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        Helvetica, Arial, sans-serif;
+    font-weight: 600;
+    font-size: 2.5rem;
+    position: absolute;
+    top: -1.5rem;
+    right: 0;
+    color: #8b98a9;
+}
+
+.preferences__close:hover {
+    color: #f6388a;
 }
 
 .preference__list {
@@ -25,7 +44,6 @@
     border-bottom: 1px solid #e2e2e2;
     padding-top: .3rem;
     padding-bottom: .25rem;
-    font-family: monospace;
 }
 
 .dark .preference__list li {
@@ -45,7 +63,7 @@
 
 button.delete {
     font-size: 2rem;
-    color: #8b98a9;
+    color: #41474e;
     transition: color .5s ease-out;
 }
 
@@ -59,7 +77,7 @@ button.delete:hover {
 }
 
 .preference__title {
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: #8b98a9;
 }
 
@@ -81,7 +99,6 @@ button.delete:hover {
     color: #303030;
     margin-top: .75rem;
     margin-bottom: .75rem;
-    font-family: monospace;
 }
 
 .dark .preference__input {
diff --git a/src/screens/Preferences.jsx b/src/screens/Preferences.jsx
index 0ed896b..2534d75 100644
--- a/src/screens/Preferences.jsx
+++ b/src/screens/Preferences.jsx
@@ -57,7 +57,9 @@ export default class Preferences extends PureComponent {
     return (
       <div className="preferences">
         <h1 className="preferences__title">Preferences</h1>{' '}
-        <Link to="/">Close</Link>
+        <Link className="preferences__close" title="Close Preferences" to="/">
+          &times;
+        </Link>
         <div className="preference">
           <h2 className="preference__title">Accounts</h2>
           <ul className="preference__list">
diff --git a/webpack.common.config.js b/webpack.common.config.js
index ffe177e..5216959 100644
--- a/webpack.common.config.js
+++ b/webpack.common.config.js
@@ -28,7 +28,12 @@ module.exports = {
         include: defaultInclude
       },
       {
-        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+        include: defaultInclude
+      },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/,
         use: ['file-loader?name=font/[name]__[hash:base64:5].[ext]'],
         include: defaultInclude
       }