Support configuring badge colors (#72)

README.md

@@ -167,11 +167,13 @@ Using the `Custom store locations` setting in the browser extension options, you
 The list of available options:
 
 | Name                                                            | Description                                                  |
-| ----------------------------------------------------------- | ------------------------------------------------------------ |
+| --------------------------------------------------------------- | ------------------------------------------------------------ |
 | Automatically submit forms after filling (aka `autoSubmit`)     | Make Browserpass automatically submit the login form for you |
 | Default username (aka `username`)                               | Username to use when it's not defined in the password file   |
 | Custom gpg binary (aka `gpgPath`)                               | Path to a custom `gpg` binary to use                         |
 | Custom store locations                                          | List of password stores to use                               |
+| Custom store locations - badge background color (aka `bgColor`) | Badge background color for a given password store in popup   |
+| Custom store locations - badge text color (aka `color`)         | Badge text color for a given password store in popup         |
 
 Browserpass allows configuring certain settings in different places places using the following priority, highest first:
 
@@ -181,11 +183,15 @@ Browserpass allows configuring certain settings in different places places using
     - `autoSubmit`
     - `gpgPath`
     - `username`
+    - `bgColor`
+    - `color`
 1. Options defined in browser extension options:
     - Automatically submit forms after filling (aka `autoSubmit`)
     - Default username (aka `username`)
     - Custom gpg binary (aka `gpgPath`)
     - Custom store locations
+    - Custom store locations - badge background color (aka `bgColor`)
+    - Custom store locations - badge text color (aka `color`)
 
 ## Security
 

src/options/interface.js

@@ -180,6 +180,24 @@ function createCustomStore(storeId) {
                 this.saveEnabled = true;
             }
         }),
+        m("input[type=text].bgColor", {
+            title: "Badge background color",
+            value: store.bgColor,
+            placeholder: "#626262",
+            onchange: e => {
+                store.bgColor = e.target.value;
+                this.saveEnabled = true;
+            }
+        }),
+        m("input[type=text].color", {
+            title: "Badge text color",
+            value: store.color,
+            placeholder: "#c4c4c4",
+            onchange: e => {
+                store.color = e.target.value;
+                this.saveEnabled = true;
+            }
+        }),
         m(
             "a.remove",
             {

src/options/options.less

@@ -68,13 +68,12 @@ h3:first-child {
 }
 
 .option.custom-store input[type="text"] {
-    margin: -4px 0 0 0;
+    margin: -4px 6px 0 0;
-    width: 25%;
+    width: 16%;
 }
 
 .option.custom-store input[type="text"].path {
-    margin-left: 6px;
+    width: calc(100% - 16% * 3 - 6px * 3 - 16px);
-    width: calc(100% - 25% - 48px);
 }
 
 .option.custom-store a.remove {
@@ -82,7 +81,7 @@ h3:first-child {
     display: block;
     height: 16px;
     line-height: 16px;
-    margin: 0 0 0 6px;
+    margin: 0;
     padding: 0;
     text-decoration: none;
     width: 16px;

src/popup/interface.js

@@ -62,6 +62,9 @@ function view(ctl, params) {
         m(
             "div.logins",
             this.results.map(function(result) {
+                const storeBgColor = result.store.bgColor || result.store.settings.bgColor;
+                const storeColor = result.store.color || result.store.settings.color;
+
                 return m(
                     "div.part.login",
                     {
@@ -80,7 +83,14 @@ function view(ctl, params) {
                     [
                         m("div.name", [
                             m("div.line1", [
-                                m("div.store.badge", result.store.name),
+                                m(
+                                    "div.store.badge",
+                                    {
+                                        style: `background-color: ${storeBgColor};
+                                                color: ${storeColor}`
+                                    },
+                                    result.store.name
+                                ),
                                 m("div.path", [m.trust(result.path)]),
                                 result.recent.when > 0
                                     ? m("div.recent", {