From c2c3f6becf7b2946a13f70fc791c3a0548781456 Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Fri, 15 May 2020 02:53:05 +0200
Subject: [PATCH] feat: open Preferences in a new tab (#879)

Co-authored-by: Jessica Schilling <jessica@protocol.ai>
---
 add-on/manifest.common.json                   |   2 +
 add-on/src/landing-pages/welcome/page.js      |  16 +--
 add-on/src/landing-pages/welcome/welcome.css  |   4 +
 add-on/src/options/forms/api-form.js          |   6 +-
 add-on/src/options/forms/dnslink-form.js      |   8 +-
 add-on/src/options/forms/experiments-form.js  |  15 ++-
 add-on/src/options/forms/file-import-form.js  |   7 +-
 add-on/src/options/forms/gateways-form.js     |  12 +-
 .../src/options/forms/global-toggle-form.js   |   2 +-
 add-on/src/options/forms/ipfs-node-form.js    |   6 +-
 add-on/src/options/options.css                | 116 +++++-----------
 add-on/src/options/options.html               |  18 ++-
 add-on/src/options/options.js                 |   5 -
 add-on/src/popup/quick-import.js              |   2 +-
 package.json                                  |   4 +-
 yarn.lock                                     | 126 ++++++++++--------
 16 files changed, 165 insertions(+), 184 deletions(-)

diff --git a/add-on/manifest.common.json b/add-on/manifest.common.json
index 4bc833a15..556bd976b 100644
--- a/add-on/manifest.common.json
+++ b/add-on/manifest.common.json
@@ -24,6 +24,8 @@
     "default_popup": "dist/popup/browser-action/index.html"
   },
   "options_ui": {
+    "open_in_tab": true,
+    "browser_style": false,
     "page": "dist/options/options.html"
   },
   "web_accessible_resources": [
diff --git a/add-on/src/landing-pages/welcome/page.js b/add-on/src/landing-pages/welcome/page.js
index 811841064..b846fc50c 100644
--- a/add-on/src/landing-pages/welcome/page.js
+++ b/add-on/src/landing-pages/welcome/page.js
@@ -57,7 +57,7 @@ const renderCompanionLogo = (i18n, isIpfsOnline) => {
 }
 
 const renderWelcome = (i18n, peerCount, onOpenWebUi) => {
-  const anchorClass = 'white link underline-under hover-aqua'
+  const anchorClass = 'aqua hover-white'
   const copyClass = 'mv0 tc lh-copy f5'
   const svgWidth = 80
 
@@ -94,7 +94,7 @@ const renderWelcome = (i18n, peerCount, onOpenWebUi) => {
 
 const renderInstallSteps = (i18n, isIpfsOnline) => {
   const copyClass = 'mv0 white f5 lh-copy'
-  const anchorClass = 'white link underline-under hover-aqua'
+  const anchorClass = 'aqua hover-white'
   const stateUnknown = isIpfsOnline === null
 
   return html`
@@ -117,9 +117,9 @@ const renderInstallSteps = (i18n, isIpfsOnline) => {
    ======================================================== */
 
 const renderResources = (i18n) => {
-  const labelClass = 'aqua mb1'
+  const labelClass = 'ttu tracked f6 fw4 teal mt0 mb3'
   const copyClass = 'mt0 mb4 lh-copy'
-  const anchorClass = 'navy link underline-under hover-aqua'
+  const anchorClass = 'link underline-under hover-aqua'
 
   return html`
     <div class="w-80 mv4 navy f5">
@@ -158,7 +158,7 @@ const renderVideos = (i18n) => {
   return html`
     <div class="w-80 flex flex-column flex-row-ns justify-between-ns aqua f5">
       <div class="flex flex-column mr1">
-        <p>${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}</p>
+        <p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}</p>
         <a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=8CMxDNuuAiQ" target="_blank">
           <img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/zb2rhoo8LXEwek8HLLYsXhra9YuYxRDEun3rHRc18mLvK3A5w" alt="${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}" />
           ${overlayDiv()}
@@ -167,7 +167,7 @@ const renderVideos = (i18n) => {
       </div>
 
       <div class="flex flex-column">
-        <p>${i18n.getMessage('page_landingWelcome_videos_permanent_web')}</p>
+        <p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_videos_permanent_web')}</p>
         <a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=HUVmypx9HGI" target="_blank">
           <img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/zb2rhbCqh6W5Veot1sgZC5v7oLMnrkxq8ikd7auyy9UKSLBBa" alt="${i18n.getMessage('page_landingWelcome_videos_permanent_web')}" />
           ${overlayDiv()}
@@ -179,12 +179,12 @@ const renderVideos = (i18n) => {
 }
 
 const renderProjects = (i18n) => {
-  const anchorClass = 'flex flex-column items-center navy link hover-aqua'
+  const anchorClass = 'flex flex-column items-center navy link underline-under hover-aqua'
   const logoWidth = 80
 
   return html`
     <div class="w-80 mv4 navy f6">
-      <p class="mb4 aqua f5">${i18n.getMessage('page_landingWelcome_projects_title')}</p>
+      <p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_projects_title')}</p>
 
       <div class="flex justify-between-ns">
         <a class="${anchorClass}" href="https://multiformats.io/" target="_blank">
diff --git a/add-on/src/landing-pages/welcome/welcome.css b/add-on/src/landing-pages/welcome/welcome.css
index 867fc74aa..1effbc51e 100644
--- a/add-on/src/landing-pages/welcome/welcome.css
+++ b/add-on/src/landing-pages/welcome/welcome.css
@@ -12,6 +12,10 @@
   text-underline-position: under;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
 .state-unknown {
   opacity: 0;
   filter: blur( .15em );
diff --git a/add-on/src/options/forms/api-form.js b/add-on/src/options/forms/api-form.js
index 68c008e90..54fa1febf 100644
--- a/add-on/src/options/forms/api-form.js
+++ b/add-on/src/options/forms/api-form.js
@@ -13,8 +13,8 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_api')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_api')}</h2>
         <div>
           <label for="ipfsApiUrl">
             <dl>
@@ -23,6 +23,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="ipfsApiUrl"
             type="url"
             inputmode="url"
@@ -41,6 +42,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="ipfsApiPollMs"
             type="number"
             inputmode="numeric"
diff --git a/add-on/src/options/forms/dnslink-form.js b/add-on/src/options/forms/dnslink-form.js
index 47724d2cf..fdb060f58 100644
--- a/add-on/src/options/forms/dnslink-form.js
+++ b/add-on/src/options/forms/dnslink-form.js
@@ -17,15 +17,15 @@ function dnslinkForm ({
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_dnslink')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_dnslink')}</h2>
         <div>
           <label for="dnslinkPolicy">
             <dl>
               <dt>${browser.i18n.getMessage('option_dnslinkPolicy_title')}</dt>
               <dd>
                 ${browser.i18n.getMessage('option_dnslinkPolicy_description')}
-                <p><a href="https://docs-beta.ipfs.io/how-to/dnslink-companion/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/dnslink-companion/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
@@ -65,7 +65,7 @@ function dnslinkForm ({
               <dd>
                 ${browser.i18n.getMessage('option_dnslinkRedirect_description')}
                 ${dnslinkRedirect ? html`<p class="red i">${browser.i18n.getMessage('option_dnslinkRedirect_warning')}</p>` : null}
-                <p><a href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
diff --git a/add-on/src/options/forms/experiments-form.js b/add-on/src/options/forms/experiments-form.js
index 2baaac0fd..2fb8e03f6 100644
--- a/add-on/src/options/forms/experiments-form.js
+++ b/add-on/src/options/forms/experiments-form.js
@@ -25,9 +25,9 @@ function experimentsForm ({
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_experiments')}</legend>
-        <div>${browser.i18n.getMessage('option_experiments_warning')}</div>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_experiments')}</h2>
+        <div class="mb2">${browser.i18n.getMessage('option_experiments_warning')}</div>
         <div>
           <label for="displayNotifications">
             <dl>
@@ -69,7 +69,7 @@ function experimentsForm ({
             <dl>
               <dt>${browser.i18n.getMessage('option_detectIpfsPathHeader_title')}</dt>
               <dd>${browser.i18n.getMessage('option_detectIpfsPathHeader_description')}
-                <p><a href="https://docs-beta.ipfs.io/how-to/companion-x-ipfs-path-header/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/companion-x-ipfs-path-header/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
@@ -86,12 +86,12 @@ function experimentsForm ({
                 <!-- TODO: https://github.com/ipfs-shipyard/ipfs-companion/pull/777
                 ${browser.i18n.getMessage('option_ipfsProxy_description')}
                 <p>${ipfsProxy ? html`
-                    <a href="${browser.extension.getURL('dist/pages/proxy-acl/index.html')}" target="_blank">
+                    <a class="link underline hover-aqua" href="${browser.extension.getURL('dist/pages/proxy-acl/index.html')}" target="_blank">
                       ${browser.i18n.getMessage('option_ipfsProxy_link_manage_permissions')}
                     </a>` : html`<del>${browser.i18n.getMessage('option_ipfsProxy_link_manage_permissions')}</del>`}
                 </p>
                 -->
-                <p><a href="https://docs-beta.ipfs.io/how-to/companion-window-ipfs/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/companion-window-ipfs/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
@@ -107,6 +107,7 @@ function experimentsForm ({
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="logNamespaces"
             type="text"
             required
@@ -120,7 +121,7 @@ function experimentsForm ({
               <dd>${browser.i18n.getMessage('option_resetAllOptions_description')}</dd>
             </dl>
           </label>
-          <div><button id="resetAllOptions" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
+          <div><button id="resetAllOptions" class="Button transition-all sans-serif v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline white bg-red white" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
         </div>
       </fieldset>
     </form>
diff --git a/add-on/src/options/forms/file-import-form.js b/add-on/src/options/forms/file-import-form.js
index 65c9c736e..c7a92f0cc 100644
--- a/add-on/src/options/forms/file-import-form.js
+++ b/add-on/src/options/forms/file-import-form.js
@@ -11,21 +11,22 @@ function fileImportForm ({ importDir, openViaWebUI, preloadAtPublicGateway, onOp
   const onPreloadAtPublicGatewayChange = onOptionChange('preloadAtPublicGateway')
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_fileImport')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_fileImport')}</h2>
         <div>
           <label for="importDir">
             <dl>
               <dt>${browser.i18n.getMessage('option_importDir_title')}</dt>
               <dd>
                 ${browser.i18n.getMessage('option_importDir_description')}
-                <p><a href="https://docs-beta.ipfs.io/concepts/file-systems/#mutable-file-system-mfs" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/concepts/file-systems/#mutable-file-system-mfs" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="importDir"
             type="text"
             pattern="^\/(.*)"
diff --git a/add-on/src/options/forms/gateways-form.js b/add-on/src/options/forms/gateways-form.js
index 0ef1c1dfa..feddfc61a 100644
--- a/add-on/src/options/forms/gateways-form.js
+++ b/add-on/src/options/forms/gateways-form.js
@@ -33,8 +33,8 @@ function gatewaysForm ({
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_gateways')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_gateways')}</h2>
           <div>
             <label for="publicGatewayUrl">
               <dl>
@@ -43,6 +43,7 @@ function gatewaysForm ({
               </dl>
             </label>
             <input
+              class="bg-white navy"
               id="publicGatewayUrl"
               type="url"
               inputmode="url"
@@ -59,13 +60,14 @@ function gatewaysForm ({
                 <dt>${browser.i18n.getMessage('option_publicSubdomainGatewayUrl_title')}</dt>
                 <dd>
                   ${browser.i18n.getMessage('option_publicSubdomainGatewayUrl_description')}
-                  <p><a href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
+                  <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
                     ${browser.i18n.getMessage('option_legend_readMore')}
                   </a></p>
                 </dd>
               </dl>
             </label>
             <input
+              class="bg-white navy"
               id="publicSubdomainGatewayUrl"
               type="url"
               inputmode="url"
@@ -87,6 +89,7 @@ function gatewaysForm ({
                 </dl>
               </label>
               <input
+                class="bg-white navy"
                 id="customGatewayUrl"
                 type="url"
                 inputmode="url"
@@ -118,7 +121,7 @@ function gatewaysForm ({
                   <dt>${browser.i18n.getMessage('option_useSubdomains_title')}</dt>
                   <dd>
                     ${browser.i18n.getMessage('option_useSubdomains_description')}
-                    <p><a href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
+                    <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
                       ${browser.i18n.getMessage('option_legend_readMore')}
                     </a></p>
                   </dd>
@@ -136,6 +139,7 @@ function gatewaysForm ({
                 </dl>
               </label>
               <textarea
+                class="bg-white navy"
                 id="noIntegrationsHostnames"
                 spellcheck="false"
                 onchange=${onNoIntegrationsHostnamesChange}
diff --git a/add-on/src/options/forms/global-toggle-form.js b/add-on/src/options/forms/global-toggle-form.js
index 68c7bffde..45c58b32a 100644
--- a/add-on/src/options/forms/global-toggle-form.js
+++ b/add-on/src/options/forms/global-toggle-form.js
@@ -8,7 +8,7 @@ const switchToggle = require('../../pages/components/switch-toggle')
 function globalToggleForm ({ active, onOptionChange }) {
   const toggle = onOptionChange('active')
   return html`
-    <form class="dib mb3">
+    <form class="db mb3 bg-aqua-muted charcoal">
       <label for="active" class="dib pa3 flex items-center pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
         ${switchToggle({ id: 'active', checked: active, onchange: toggle, style: 'mr3' })}
         ${browser.i18n.getMessage('panel_headerActiveToggleTitle')}
diff --git a/add-on/src/options/forms/ipfs-node-form.js b/add-on/src/options/forms/ipfs-node-form.js
index 15cf6b658..b29a82823 100644
--- a/add-on/src/options/forms/ipfs-node-form.js
+++ b/add-on/src/options/forms/ipfs-node-form.js
@@ -11,8 +11,8 @@ function ipfsNodeForm ({ ipfsNodeType, ipfsNodeConfig, onOptionChange }) {
   const withChromeSockets = hasChromeSocketsForTcp()
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_nodeType')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_nodeType')}</h2>
         <div>
           <label for="ipfsNodeType">
             <dl>
@@ -20,7 +20,7 @@ function ipfsNodeForm ({ ipfsNodeType, ipfsNodeConfig, onOptionChange }) {
               <dd>
                 <p>${browser.i18n.getMessage('option_ipfsNodeType_external_description')}</p>
                 <p>${browser.i18n.getMessage(withChromeSockets ? 'option_ipfsNodeType_embedded_chromesockets_description' : 'option_ipfsNodeType_embedded_description')}</p>
-                <p><a href="https://docs-beta.ipfs.io/how-to/companion-node-types/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/companion-node-types/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
diff --git a/add-on/src/options/options.css b/add-on/src/options/options.css
index affef00d3..7b6e189cc 100644
--- a/add-on/src/options/options.css
+++ b/add-on/src/options/options.css
@@ -2,44 +2,31 @@
 @import url('/ui-kit/ipfs.css');
 @import url('../pages/components/switch-toggle.css');
 
-html {
-  overflow: hidden;
-}
-.is-chrome body {
-  margin: 0;
-  min-width: 650px;
-  height: 450px;
-  padding: 15px;
-  overflow-y: auto;
-}
-form * {
-  font: caption;
-  font-size: 1em;
+header {
+  border-color: #69c4cd;
+  text-transform: uppercase;
 }
-strong {
-  font-weight: bold;
+.ipfs-logo {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 553 235.3'%3E%3Cdefs%3E%3C/defs%3E%3Cpath fill='%23ffffff' d='M239 63h17.8v105H239V63zm35.6 0h36.3c7.9 0 14.5.9 19.6 2.6s9.2 4.1 12.1 7.1a24.45 24.45 0 0 1 6.2 10.2 40.75 40.75 0 0 1 1.8 12.1 45.69 45.69 0 0 1-1.8 12.9 26.58 26.58 0 0 1-6.2 10.8 30.59 30.59 0 0 1-12.1 7.3c-5.1 1.8-11.5 2.7-19.3 2.7h-19.1V168h-17.5V63zm36.2 51a38.37 38.37 0 0 0 11.1-1.3 16.3 16.3 0 0 0 6.8-3.7 13.34 13.34 0 0 0 3.5-5.8 29.75 29.75 0 0 0 1-7.6 25.68 25.68 0 0 0-1-7.7 12 12 0 0 0-3.6-5.5 17.15 17.15 0 0 0-6.9-3.4 41.58 41.58 0 0 0-10.9-1.2h-18.5V114h18.5zm119.9-51v15.3h-49.2V108h46.3v15.4h-46.3V168h-17.8V63h67zm26.2 72.9c.8 6.9 3.3 11.9 7.4 15s10.4 4.7 18.6 4.7a32.61 32.61 0 0 0 10.1-1.3 20.52 20.52 0 0 0 6.6-3.5 12 12 0 0 0 3.5-5.2 19.08 19.08 0 0 0 1-6.4 16.14 16.14 0 0 0-.7-4.9 12.87 12.87 0 0 0-2.6-4.5 16.59 16.59 0 0 0-5.1-3.6 35 35 0 0 0-8.2-2.4l-13.4-2.5a89.76 89.76 0 0 1-14.1-3.7 33.51 33.51 0 0 1-10.4-5.8 22.28 22.28 0 0 1-6.3-8.8 34.1 34.1 0 0 1-2.1-12.7 26 26 0 0 1 11.3-22.4 36.35 36.35 0 0 1 12.6-5.6 65.89 65.89 0 0 1 15.8-1.8c7.2 0 13.3.8 18.2 2.5a34.46 34.46 0 0 1 11.9 6.5 28.21 28.21 0 0 1 6.9 9.3 42.1 42.1 0 0 1 3.2 11l-16.8 2.6c-1.4-5.9-3.7-10.2-7.1-13.1s-8.7-4.3-16.1-4.3a43.9 43.9 0 0 0-10.5 1.1 19.47 19.47 0 0 0-6.8 3.1 11.63 11.63 0 0 0-3.7 4.6 14.08 14.08 0 0 0-1.1 5.4c0 4.6 1.2 8 3.7 10.3s6.9 4 13.2 5.3l14.5 2.8c11.1 2.1 19.2 5.6 24.4 10.5s7.8 12.1 7.8 21.4a31.37 31.37 0 0 1-2.4 12.3 25.27 25.27 0 0 1-7.4 9.8 36.58 36.58 0 0 1-12.4 6.6 56 56 0 0 1-17.3 2.4c-13.4 0-24-2.8-31.6-8.5s-11.9-14.4-12.6-26.2h18z'/%3E%3Cpath fill='%23469ea2' d='M30.3 164l84 48.5 84-48.5V67l-84-48.5-84 48.5v97z'/%3E%3Cpath fill='%236acad1' d='M105.7 30.1l-61 35.2a18.19 18.19 0 0 1 0 3.3l60.9 35.2a14.55 14.55 0 0 1 17.3 0l60.9-35.2a18.19 18.19 0 0 1 0-3.3L123 30.1a14.55 14.55 0 0 1-17.3 0zm84 48.2l-61 35.6a14.73 14.73 0 0 1-8.6 15l.1 70a15.57 15.57 0 0 1 2.8 1.6l60.9-35.2a14.73 14.73 0 0 1 8.6-15V79.9a20 20 0 0 1-2.8-1.6zm-150.8.4a15.57 15.57 0 0 1-2.8 1.6v70.4a14.38 14.38 0 0 1 8.6 15l60.9 35.2a15.57 15.57 0 0 1 2.8-1.6v-70.4a14.38 14.38 0 0 1-8.6-15L38.9 78.7z'/%3E%3Cpath fill='%23469ea2' d='M114.3 29l75.1 43.4v86.7l-75.1 43.4-75.1-43.4V72.3L114.3 29m0-10.3l-84 48.5v97l84 48.5 84-48.5v-97l-84-48.5z'/%3E%3Cpath fill='%23469ea2' d='M114.9 132h-1.2A15.66 15.66 0 0 1 98 116.3v-1.2a15.66 15.66 0 0 1 15.7-15.7h1.2a15.66 15.66 0 0 1 15.7 15.7v1.2a15.66 15.66 0 0 1-15.7 15.7zm0 64.5h-1.2a15.65 15.65 0 0 0-13.7 8l14.3 8.2 14.3-8.2a15.65 15.65 0 0 0-13.7-8zm83.5-48.5h-.6a15.66 15.66 0 0 0-15.7 15.7v1.2a15.13 15.13 0 0 0 2 7.6l14.3-8.3V148zm-14.3-89a15.4 15.4 0 0 0-2 7.6v1.2a15.66 15.66 0 0 0 15.7 15.7h.6V67.2L184.1 59zm-69.8-40.3L100 26.9a15.73 15.73 0 0 0 13.7 8.1h1.2a15.65 15.65 0 0 0 13.7-8l-14.3-8.3zM44.6 58.9l-14.3 8.3v16.3h.6a15.66 15.66 0 0 0 15.7-15.7v-1.2a16.63 16.63 0 0 0-2-7.7zM30.9 148h-.6v16.2l14.3 8.3a15.4 15.4 0 0 0 2-7.6v-1.2A15.66 15.66 0 0 0 30.9 148z'/%3E%3Cpath fill='%23083b54' fill-opacity='0.15' d='M114.3 213.2v-97.1l-84-48.5v97.1z'/%3E%3Cpath fill='%23083b54' fill-opacity='0.05' d='M198.4 163.8v-97l-84 48.5v97.1z'/%3E%3C/svg%3E%0A");
+	background-repeat: no-repeat;
+	background-size: contain
 }
-em {
-  font-style: italic;
+#page-header-logo {
+	height: 3.2em;
+	margin-right: 2em;
+  margin-top: 0.25em;
+	width: 7.15em
 }
-code {
-  font-family: monospace;
+form * {
+  font-family: Inter,system-ui,sans-serif;
+  font-size: 0.875rem;
 }
 fieldset {
   border: none;
-  border-top: 3px solid #6BC4CE;
   display: flex;
   flex-direction: column;
-  margin-bottom: .5em;
-}
-legend {
-  letter-spacing: .15em;
-  text-transform: uppercase;
-  padding: .5em;
-  font-weight: bold;
 }
 fieldset > div {
-  padding: 1em;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -58,79 +45,46 @@ button:hover,
 label:hover {
   cursor: pointer;
 }
-label > dl > dd {
-  color: #888;
-  margin-top: .2em;
-  margin-left: 0;
-  margin-right: .2em;
+label > dl {
+  margin-right: 2em;
 }
-fieldset > div:hover {
-  background-color: rgba(62, 148, 152, 0.05);
+label > dl > dt {
+  font-weight: 600;
 }
-fieldset > div:hover > label > dl > dd {
-  color: #333;
-}
-label a {
-  color: #3B6177;
-}
-label a:hover {
-  color: #073A53;
+label > dl > dd {
+  margin: .5em 0 .5em 0;
 }
 label a[href^="http"]:after {
   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiBQIJABWXvYi2AAAAfklEQVQY05XPuw3CQBBF0YPZjHLINmDbAEEFliiACiBHcgWsXIcTSwSUQ4hEgD9LQMBEV/P0rmb4MYsZ993MOYURz93KceADqjE4pbtLoQpsJ8WmCCpotZZqUT+1wmj9rBtc5wa1h17jJaennKYgWmvchjMKFVH8ejDAzh/zBh37F0UDekL1AAAAAElFTkSuQmCC);
   padding-left: 0.25em;
 }
-input, textarea, select {
+input, textarea {
   flex: 1;
-  padding: .5em;
+  padding: .75em;
   font-family: monospace;
 }
+input, textarea, select {
+  flex: 1;
+}
 fieldset > div > div,
 #resetAllOptions {
   flex: 1;
-  text-align: center;
 }
 input[type=text],
 input[type=url],
 input[type=number],
-textarea,
-select {
+textarea
+ {
   -webkit-transition: all 0.30s ease-in-out;
   -moz-transition: all 0.30s ease-in-out;
-  box-shadow: 0 1px 4px rgba(0,0,0,.04);
-  border-radius: 3px;
-  border: 1px solid #9ad4db;
-  background-color: white;
-}
-input[type=text]:focus,
-input[type=url]:focus,
-input[type=number]:focus,
-textarea:focus,
-select:focus {
-  outline: none;
-  border: 1px solid #3E9398;
-  box-shadow: 0 0 5px #5FCBCF;
+  border-radius: 0.25rem;
+  border: 1px solid #b7bbc8;
 }
 
-button#resetAllOptions:hover,
 input:invalid {
-  border: 1px solid red;
-  background-color: #FFF0F0;
-  box-shadow: 0 0 5px red;
-  color: red;
-  transition: box-shadow 0.3s;
-}
-button#resetAllOptions {
-  box-shadow: 0 1px 4px rgba(0,0,0,.04);
-  border-radius: 3px;
-  border: 1px solid #f36149;
-  background-color: #f7f8fa;
-  color: #f36149;
-  padding: .5em;
-}
-button#resetAllOptions:active {
-  border: 1px solid #3E9398 !important;
-  box-shadow: 0 0 5px #5FCBCF !important;
-  color: #3E9398;
-  background-color: white;
+  border: 1px solid #ea5037;
+  background-color: #f36149;
+}
+.mdc-switch {
+  display: block;
 }
diff --git a/add-on/src/options/options.html b/add-on/src/options/options.html
index ffbbab76c..f49fb4cc0 100644
--- a/add-on/src/options/options.html
+++ b/add-on/src/options/options.html
@@ -1,14 +1,24 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Options</title>
+    <title>IPFS Companion Preferences</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="options.css">
   </head>
   <body>
-    <div id="root"></div>
-    <script src="/dist/bundles/uiCommons.bundle.js"></script>
-    <script src="/dist/bundles/optionsPage.bundle.js"></script>
+    <header class="bg-navy bb bw3 flex justify-between items-center ma0 pa3">
+      <div id="page-header-logo" class="ipfs-logo">&nbsp;</div>
+      <h1 class="montserrat fw2 aqua ma0 pa0">
+        Companion Preferences
+      </h1>
+    </header>
+    <main class="bg-white pv3 pa3 pa4-l">
+        <div data-id="SettingsPage" class="mw9 center">
+        <div id="root"></div>
+        <script src="/dist/bundles/uiCommons.bundle.js"></script>
+        <script src="/dist/bundles/optionsPage.bundle.js"></script>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/add-on/src/options/options.js b/add-on/src/options/options.js
index db7ba8d97..a717082e6 100644
--- a/add-on/src/options/options.js
+++ b/add-on/src/options/options.js
@@ -15,8 +15,3 @@ app.route('*', optionsPage)
 
 // Start the application and render it to the given querySelector
 app.mount('#root')
-
-// Fix for Chrome in OSX https://github.com/ipfs-shipyard/ipfs-companion/pull/429
-if (window.navigator.vendor === 'Google Inc.') {
-  document.querySelector('html').className = 'is-chrome'
-}
diff --git a/add-on/src/popup/quick-import.js b/add-on/src/popup/quick-import.js
index b56134db0..42f452130 100644
--- a/add-on/src/popup/quick-import.js
+++ b/add-on/src/popup/quick-import.js
@@ -195,7 +195,7 @@ function quickImportPage (state, emit) {
           <input class="db pointer w-100 h-100 top-0 o-0" type="file" id="quickImportInput" multiple onchange=${onFileInputChange} />
           <div class='dt dim' style='padding-left: 100px; height: 300px'>
             <div class='dtc v-mid'>
-              <span class="f3 link dim br1 ph4 pv3 dib white" style="background: #6ACAD1">
+              <span class="f3 dim br1 ph4 pv3 dib navy" style="background: #6ACAD1">
                 ${browser.i18n.getMessage('quickImport_pick_file_button')}
               </span>
               <span class='f3'>
diff --git a/package.json b/package.json
index 18ca6ca98..bd8db6144 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "webpack-merge": "4.2.2"
   },
   "dependencies": {
-    "@material/switch": "4.0.0",
+    "@material/switch": "6.0.0",
     "browser-process-hrtime": "1.0.0",
     "choo": "7.0.0",
     "chrome-dgram": "3.0.4",
@@ -134,7 +134,7 @@
     "http-dns": "3.0.1",
     "http-node": "1.2.0",
     "ipfs": "0.40.0",
-    "ipfs-css": "0.13.1",
+    "ipfs-css": "1.1.0",
     "ipfs-http-client": "40.0.1",
     "ipfs-http-response": "0.4.0",
     "ipfs-postmsg-proxy": "3.1.1",
diff --git a/yarn.lock b/yarn.lock
index fd83ef4fa..851bb51e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1180,79 +1180,87 @@
     "@hapi/bourne" "1.x.x"
     "@hapi/hoek" "8.x.x"
 
-"@material/animation@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-4.0.0.tgz#19eaf377809f20978f8452a4237d27867d3ffd1d"
-  integrity sha512-IfzXzstWdtKQcsNWu+s2Hpz5dBwkTHtgtzoesr+FC7TqENH+SJdsF1ntnZI1XVi2C9ZlBf7f4BSmXpWHD0MIlw==
+"@material/animation@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-6.0.0.tgz#ec8c8bd48e069bb35bb6aa76d944f89d35cc74fa"
+  integrity sha512-BxlzXzQ5W2WtaEVV4/PqkTpKB5PfOUvPmr1EK8+xQ0ouMV4qiWuwBfnu7DgXF+cglpFP3T71uHVYmh6lMdi4vg==
   dependencies:
     tslib "^1.9.3"
 
-"@material/base@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/base/-/base-4.0.0.tgz#535574d0b63c18892cfb70e88b27bc8f8090677a"
-  integrity sha512-vHm7fkqXzjdfxifXvlmaZColoIfKuWmO+1rvdzDORTWP+A8Dq70cgKd2I1SBqxzDGjOasMzHbQI6f9MISQf2vQ==
+"@material/base@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-6.0.0.tgz#e1208f9e83a4e8d8c4e17745d9c909aa4aada625"
+  integrity sha512-S3rT7B9xa9IfHXIvYXYqbo6YVu9FWbFqTt1tMUCniizTRlpmHu9b5pmQ20f6mm3K3wAFD+crqsrtie2Y8h8r5g==
   dependencies:
     tslib "^1.9.3"
 
-"@material/dom@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-4.0.0.tgz#f0e68c4429e555040304c958bb3e11614276fdfa"
-  integrity sha512-GRCJT9+PGWqygZwGf1XLTrbmzP35YWG7+T0hpfhoIJO8VDiMTeyfvhJXFuA2wh9pD0noEjte0lmbdBlykrbWZw==
+"@material/density@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/density/-/density-6.0.0.tgz#9731d9b981f9b5fd92780812c8382f144ba2494d"
+  integrity sha512-svKiq7XtUg89hf08XGFF46NdiQAZfey5CiatmNxD3WX7LUoCb5zc8K9BqPL63P1Sh6kty9R0AHj+6w4ASFetPA==
+
+"@material/dom@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-6.0.0.tgz#4f59993b65bc1921f680d5b5eb1c1ff084823dda"
+  integrity sha512-9hvoi3MxR25dmyv15xJGRS+Ezlr0oD+Y6k4UyAbLpExFP2OakTZc8Xj0Fd7Nwav3I5aIXyC5jJ2gvhZcy1cI9A==
   dependencies:
+    "@material/feature-targeting" "^6.0.0"
     tslib "^1.9.3"
 
-"@material/elevation@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-4.0.0.tgz#58ba81c8c9efd0b5d3bfed7fa915d4930d814b97"
-  integrity sha512-wKffoZcqkwAMWYbfGJJ95RDeOFz/IMvF7ye4VamjUwLb1iPiKxUZKUcd40XpuEvsn794HSIEWfGDsRq7BxJAMQ==
+"@material/elevation@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-6.0.0.tgz#9ebf7c442261e1c59e1e6af0424a0b06515e07df"
+  integrity sha512-9WNBu/MKTQX40Ev3ayq5V8Pf/E/DqUPRQO8F0YA99jRWuYScpX2zeJlpRe+wLI6zIxtfFcVvRW9D4O1s1Bmbdg==
   dependencies:
-    "@material/animation" "^4.0.0"
-    "@material/feature-targeting" "^4.0.0"
-    "@material/theme" "^4.0.0"
+    "@material/animation" "^6.0.0"
+    "@material/base" "^6.0.0"
+    "@material/feature-targeting" "^6.0.0"
+    "@material/theme" "^6.0.0"
 
-"@material/feature-targeting@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-4.0.0.tgz#8d9d1470801a1fd166773731613d9fa89e0fd85e"
-  integrity sha512-0gk+f151vqmEdWkrQ9ocPlQRU9aUtSGsVBhletqIbsthLUsZIz9qk25FHjV1wHd/bGHknd9NH+T8ENprv3KLFg==
+"@material/feature-targeting@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-6.0.0.tgz#8dcfc470f3c5b8c7e1bc04bb86b062a640ff03a0"
+  integrity sha512-REj9VJnqkGwpngffc/iHGPt8WTF27QFPWDD8VBNXaP+MmnpIu7V5q5JMoozKzG5uk+hVryzam1i2PJHztizDXg==
 
-"@material/ripple@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-4.0.0.tgz#906ba421a3e6c68651d829d44c50a95060aa1e75"
-  integrity sha512-9BLIOvyCP5sM+fQpLlcJZWyrHguusJq8E5A1pxg0wQwputOyaPBM7recHhYkJmVjzRpTcPgf1PkvkpN6DKGcNg==
-  dependencies:
-    "@material/animation" "^4.0.0"
-    "@material/base" "^4.0.0"
-    "@material/dom" "^4.0.0"
-    "@material/feature-targeting" "^4.0.0"
-    "@material/theme" "^4.0.0"
+"@material/ripple@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-6.0.0.tgz#97e08b79ca9d63fdc2a9383f47576fca0615fc87"
+  integrity sha512-z+ARpjBVkRZBhiX20aAxAMrgBcfpcCRqIcI/E3Esfyo7M+q/mm8t92ZumcahxWnOBJkHM55kkpUqHlfkYlfyZQ==
+  dependencies:
+    "@material/animation" "^6.0.0"
+    "@material/base" "^6.0.0"
+    "@material/dom" "^6.0.0"
+    "@material/feature-targeting" "^6.0.0"
+    "@material/theme" "^6.0.0"
     tslib "^1.9.3"
 
-"@material/rtl@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-4.0.0.tgz#bc07e0a7c47174b2542862c252b0e35b44329c47"
-  integrity sha512-AP8zByVDEWAJVJoxByVccUbH+BX24IeG7ol+L6Qd8JjzPpz1fzPVJ4BeDNaF0a6sXtHsRmj2zN5dsx/BGC3IHg==
+"@material/rtl@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-6.0.0.tgz#e8114194af72f7496ca2fc5b4ee63981c46f5066"
+  integrity sha512-/WkzlUm3qylWMqv7Lw7ColZ8DYvEvTXtevxxz7PKM1hT9FNlbO1/Qywvda4VUtXivEeynXEqeT1T/ZYHV9yDVw==
 
-"@material/switch@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/switch/-/switch-4.0.0.tgz#5c5da30389f48f4f5245eb9f325cbc0e5f6bf2d4"
-  integrity sha512-90fvz0bYgeGQNBD14rdTOI/dvAPANwDQLIodOpE/r2bOZjge1K0rHSAm+TVwNCnrrM9HGmG8Ew0sIeEIj3jMMw==
-  dependencies:
-    "@material/animation" "^4.0.0"
-    "@material/base" "^4.0.0"
-    "@material/dom" "^4.0.0"
-    "@material/elevation" "^4.0.0"
-    "@material/feature-targeting" "^4.0.0"
-    "@material/ripple" "^4.0.0"
-    "@material/rtl" "^4.0.0"
-    "@material/theme" "^4.0.0"
+"@material/switch@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/switch/-/switch-6.0.0.tgz#a8253e54fff7d1948e22fdd770cfca4b95665b11"
+  integrity sha512-Qpg3ne2MKSLy/vkcUAsWvSZrkuY4QOqo/s1IUKQrjLrDbCS1Al/M7ZUO7ZlKsQyx3sbb9ijEmJwK6lGtn12b3Q==
+  dependencies:
+    "@material/animation" "^6.0.0"
+    "@material/base" "^6.0.0"
+    "@material/density" "^6.0.0"
+    "@material/dom" "^6.0.0"
+    "@material/elevation" "^6.0.0"
+    "@material/feature-targeting" "^6.0.0"
+    "@material/ripple" "^6.0.0"
+    "@material/rtl" "^6.0.0"
+    "@material/theme" "^6.0.0"
     tslib "^1.9.3"
 
-"@material/theme@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-4.0.0.tgz#8de388fcdbae20fd09b02a3bdef3049bf2f623a8"
-  integrity sha512-vS4G4rusJTatTH50kSYO1U3UGN8EY9kGRvPaFsEFKikJBOqcR6KWK9H9/wCLqqd6nDNifEj9H2sdWw1AV4NA6Q==
+"@material/theme@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-6.0.0.tgz#35da34965737e556b35670bfe4830de0a6d1ab9a"
+  integrity sha512-dViBx1lsidoQhVi/MYksTmDs8aUPj3mPVQIaBPtDRtqpIuWSwG7bCHoY8rG8FHRduPLpq3b1A4OwKHBd0RWVJw==
   dependencies:
-    "@material/feature-targeting" "^4.0.0"
+    "@material/feature-targeting" "^6.0.0"
 
 "@protobufjs/utf8@^1.1.0":
   version "1.1.0"
@@ -7041,10 +7049,10 @@ ipfs-block@^0.8.0, ipfs-block@~0.8.0, ipfs-block@~0.8.1:
     cids "~0.7.0"
     class-is "^1.1.0"
 
-ipfs-css@0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/ipfs-css/-/ipfs-css-0.13.1.tgz#f751be9cc89e30c34c50325848233f6da6b6728e"
-  integrity sha512-hofJSYVBE3VC3/MOYZKfF66SKuHgnYkhXUmPDS8PISI8ygcljGOyBSSU4Je3dfgZX5UHDBEnzq5XyrTU822EDg==
+ipfs-css@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ipfs-css/-/ipfs-css-1.1.0.tgz#a7a0494b51fe62232b6889c2a9feda42a7b40a3f"
+  integrity sha512-MXADP4wVdPP4jubuFR6MeJJUEuuSEmBnx0ST0vGhUdhN5v0R4PN5XL6Cdm9M3WwwAyFjV2FOyJAnP/WQToKRTg==
 
 ipfs-http-client@40.0.1:
   version "40.0.1"