nicer message, button instead of blank page

webapp/src/components/DiscordWarningDialog.vue

@@ -7,8 +7,12 @@
           <p class="mb-3 text-body-1">
             <strong>You're about to join Discord</strong>
           </p>
+          <p class="mb-3 text-body-2">
+            DeFlock's Discord is a space for individuals and groups to meet and collaborate to campaign against mass surveillance infrastructure.
+          </p>
           <v-alert color="warning" variant="outlined" class="mb-4">
             <b>Law enforcement</b> and <b>Flock employees</b> actively monitor the Discord server. Please act accordingly.
+
           </v-alert>
           <p class="text-caption text-medium-emphasis mb-2">
             If you understand the risks and wish to continue, click <strong>Proceed</strong> below.

webapp/src/views/DiscordJoin.vue

@@ -1,8 +1,12 @@
 <template>
   <DefaultLayout>
-    <div class="loading-container">
+    <v-container class="narrow-text text-center">
-      (Intentionally blank)
+      <h1 class="mb-4">Join the DeFlock Discord</h1>
-    </div>
+      <v-btn color="primary" size="large" rounded @click="showDialog = true">
+        <v-icon start>mdi-discord</v-icon>
+        Join Discord
+      </v-btn>
+    </v-container>
 
     <DiscordWarningDialog
       v-model="showDialog"
@@ -29,14 +33,3 @@ function handleProceed(url: string) {
   window.open(url, '_blank');
 }
 </script>
-
-<style scoped>
-.loading-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
-  font-size: 1.1rem;
-  color: var(--df-text-color);
-}
-</style>