chore: tune sub activate modal view

frontend/src/App.svelte

@@ -2051,10 +2051,8 @@
             onclose={closeActivationSuccessDialog}
             class="activation-success-dialog"
           >
+            <CheckCircle2 slot="titleIcon" size={23} />
             <div class="activation-success-dialog-body">
-              <div class="activation-success-mark" aria-hidden="true">
-                <CheckCircle2 size={34} />
-              </div>
               <Button class="wide" onclick={closeActivationSuccessDialog}>
                 {t("wa_ok", {}, "OK")}
               </Button>

frontend/src/lib/components/ui/dialog.svelte

@@ -50,9 +50,16 @@
     ></button>
     <section class={cn("dialog-card", className)} in:fly={cardIn} out:fly={cardOut}>
       <div class="dialog-head">
-        <div>
+        <div class:dialog-title-with-icon={$$slots.titleIcon} class="dialog-title-block">
-          {#if title}<h2>{title}</h2>{/if}
+          {#if $$slots.titleIcon}
-          {#if description}<p>{description}</p>{/if}
+            <span class="dialog-title-icon" aria-hidden="true">
+              <slot name="titleIcon" />
+            </span>
+          {/if}
+          <div class="dialog-title-copy">
+            {#if title}<h2>{title}</h2>{/if}
+            {#if description}<p>{description}</p>{/if}
+          </div>
         </div>
         <Button variant="icon" size="icon" onclick={onclose} aria-label={closeLabel}>
           <X size={18} />

frontend/src/styles/dialogs.css

@@ -50,6 +50,30 @@
   align-items: start;
 }
 
+.dialog-title-block {
+  min-width: 0;
+}
+
+.dialog-title-with-icon {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.dialog-title-icon {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  color: var(--accent);
+}
+
+.dialog-title-icon svg {
+  width: 23px;
+  height: 23px;
+}
+
 .dialog-head h2 {
   margin: 0;
   color: var(--text);
@@ -80,26 +104,23 @@
 
 .activation-success-dialog {
   width: min(100%, 440px);
+  gap: 22px;
+  padding: 22px 20px 20px;
+}
+
+.activation-success-dialog .dialog-title-with-icon {
+  gap: 14px;
+}
+
+.activation-success-dialog .dialog-head p {
+  margin-top: 8px;
+  line-height: 1.52;
 }
 
 .activation-success-dialog-body {
   display: grid;
   justify-items: center;
-  gap: 16px;
+  padding-top: 2px;
-}
-
-.activation-success-mark {
-  display: grid;
-  width: 70px;
-  height: 70px;
-  place-items: center;
-  border: 1px solid color-mix(in srgb, var(--success) 38%, transparent);
-  border-radius: 50%;
-  background:
-    radial-gradient(circle at 30% 25%, color-mix(in srgb, white 42%, transparent), transparent 34%),
-    color-mix(in srgb, var(--success) 16%, var(--panel));
-  color: var(--success);
-  box-shadow: 0 18px 38px color-mix(in srgb, var(--success) 20%, transparent);
 }
 
 .activation-success-dialog-body .btn {