update welcome window

src/components/WelcomeGameBlock.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
+import MessagePaper from './MessagePaper.vue';
 
 interface QROptions {
   width?: number;
@@ -15,7 +16,7 @@ const qrOptions = ref<QROptions>({
   margin: 1,
   color: {
     dark: '#303030',
-    light: 'f0f0f0'
+    light: 'none'
   }
 });
 
@@ -29,15 +30,17 @@ const props = withDefaults(defineProps<Props>(), {})
 
 <template>
   <div>
-    <div class="qr">
-      <div>
-        {{ team }}
+    <MessagePaper>
+      <div class="qr">
+        <div class="team-name">
+          {{ team }}
+        </div>
+        <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
+        <div class="message">
+          Пора решать загадку
+        </div>
       </div>
-      <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
-      <div>
-        Пора решать загадку
-      </div>
-    </div>
+    </MessagePaper>
   </div>
 </template>
 
@@ -46,4 +49,13 @@ const props = withDefaults(defineProps<Props>(), {})
   text-align: center;
   width: 200px;
 }
+
+.team-name {
+  margin: 10px 0;
+  font-size: 20px;
+}
+
+.message {
+  margin: 7px 0;
+}
 </style>