Choose class modal remove tooltip (#9298)

* Change chooseClass modal opt out button and tooltip
- Remove hover tooltip from opt out
- Fix centering of choose class button
- Add some margin between opt out and choose class buttons
- Make cursor on opt out text the pointer to make it obvious it's clickable

* Alphabetical order class selector

website/client/components/achievements/chooseClass.vue

@@ -35,22 +35,14 @@
         .modal-actions.text-center
           button.btn.btn-primary.d-inline-block(v-if='!selectedClass', :disabled='true') {{ $t('select') }}
           button.btn.btn-primary.d-inline-block(v-else, @click='clickSelectClass(selectedClass); close();') {{ $t('selectClass', {heroClass: $t(selectedClass)}) }}
-          #classOptOutBtn.danger(@click='clickDisableClasses(); close();') {{ $t('optOutOfClasses') }}
-          b-popover.d-inline-block(
-            target="classOptOutBtn",
-            triggers="hover",
-            placement="top",
-          )
-            .popover-content-text {{ $t('optOutOfClassesText') }}
+          .opt-out-wrapper
+            span#classOptOutBtn.danger(@click='clickDisableClasses(); close();') {{ $t('optOutOfClasses') }}
+          span.opt-out-description {{ $t('optOutOfClassesText') }}
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  .btn-primary {
-    margin-right: 1em;
-  }
-
   .class-badge {
     $badge-size: 32px;
 
@@ -71,6 +63,10 @@
     margin: 1.5em auto;
   }
 
+  #classOptOutBtn {
+    cursor: pointer;
+  }
+
   .class-name {
     font-size: 24px;
     font-weight: bold;
@@ -92,6 +88,10 @@
     margin: 2em auto;
   }
 
+  .opt-out-wrapper {
+    margin: 1em 0 0.5em 0;
+  }
+
   .selection-box {
     width: 140px;
     height: 148px;