diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 2ce5d91..9f4a8e0 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -2,12 +2,21 @@ body { background: #FAFAFA; min-inline-size: 200px; max-inline-size: 400px; + inline-size: 264px; } table { margin-block-end: 0; } +.panel { + height: 100%; +} + +.panel-row { + height: 100%; +} + .onboarding { margin: 16px; min-block-size: 480px; @@ -35,14 +44,26 @@ table { padding: .5em; } -.header-column { - padding: 0; +.panel-header { + height: 54px; + display: flex; + align-items: center; +} + +.panel-header-text { + font-weight: lighter; + font-size: 16px; + margin-bottom: 0; + color: #4a4a4a; +} + +.panel-header-button { + justify-content: center; } .icon { max-inline-size: 16px; block-size: 16px; - margin: 4px; } .container-panel > table.unstriped tbody tr { @@ -71,9 +92,19 @@ table { background: #DCDBDC; } +.panel-footer { + align-items: center; + background: #efefef; + color: #000000; + display: flex; + font-size: 13px; + height: 54px; + width: 100%; +} + .edit-containers-text { text-align: center; - padding: .5em; + border-right: solid 1px #d8d8d8; } .edit-containers-text a { @@ -143,3 +174,13 @@ table { .container-info-has-tabs { cursor: pointer; } + +.edit-panel-footer { + background: #248aeb; + color: #ffffff; + justify-content: center; +} + +.edit-panel-footer a { + color: #ffffff; +} diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 278eeb3..b03ee03 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -130,12 +130,13 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { }); document.querySelector("#edit-containers-link").addEventListener("click", () => { - browser.runtime.sendMessage({ - method: "openTab", - url: "about:preferences#containers" - }).then(() => { - window.close(); - }); + document.querySelector("#container-panel").classList.add("hide"); + document.querySelector("#edit-panel").classList.remove("hide"); +}); + +document.querySelector("#exit-edit-mode-link").addEventListener("click", () => { + document.querySelector("#container-panel").classList.remove("hide"); + document.querySelector("#edit-panel").classList.add("hide"); }); document.querySelector("#sort-containers-link").addEventListener("click", () => { diff --git a/webextension/popup.html b/webextension/popup.html index 5bd8dfc..b03efd2 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -6,6 +6,7 @@ +
Container Tabs Overview

A better way to manage all the things you do online

@@ -13,33 +14,54 @@

Learn more

Next
+ +
How Containers Work

Put containers to work for you.

Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.

Done
+ +
-