feat: унифицировал и обновил модалки

frontend/src/components/layout/AppTopbar.vue

@@ -175,17 +175,13 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <ModalDialog v-model="isCoinDialogOpen">
-      <div class="coin-dialog-content">
-        <div class="coin-dialog-title">
-          <AppIcon class="coin-dialog-icon" icon="coin" :size="22" />
-          <span>Монеты UniVerse</span>
-        </div>
-        <p>
-          В будущем монеты можно будет использовать во внутреннем магазине. Сейчас магазин еще не запущен, поэтому монеты просто копятся на вашем балансе.
-        </p>
-        <button class="btn-primary coin-dialog-ok" type="button" @click="closeCoinDialog">ОК</button>
-      </div>
+    <ModalDialog v-model="isCoinDialogOpen" title="Монеты UniVerse" icon="coin" size="sm">
+      <p>
+        В будущем монеты можно будет использовать во внутреннем магазине. Сейчас магазин еще не запущен, поэтому монеты просто копятся на вашем балансе.
+      </p>
+      <template #footer>
+        <button class="btn-primary" type="button" @click="closeCoinDialog">ОК</button>
+      </template>
     </ModalDialog>
   </header>
 </template>
@@ -232,36 +228,6 @@ onBeforeUnmount(() => {
   gap: 12px;
   flex-shrink: 0;
 }
-.coin-dialog-content {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 14px;
-}
-.coin-dialog-title {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  color: var(--color-text);
-  font-size: 17px;
-  font-weight: 800;
-}
-.coin-dialog-icon {
-  flex: 0 0 auto;
-  color: var(--color-coin-chip-text);
-}
-.coin-dialog-content p {
-  margin: 0;
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  line-height: 1.5;
-}
-.coin-dialog-ok {
-  min-width: 92px;
-  align-self: center;
-  justify-content: center;
-  margin-top: 2px;
-}
 .level-chip {
   display: inline-flex;
   align-items: center;