Redesign shared secret wrapper

aleksis/apps/maka/frontend/components/shared_secret/SharedSecretWrapper.vue

 <template>
-  <div>
+  <v-card :flat="sharedSecretStatus || $apollo.queries.sharedSecretStatus.loading" style="width: max-content" class="mx-auto">
     <slot v-if="sharedSecretStatus && !initial" />
-    <div class="d-flex justify-center align-center flex-column text-center" v-else-if="$apollo.queries.sharedSecretStatus.loading">
-      <h1 class="text-h5">{{ $t("maka.shared_secret.checking") }}</h1>
-      <v-progress-circular
-        indeterminate
-        color="primary"
-      ></v-progress-circular>
-    </div>
-    <div class="d-flex justify-center align-center flex-column text-center" v-else>
-      <h1 class="text-h5">{{ $t("maka.shared_secret.enter") }}</h1>
-      <v-text-field v-model="sharedSecret" :loading="loading" type="password" :error-messages="errorMessages">
-        <template #append>
-          <v-btn
-            :disabled="loading"
-            icon
-            @click="submitSharedSecret"
+    <template v-else-if="$apollo.queries.sharedSecretStatus.loading">
+      <v-card-title>{{ $t("maka.shared_secret.checking") }}</v-card-title>
+      <v-card-text class="d-flex align-center justify-center">
+        <v-progress-circular
+          indeterminate
+          color="primary"
+        />
+      </v-card-text>
+    </template>
+    <template v-else>
+      <v-card-title>
+        <v-avatar>
+          <v-icon color="warning">$warning</v-icon>
+        </v-avatar>
+        {{ $t("maka.shared_secret.enter") }}
+      </v-card-title>
+      <v-card-text>
+        <form @submit.prevent="submitSharedSecret">
+          <v-text-field
+            v-model="sharedSecret"
+            :loading="loading"
+            type="password"
+            :error-messages="errorMessages"
+            outlined
+            :label="$t('maka.shared_secret.title')"
           >
-            <v-icon color="primary">
-              mdi-send-outline
-            </v-icon>
-          </v-btn>
-        </template>
-      </v-text-field>
-    </div>
-  </div>
+            <template #append>
+              <v-btn
+                type="submit"
+                :disabled="loading"
+                icon
+                small
+                right
+              >
+                <v-icon color="primary">
+                  $send
+                </v-icon>
+              </v-btn>
+            </template>
+          </v-text-field>
+        </form>
+      </v-card-text>
+    </template>
+  </v-card>
 </template>
   
   <script>