From 2278498b060cf7412185cff5794a1bd581453ada Mon Sep 17 00:00:00 2001
From: Jonathan Kingston <jonathan@jooped.co.uk>
Date: Mon, 19 Jun 2017 11:46:41 +0100
Subject: [PATCH] WIP edit-containers restyle

---
 webextension/css/popup.css | 27 +++++++++++++++------------
 webextension/js/popup.js   |  6 ++++--
 webextension/popup.html    |  4 ++--
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index e9c7699..832b6b4 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -776,34 +776,37 @@ span ~ .panel-header-text {
   display: block;
 }
 
-.column-panel-content form span {
+.radio-choice > .radio-container {
   align-items: center;
-  block-size: 44px;
+  block-size: 29px;
   display: flex;
-  flex: 0 0 25%;
-  justify-content: center;
+  flex: 0 0 calc(100% / 8);
 }
 
-.edit-container-panel label {
+.radio-choice > .radio-container > label {
   background-image: var(--identity-icon);
-  background-size: 26px 26px;
-  block-size: 34px;
+  background-size: 16px;
+  block-size: 22px;
   fill: var(--identity-icon-color);
   filter: url('/img/filters.svg#fill');
-  flex: 0 0 34px;
+  flex: 0 0 22px;
+  margin-inline-start: 2px;
   position: relative;
 }
 
-.edit-container-panel label::before {
+.radio-choice > .radio-container > label::before {
+  block-size: 0;
+  inline-size: 0;
   opacity: 0 !important;
 }
 
-.edit-container-panel [type="radio"] {
+.radio-choice > .radio-container > [type="radio"] {
   display: inline;
+  -moz-appearance: none;
   opacity: 0;
 }
 
-.edit-container-panel [type="radio"]:checked + label {
+.radio-choice > .radio-container > [type="radio"]:checked + label {
   outline: 2px solid grey;
   -moz-outline-radius: 50px;
 }
@@ -842,5 +845,5 @@ span ~ .panel-header-text {
 .edit-container-panel legend {
   flex: 1 0;
   font-size: 14px !important;
-  padding-block-end: 5px;
+  padding-block-end: 6px;
 }
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 2069560..6023551 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -830,7 +830,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
     const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
     colors.forEach((containerColor) => {
-      const templateInstance = document.createElement("span");
+      const templateInstance = document.createElement("div");
+      templateInstance.classList.add("radio-container");
       // eslint-disable-next-line no-unsanitized/property
       templateInstance.innerHTML = colorRadioTemplate(containerColor);
       colorRadioFieldset.appendChild(templateInstance);
@@ -843,7 +844,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle"];
     const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
     icons.forEach((containerIcon) => {
-      const templateInstance = document.createElement("span");
+      const templateInstance = document.createElement("div");
+      templateInstance.classList.add("radio-container");
       // eslint-disable-next-line no-unsanitized/property
       templateInstance.innerHTML = iconRadioTemplate(containerIcon);
       iconRadioFieldset.appendChild(templateInstance);
diff --git a/webextension/popup.html b/webextension/popup.html
index b641895..fbf03f6 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -119,10 +119,10 @@
             <legend>Name</legend>
             <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
           </fieldset>
-          <fieldset id="edit-container-panel-choose-color">
+          <fieldset id="edit-container-panel-choose-color" class="radio-choice">
             <legend>Choose a color</legend>
           </fieldset>
-          <fieldset id="edit-container-panel-choose-icon">
+          <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
             <legend>Choose an icon</legend>
           </fieldset>
         </form>