Workers: Style action bar

web/app/src/assets/base.css

@@ -257,6 +257,27 @@ dl dd:empty {
 .btn-bar-group {
   align-items: center;
   display: flex;
+  padding: var(--spacer-sm) 0;
+}
+
+.btn-bar-group .btn-bar {
+  padding: 0;
+}
+
+.btn-bar-group select+.btn,
+.btn-bar-group .btn+select {
+  margin-left: var(--spacer-sm)
+}
+
+select {
+  background-color: var(--color-button-background);
+  border-radius: var(--border-radius);
+  /* border: none; */
+  border: calc(var(--border-width) / 2) solid var(--color-button-background);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+  padding: var(--spacer-xs) var(--spacer-sm);
 }
 
 .btn {

web/app/src/components/workers/WorkerActionsBar.vue

@@ -1,7 +1,10 @@
 <template>
   <select v-model="selectedAction">
-      <option value="" selected><template v-if="!hasActiveWorker">Select a Worker</template><template v-else>Choose an Action</template></option>
+    <option value="" selected>
-      <option v-for="(action, key) in WORKER_ACTIONS" :value="key">{{ action.label }}</option>
+      <template v-if="!hasActiveWorker">Select a Worker</template>
+      <template v-else>Choose an action...</template>
+    </option>
+    <option v-for="(action, key) in WORKER_ACTIONS" :value="key">{{ action.label }}</option>
   </select>
   <button
       :disabled="!canPerformAction"

web/app/src/components/workers/WorkersTable.vue

@@ -1,12 +1,19 @@
 <template>
   <h2 class="column-title">Workers</h2>
-  <worker-actions-bar />
+
-  <status-filter-bar
+  <div class="btn-bar-group">
-    :availableStatuses="availableStatuses"
+    <worker-actions-bar />
-    :activeStatuses="shownStatuses"
+
-    classPrefix="worker-"
+    <div class="align-right">
-    @click="toggleStatusFilter"
+      <status-filter-bar
-  />
+        :availableStatuses="availableStatuses"
+        :activeStatuses="shownStatuses"
+        classPrefix="worker-"
+        @click="toggleStatusFilter"
+      />
+    </div>
+  </div>
+
   <div>
     <div class="workers-list with-clickable-row" id="flamenco_workers_list"></div>
   </div>