add styling for course communication recipient form

templates/widgets/communication/recipientAdd.hamlet

@@ -1,5 +1,5 @@
 $newline never
-<div .category__entry-add>
+<div .recipient-category__option-add>
   #{csrf}
   ^{fvInput addView}
   ^{fvInput submitView}

templates/widgets/communication/recipientEmail.hamlet

@@ -1,7 +1,6 @@
 $newline never
-<div .category__option>
+<div .recipient-category__option>
   #{csrf}
   ^{fvInput tickView}
-  <label for=#{fvId tickView}>
-    <span style="font-family: monospace">
-      #{email}
+  <label .recipient-category__option-label for=#{fvId tickView}>
+    #{email}

templates/widgets/communication/recipientLayout.hamlet

@@ -1,11 +1,12 @@
 $newline never
 $forall category <- activeCategories
-  <div .category>
+  <div .recipient-category>
     <input type=checkbox id=#{checkedIdent category} :elem category checkedCategories:checked>
-    <label for=#{checkedIdent category}>
+    <label .recipient-category__label for=#{checkedIdent category}>
       _{category}
 
-    <fieldset uw-interactive-fieldset data-conditional-input=#{checkedIdent category} .interactive-fieldset--target>
+    $# TODO: only add fieldset if there are options to choose from
+    <fieldset .recipient-category__fieldset uw-interactive-fieldset data-conditional-input=#{checkedIdent category}>
       $forall optIx <- categoryIndices category
         ^{cellWdgts ! optIx}
 

templates/widgets/communication/recipientLayout.lucius

@@ -0,0 +1,40 @@
+.recipient-category {
+  max-width: 400px;
+  padding: 3px 0;
+
+  &:not(:last-child) {
+    margin-bottom: 7px;
+  }
+
+  &:not(:first-child) {
+    margin-top: 7px;
+  }
+}
+
+.recipient-category__option {
+  display: flex;
+
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+}
+
+.recipient-category__label,
+.recipient-category__option-label {
+  margin-left: 15px;
+  vertical-align: top;
+}
+
+.recipient-category__fieldset {
+  margin: 7px 0 5px 9px;
+  padding: 5px 0 10px;
+  border-left: 1px solid #bcbcbc;
+  padding-left: 16px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.recipient-category__option-add {
+  display: flex;
+  align-items: center;
+}

templates/widgets/communication/recipientName.hamlet

@@ -1,6 +1,6 @@
 $newline never
-<div .category__option>
+<div .recipient-category__option>
   #{csrf}
   ^{fvInput tickView}
-  <label for=#{fvId tickView}>
+  <label .recipient-category__option-label for=#{fvId tickView}>
     #{nameHtml userDisplayName userSurname}