Cosmetic improvements.

Author: dbernstein

src/components/PatronBlockingRulesEditor.tsx

@@ -94,7 +94,16 @@ export default class PatronBlockingRulesEditor extends React.Component<
 
     return (
       <div className="patron-blocking-rules-editor">
-        <label className="control-label">Patron Blocking Rules</label>
+        <div className="patron-blocking-rules-header">
+          <label className="control-label">Patron Blocking Rules</label>
+          <Button
+            type="button"
+            className="add-patron-blocking-rule"
+            disabled={disabled}
+            callback={this.addRule}
+            content="Add Rule"
+          />
+        </div>
         {rules.length === 0 && (
           <p className="no-rules-message">No patron blocking rules defined.</p>
         )}
@@ -140,8 +149,7 @@ export default class PatronBlockingRulesEditor extends React.Component<
                       }
                     />
                     <EditableInput
-                      elementType="input"
-                      type="text"
+                      elementType="textarea"
                       label="Message (optional)"
                       name={`patron_blocking_rule_message_${index}`}
                       value={rule.message || ""}
@@ -158,13 +166,6 @@ export default class PatronBlockingRulesEditor extends React.Component<
             );
           })}
         </ul>
-        <Button
-          type="button"
-          className="add-patron-blocking-rule"
-          disabled={disabled}
-          callback={this.addRule}
-          content="Add Rule"
-        />
       </div>
     );
   }

src/stylesheets/app.scss

@@ -50,6 +50,7 @@ $fontfamily: 'Open Sans', sans-serif;
 @import "manage_patrons";
 @import "paired_menu";
 @import "password_input";
+@import "patron_blocking_rules_editor";
 @import "protocol_form_field";
 @import "self_tests";
 @import "set_up";

src/stylesheets/patron_blocking_rules_editor.scss

@@ -0,0 +1,46 @@
+.patron-blocking-rules-editor {
+  border-top: 1px solid $gray-border;
+  margin-top: 20px;
+  padding-top: 16px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid $gray-border;
+
+  .patron-blocking-rules-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+
+    .control-label {
+      margin-bottom: 0;
+    }
+
+    .add-patron-blocking-rule {
+      margin: 0;
+    }
+  }
+
+  .no-rules-message {
+    color: $medium-dark-gray;
+    font-style: italic;
+    margin: 8px 0 0;
+  }
+
+  .patron-blocking-rules-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  .patron-blocking-rule-row {
+    border-bottom: 1px solid $medium-gray;
+    padding-bottom: 12px;
+    margin-bottom: 0;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+  }
+}