preferences icon

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",

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;

src/components/Titlebar.css

@@ -1,5 +1,5 @@
 .titlebar {
-    align-self: flex-start;
+    position: fixed;
     width: 100%;
     height: 35px;
     line-height: 35px;

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>

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
     }
   })
 

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%;

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 ? (

src/screens/Preferences.css

@@ -1,11 +1,30 @@
 .preferences {
     text-align: left;
     width: 100%;
+    margin: 5%;
+    position: relative;
 }
 
 .preferences__title {
-    font-size: 3rem;
+    font-size: 2rem;
-    margin-top: 0;
+    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 {

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">

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
       }