Move CSS to App.vue + add some rules

src/App.vue

@@ -52,11 +52,22 @@ export default {
   margin-top: 60px;
 }
 
+/* Global Styles */
+
 button {
   font-size: 16px;
   padding: 8px;
   border-radius: 3px;
   margin: 5px 10px 5px 0px;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: auto;
+}
+
+.clickable {
+  cursor: pointer;
 }
 
 input[type='checkbox'] {
@@ -75,4 +86,85 @@ input[type='checkbox'] {
 input[type='checkbox']:checked {
   background: #679;
 }
+
+/* Modal */
+
+.modal, .overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+.overlay {
+  opacity: 0.5;
+  background-color: black;
+}
+.modal-card {
+  position: relative;
+  max-width: 80%;
+  margin: auto;
+  margin-top: 30px;
+  padding: 20px;
+  background-color: white;
+  min-height: 500px;
+  z-index: 10;
+  opacity: 1;
+}
+
+/* Email Modal */
+
+.email-display {
+  text-align: left;
+}
+
+/* Mail Table */
+
+.mail-table {
+  max-width: 1000px;
+  margin: auto;
+  border-collapse: collapse;
+}
+.mail-table tr.read {
+  background-color: #EEE;
+}
+.mail-table tr {
+  height: 40px;
+}
+.mail-table td {
+  border-bottom: 1px solid black;
+  padding: 5px;
+  text-align: left;
+}
+.mail-table tr:first-of-type td {
+  border-top: 1px solid black;
+}
+.mail-table td p {
+  max-height: 1.2em;
+  overflow-y: hidden;
+  margin: 0;
+}
+
+.mail-table td.date {
+  width: 120px;
+}
+
+/* Bulk Action Bar */
+
+.bulk-action-bar {
+  width: 100%;
+  max-width: 1000px;
+  margin: auto;
+  text-align: left;
+  padding-bottom: 8px;
+}
+
+.bulk-action-bar input {
+  margin: 5px;
+}
+
+.bulk-action-bar .checkbox {
+  margin-right: 6px;
+  margin-left: 3px;
+}
 </style>

src/components/BulkActionBar.vue

@@ -67,19 +67,5 @@
 </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>

src/components/MailTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <table>
+  <table class="mail-table">
     <tbody>
       <tr v-for="email in emails" 
           :key="email.id"
@@ -70,33 +70,5 @@
 </script>
 
 <style scoped>
-  table {
-    max-width: 1000px;
-    margin: auto;
-    border-collapse: collapse;
-  }
-  tr.read {
-    background-color: #EEE;
-  }
-  tr {
-    height: 40px;
-  }
-  td {
-    border-bottom: 1px solid black;
-    padding: 5px;
-    text-align: left;
-  }
-  td p {
-    max-height: 1.2em;
-    overflow-y: hidden;
-    margin: 0;
-  }
   
-  td.date {
-    width: 120px;
-  }
-
-  .clickable {
-    cursor: pointer;
-  }
 </style>

src/components/MailView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="email" v-if="email">
+  <div class="email-display" v-if="email">
     <div class="toolbar">
       <button @click="toggleArchive">{{email.archived ? 'Move to Inbox' : 'Archive'}}</button>
       <button @click="goNewer">Newer</button>
@@ -52,7 +52,5 @@
 </script>
 
 <style scoped>
-.email {
+
-  text-align: left;
-}
 </style>

src/components/ModalView.vue

@@ -24,26 +24,5 @@
 </script>
 
 <style scoped>
-  .modal, .overlay {
+
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    left: 0;
-    top: 0;
-  }
-  .overlay {
-    opacity: 0.5;
-    background-color: black;
-  }
-  .modal-card {
-    position: relative;
-    max-width: 80%;
-    margin: auto;
-    margin-top: 30px;
-    padding: 20px;
-    background-color: white;
-    min-height: 500px;
-    z-index: 10;
-    opacity: 1;
-  }
 </style>