Introduced checkbox-container

So in the signing widget we can click anywhere on the row for selecting
the checkbox.

frontend/sass/common.blocks/_checkbox-container.scss

@@ -0,0 +1,16 @@
+/*
+  A checkbox-container is some element that contains a single checkbox
+  somewhere and should behave like all of it were the checkbox. E.g. hover on
+  the container changes the checkbox style, the cursor will be a pointer
+  everywhere in the container and a click should toggle the checkbox (this
+  needs to be taken care of in code.)
+*/
+.checkbox-container {
+  cursor: pointer;
+}
+
+.checkbox-container:hover .checkbox__checkmark {
+  background-color: $hover-background;
+}
+
+

frontend/sass/index.scss

@@ -28,6 +28,7 @@
 @import 'common.blocks/select';
 @import 'common.blocks/label';
 @import 'common.blocks/checkbox';
+@import 'common.blocks/checkbox-container';
 
 @import 'common.blocks/segment';
 @import 'common.blocks/pane';

frontend/src/Frontend/UI/DeploymentSettings.hs

@@ -154,9 +154,14 @@ signingItem
   => (Text, Dynamic t KeyPair)
   -> m (Dynamic t Bool)
 signingItem (n, _) = do
-    elClass "tr" "table__row" $ do
-      el "td" $ text n
-      box <- elClass "td" "signing-selector__check-box-cell" $
-        uiCheckbox "signing-selector__check-box-label" False def blank
+    elClass "tr" "table__row checkbox-container" $ mdo
+      (e, ()) <- el' "td" $ text n
+      let onTextClick = domEvent Click e
+      box <- elClass "td" "signing-selector__check-box-cell" $ do
+        let cfg = toggleCheckbox box onTextClick
+        uiCheckbox "signing-selector__check-box-label" False cfg blank
       pure (value box)
 
+toggleCheckbox :: Reflex t => Checkbox t -> Event t a -> CheckboxConfig t
+toggleCheckbox box =
+  (\v -> def { _checkboxConfig_setValue = v }) . fmap not . tag (current $ value box)

frontend/src/Frontend/UI/Widgets.hs

@@ -67,8 +67,8 @@ import           Frontend.UI.Widgets.Helpers (imgWithAlt, makeClickable,
 --   In contrast to `checkbox` this is not only the actual checkbox but also a
 --   containing label, as this is the only way to have a styled checkbox.
 --
---   Note that this is actually a secondary type checkbox, I have yet to
---   generalize this yet.
+--   Note that this is actually a secondary type checkbox, I have to
+--   generalize this at some point.
 uiCheckbox
   :: (DomBuilder t m, PostBuild t m)
   => CssClass