Label popover styling

frontend/src/questions/components/LabelIcon.jsx

@@ -5,12 +5,12 @@ import S from "./LabelIcon.css";
 import Icon from "metabase/components/Icon.jsx";
 import cx from "classnames";
 
-const LabelIcon = ({ icon = "", size = 18}) =>
+const LabelIcon = ({ icon = "", size = 18, className }) =>
     icon.charAt(0) === ":" ?
-        <span className={S.icon} style={{ width: size, height: size }}>🐱</span>
+        <span className={cx(S.icon, className)} style={{ width: size, height: size }}>🐱</span>
     : icon.charAt(0) === "#" ?
-        <span className={cx(S.icon, S.colorIcon)} style={{ backgroundColor: icon, width: size, height: size }}></span>
+        <span className={cx(S.icon, S.colorIcon, className)} style={{ backgroundColor: icon, width: size, height: size }}></span>
     :
-        <Icon className={S.icon} name={icon} />
+        <Icon className={cx(S.icon, className)} name={icon} />
 
 export default LabelIcon;

frontend/src/questions/components/LabelPopoverContent.css

+@import "../Questions.css";
+
+:local(.picker) {
+    width: 290px;
+    color: var(--title-color);
+}
+
+:local(.heading) {
+    composes: p2 from "style/spacing";
+    composes: border-bottom from "style/bordered";
+    font-size: 14px;
+}
+
+:local(.options) {
+    composes: py1 from "style/spacing";
+}
+
+:local(.option) {
+    composes: px3 py1 from "style/spacing";
+    composes: flex align-center from "style/flex";
+    font-size: 18px;
+}
+
+:local(.option):hover,
+:local(.option.selected) {
+    background-color: rgba(132,187,76, 0.1);
+}
+
+:local(.option.selected) {
+    color: rgb(132,187,76);
+}
+
+:local(.mainIcon) {
+    composes: mr1 from "style/spacing";
+}
+
+:local(.removeIcon) {
+    composes: flex-align-right from "style/flex";
+    visibility: hidden;
+}
+:local(.option.selected):hover :local(.removeIcon) {
+    visibility: visible;
+}

frontend/src/questions/components/LabelPopoverContent.jsx

 import React, { Component, PropTypes } from "react";
+import S from "./LabelPopoverContent.css";
 
 import LabelIcon from "./LabelIcon.jsx";
 import Icon from "metabase/components/Icon.jsx";
 
 const LabelPopoverContent = ({ labels, count, item, setLabeled }) =>
-    <div>
+    <div className={S.picker}>
+        <div className={S.heading}>
         { count > 1 ?
-            <div>Apply labels to {count} questions</div>
+            "Apply labels to " + count + " questions"
         :
-            <div>Label as</div>
+            "Label as"
         }
-        <ul>
+        </div>
+        <ul className={S.options}>
             { labels.map(label =>
                 (item && item.labels.indexOf(label) >= 0 || label.selected === true) ?
-                    <li key={label.id} onClick={() => setLabeled(item && item.id, label.id, false)}>
-                        <Icon name="check" />
+                    <li key={label.id} className={S.option + " " + S.selected} onClick={() => setLabeled(item && item.id, label.id, false)}>
+                        <Icon className={S.mainIcon} name="check" />
                         {label.name}
+                        <Icon className={S.removeIcon} name="close" />
                     </li>
                 : (!item && label.selected === null) ?
-                    <li key={label.id} onClick={() => setLabeled(item && item.id, label.id, false)}>
-                        <Icon name="close" />
+                    <li key={label.id} className={S.option} onClick={() => setLabeled(item && item.id, label.id, false)}>
+                        <Icon className={S.mainIcon} name="close" />
                         {label.name}
                     </li>
                 :
-                    <li key={label.id} onClick={() => setLabeled(item && item.id, label.id, true)}>
-                        <LabelIcon icon={label.icon} />
+                    <li key={label.id} className={S.option} onClick={() => setLabeled(item && item.id, label.id, true)}>
+                        <LabelIcon className={S.mainIcon} icon={label.icon} />
                         {label.name}
                     </li>
             ) }