Join page new design implemented

src/components/SelectLanguageDialog.vue

@@ -3,12 +3,17 @@
     class="ma-0 pa-0"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
-    :width="$vuetify.breakpoint.smAndUp ? '940px' : '80%'"
+    :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
   >
     <v-card class="dialog-card">
-      <v-card-title class="dialog-title"
-        ><h3>{{ $t("profile.select_language") }}</h3></v-card-title
-      >
+      <v-card-title class="dialog-title d-block">
+        <h2>{{ $t("profile.set_language") }}</h2>
+        <div class="subtitle-1">{{ $t("profile.language_description") }}</div>
+        <div class="subtitle-1">
+          {{ $t("profile.dont_see_yours") }}
+          <a href="https://letsconvene.im/">{{ $t("profile.tell_us") }}</a>
+        </div>
+      </v-card-title>
       <v-card-text>
         <v-select
           v-model="$i18n.locale"
@@ -26,9 +31,9 @@
           color="black"
           depressed
           block
-          class="filled-button"
+          class="btn-dark"
           @click="$emit('close')"
-          >{{ $t("menu.ok") }}</v-btn
+          >{{ $t("menu.done") }}</v-btn
         >
       </v-card-actions>
     </v-card>
@@ -36,20 +41,10 @@
 </template>
 
 <script>
+import LanguageMixin from "./languageMixin";
+
 export default {
-  data() {
-    return {
-      languages: [],
-    };
-  },
-  mounted() {
-    for (const locale of Object.keys(this.$i18n.messages)) {
-      this.languages.push({
-        text: this.$i18n.messages[locale].language_display_name || locale,
-        value: locale,
-      });
-    }
-  },
+  mixins: [LanguageMixin],
 };
 </script>