improve btns

Author: rockstarr-programmerr

src/views/classroom/ClassroomList.vue

@@ -5,19 +5,17 @@
     <h1>Classrooms</h1>
     <v-divider></v-divider>
 
-    <span
+    <v-btn
       v-if="isTeacher"
-      class="cursor-pointer d-inline-flex mt-5"
+      class="mt-5"
+      depressed
       @click="$router.push({ name: 'ClassroomCreate' })"
     >
-      <v-icon>
+      <v-icon left>
         mdi-plus-circle-outline
       </v-icon>
-      <span
-        v-text="'New classroom'"
-        class="ml-3"
-      ></span>
-    </span>
+      New classroom
+    </v-btn>
 
     <v-progress-circular
       v-if="loading"

src/views/classroom/ClassroomStudents.vue

@@ -1,22 +1,22 @@
 <template>
   <div>
-    <span
-      class="cursor-pointer d-inline-flex"
+    <v-btn
+      depressed
       @click="showAddStudent = !showAddStudent"
     >
-      <v-icon>
-        mdi-plus-circle-outline
+      <v-icon left>
+        {{ showAddStudent ? 'mdi-minus-circle-outline' : 'mdi-plus-circle-outline' }}
       </v-icon>
-      <span
-        v-text="'Add student'"
-        class="ml-3"
-      ></span>
-    </span>
+      Add student
+    </v-btn>
 
-    <div v-show="showAddStudent">
+    <div
+      v-if="showAddStudent"
+      class="mt-3"
+    >
       <v-card width="50%">
         <v-card-subtitle>
-          An email containing temporary password will be sent to your student after creating.
+          An email containing temporary password will be sent to your student after adding.
           Tell them to login with that password.
         </v-card-subtitle>
         <v-card-text>
@@ -51,8 +51,9 @@
             color="primary"
             :loading="loadingAddStudent"
             @click="addStudent"
+            min-width="110"
           >
-            Add student
+            Add
           </v-btn>
         </v-card-actions>
       </v-card>

src/views/reading-exercise/ReadingExerciseList.vue

@@ -5,18 +5,16 @@
     <h1>Manage reading exercises</h1>
     <v-divider></v-divider>
 
-    <span
-      class="cursor-pointer d-inline-flex mt-5"
+    <v-btn
+      class="mt-5"
+      depressed
       @click="goToNewExercise"
     >
-      <v-icon>
+      <v-icon left>
         mdi-plus-circle-outline
       </v-icon>
-      <span
-        v-text="'Add exercise'"
-        class="ml-3"
-      ></span>
-    </span>
+      New exercise
+    </v-btn>
     <br>
 
     <v-progress-circular