Code review feedback

src/public/place/directive.html

@@ -1,29 +1,31 @@
-<div class="columns" id="directive" hx-swap-oob="true">
-  <div class="column is-10">
-    <section class="hero box is-small is-light">
+<div class="columns is-3 is-variable" id="directive" hx-swap-oob="true">
+  <div class="column has-background-light is-9">
+    <section class="hero is-small is-light">
       <div class="hero-body">
         {% if progress.inProgressCount > 0 %}
           {% include "place/directive_3_in_progress.html" %}
-        {% elsif progress.successCount > 0 %}
-          {% include "place/directive_4_prompt_save.html" %}
         {% elsif progress.stagedCount > 0 %}
           {% include "place/directive_2_prompt_upload.html" %}
+        {% elsif progress.successCount > 0 %}
+          {% include "place/directive_4_prompt_save.html" %}
         {% else %}
           {% include "place/directive_1_get_started.html" %}
         {% endif %}
       </div>
-    </section>    
+    </section>
   </div>
 
-  <div class="column is-2">
-    <div class="box">
-      Summary:
-      <ul>
-        <li><span class="tag">{{ progress.stagedCount }} staged</span></li>
-        <li><span class="tag is-warning">{{ progress.validationErrorCount }} validation errors</span> </li>
-        <li><span class="tag is-success">{{ progress.completeCount }} uploaded</span> </li>
-        <li><span class="tag is-danger">{{ progress.failureCount }} failures</span> </li>
-      </ul>
+  <div class="column is-3 has-background-light">
+    <section class="hero is-small is-light">
+      <div class="hero-body">  
+        <p class="title is-5">Summary</p>
+        <ul>
+          <li><span class="tag">{{ progress.stagedCount }} staged</span></li>
+          <li><span class="tag is-warning">{{ progress.validationErrorCount }} validation errors</span> </li>
+          <li><span class="tag is-success">{{ progress.completeCount }} uploaded</span> </li>
+          <li><span class="tag is-danger">{{ progress.failureCount }} failures</span> </li>
+        </ul>
+      </div>
     </div>
-  </div>
+  </section>    
 </div>

src/public/place/directive_1_get_started.html

@@ -1,4 +1,4 @@
-<p class="title">
+<p class="title is-5">
   Getting Started...
 </p>
 <p>

src/public/place/directive_2_prompt_upload.html

@@ -1,4 +1,4 @@
-<p class="title">
+<p class="title is-5">
   Upload When Ready
 </p>
 <p>

src/public/place/directive_3_in_progress.html

@@ -1,4 +1,4 @@
-<p class="title">
+<p class="title is-5">
   Upload In Progress...
 </p>
 

src/public/place/directive_4_prompt_save.html

@@ -1,4 +1,4 @@
-<p class="title">
+<p class="title is-5">
   Download Resulting User Credentials
 </p>