Better checkboxes, global button css

src/App.vue

@@ -53,4 +53,28 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+
+button {
+  font-size: 16px;
+  padding: 8px;
+  border-radius: 3px;
+  margin: 5px 10px 5px 0px;
+}
+
+input[type='checkbox'] {
+  -webkit-appearance:none;
+  cursor: pointer;
+  width:24px;
+  height:24px;
+  background:white;
+  border-radius: 2px;
+  border: 1px solid #555;
+  position: relative;
+  vertical-align: middle;
+  padding: 10px;
+}
+
+input[type='checkbox']:checked {
+  background: #679;
+}
 </style>

src/components/MailTable.vue

@@ -8,8 +8,8 @@
           class="clickable">
         <td>
           <input type="checkbox" 
-                  :checked="emailSelection.emails.has(email)"
-                  @click="emailSelection.toggle(email)" />
+                 :checked="emailSelection.emails.has(email)"
+                 @click="emailSelection.toggle(email)">
         </td>
         <td>{{email.from}}</td>
         <td>

src/components/MailView.vue

@@ -55,11 +55,4 @@
 .email {
   text-align: left;
 }
-
-button {
-  font-size: 16px;
-  padding: 8px;
-  border-radius: 3px;
-  margin: 5px 10px 5px 0px;
-}
 </style>