From 2a3a3c21bac0472db77502c9a110f1455fe9fead Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Mon, 25 May 2026 12:42:17 +0300
Subject: [PATCH] chore: adjust webapp payment layout

---
 .../patterns/webapp/PaymentMethodGrid.svelte          |  6 +++++-
 frontend/src/preview/PreviewMethods.svelte            |  6 +++++-
 frontend/src/styles/webapp.css                        | 11 ++++++++---
 .../src/webapp/screens/TrialActivationScreen.svelte   |  3 ++-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/patterns/webapp/PaymentMethodGrid.svelte b/frontend/src/lib/components/patterns/webapp/PaymentMethodGrid.svelte
index 95a6ff3..7ad6b3e 100644
--- a/frontend/src/lib/components/patterns/webapp/PaymentMethodGrid.svelte
+++ b/frontend/src/lib/components/patterns/webapp/PaymentMethodGrid.svelte
@@ -16,7 +16,11 @@
   }
 </script>
 
-<div class="method-grid">
+<div
+  class:method-grid-single={methods.length === 1}
+  class:method-grid-many={methods.length > 2}
+  class="method-grid"
+>
   {#each methods as method}
     {@const icon = methodIcon(method)}
     <button
diff --git a/frontend/src/preview/PreviewMethods.svelte b/frontend/src/preview/PreviewMethods.svelte
index 9bfdc7c..f9439ae 100644
--- a/frontend/src/preview/PreviewMethods.svelte
+++ b/frontend/src/preview/PreviewMethods.svelte
@@ -13,7 +13,11 @@
   }
 </script>
 
-<div class="method-grid">
+<div
+  class:method-grid-single={methods.length === 1}
+  class:method-grid-many={methods.length > 2}
+  class="method-grid"
+>
   {#each methods as method, index}
     <div class:active={index === 1} class="method-card">
       <svelte:component this={icons[index] || WalletCards} size={18} />
diff --git a/frontend/src/styles/webapp.css b/frontend/src/styles/webapp.css
index 61e199d..fdc0dff 100644
--- a/frontend/src/styles/webapp.css
+++ b/frontend/src/styles/webapp.css
@@ -474,9 +474,7 @@ a {
 
 .trial-offer-card {
   border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
-  background:
-    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 48%),
-    linear-gradient(135deg, var(--surface-sheen), var(--surface-sheen-soft));
+  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
 }
 
 .trial-card-head {
@@ -700,6 +698,7 @@ a {
   min-height: 82px;
   place-items: center;
   gap: 4px;
+  background: var(--surface-muted);
   padding: 10px 8px;
 }
 
@@ -758,6 +757,12 @@ a {
   gap: 8px;
 }
 
+.method-grid-single .method-card,
+.method-grid-many .method-card:first-child,
+.method-grid-many .method-card:last-child:nth-child(even) {
+  grid-column: 1 / -1;
+}
+
 .option-list {
   display: grid;
   gap: 8px;
diff --git a/frontend/src/webapp/screens/TrialActivationScreen.svelte b/frontend/src/webapp/screens/TrialActivationScreen.svelte
index f90c5e6..8db2a07 100644
--- a/frontend/src/webapp/screens/TrialActivationScreen.svelte
+++ b/frontend/src/webapp/screens/TrialActivationScreen.svelte
@@ -169,10 +169,11 @@
     font-size: 25px;
   }
 
-  :global(.trial-activation-card) {
+  :global(.card.trial-activation-card) {
     display: grid;
     justify-items: center;
     gap: 14px;
+    background: color-mix(in srgb, var(--accent) 6%, var(--panel));
     padding: 20px 16px 18px;
     text-align: center;
   }