Button for selected screen looks 'selected', not 'disabled'

Author: Jeffrey Biles

src/App.vue

@@ -46,6 +46,13 @@ button:disabled {
   cursor: auto;
 }
 
+button.selected {
+  cursor: auto;
+  color: black;
+  border-color: black;
+  border-width: 2px;
+}
+
 .clickable {
   cursor: pointer;
 }

src/components/MailScreen.vue

@@ -1,10 +1,10 @@
 <template>
   <button @click="selectScreen('inbox');"
-          :disabled="selectedScreen == 'inbox'">
+          :class="[selectedScreen == 'inbox' ? 'selected' : '']">
     Inbox View
   </button>
   <button @click="selectScreen('archive')" 
-          :disabled="selectedScreen == 'archive'">
+          :class="[selectedScreen == 'archive' ? 'selected' : '']">
     Archived View
   </button>