From f6114cf7d1412e1a495d447f791893ca775510a3 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Mon, 23 Mar 2020 17:05:39 -0700
Subject: [PATCH] Spacing improved on bulk actions

---
 src/components/BulkActionBar.vue | 64 ++++++++++++++++++++------------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index 646fa75..307792e 100644
--- a/src/components/BulkActionBar.vue
+++ b/src/components/BulkActionBar.vue
@@ -1,28 +1,32 @@
 <template>
-  <div class="bulk-action-bar">  
-    <span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
-    <input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
+  <div class="bulk-action-bar">
+    <span class="checkbox">
+      <input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
+      <span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
+    </span>
     
-    <button @click="emailSelection.markRead()"
-            :disabled="Array.from(emailSelection.emails).every(e => e.read)"
-            v-if="actions.includes('markRead')">
-      Mark Read
-    </button>
-    <button @click="emailSelection.markUnread()" 
-            :disabled="Array.from(emailSelection.emails).every(e => !e.read)"
-            v-if="actions.includes('markUnread')">
-      Mark Unread
-    </button>
-    <button @click="emailSelection.archive()" 
-            :disabled="numberSelected == 0"
-            v-if="actions.includes('archive')">
-      Archive
-    </button>
-    <button @click="emailSelection.moveToInbox()"
-            :disabled="numberSelected == 0"
-            v-if="actions.includes('moveToInbox')">
-      Move to Inbox
-    </button>
+    <span class="buttons">
+      <button @click="emailSelection.markRead()"
+              :disabled="Array.from(emailSelection.emails).every(e => e.read)"
+              v-if="actions.includes('markRead')">
+        Mark Read
+      </button>
+      <button @click="emailSelection.markUnread()" 
+              :disabled="Array.from(emailSelection.emails).every(e => !e.read)"
+              v-if="actions.includes('markUnread')">
+        Mark Unread
+      </button>
+      <button @click="emailSelection.archive()" 
+              :disabled="numberSelected == 0"
+              v-if="actions.includes('archive')">
+        Archive
+      </button>
+      <button @click="emailSelection.moveToInbox()"
+              :disabled="numberSelected == 0"
+              v-if="actions.includes('moveToInbox')">
+        Move to Inbox
+      </button>
+    </span>
   </div>
 </template>
 
@@ -63,5 +67,19 @@
 </script>
 
 <style scoped>
+  .bulk-action-bar {
+    width: 100%;
+    max-width: 1000px;
+    margin: auto;
+    text-align: left;
+  }
 
+  input {
+    margin: 5px;
+  }
+  
+  .checkbox {
+    margin-right: 6px;
+    margin-left: 3px;
+  }
 </style>
\ No newline at end of file