From 2911d98276ef79c36059196d8570b4df56fbaa77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Wed, 22 Apr 2026 13:47:59 +0400
Subject: [PATCH] Add branding to cookie banner theme preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also fix branding spacing with proper padding-top.

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../snippet/_components/ThemePreview.tsx      | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
index 66b10e76b..cc90d932c 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
@@ -181,7 +181,7 @@ function BannerPreview() {
         lineHeight: 1.5,
         maxWidth: 450,
         width: "100%",
-        padding: 24,
+        padding: "24px 24px 12px 24px",
       }}
     >
       <p
@@ -212,7 +212,7 @@ function BannerPreview() {
           Privacy Policy
         </a>
       </p>
-      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", paddingBottom: "12px" }}>
         <span>
           <button
             type="button"
@@ -275,6 +275,36 @@ function BannerPreview() {
           </button>
         </span>
       </div>
+      <div
+        style={{
+          textAlign: "center",
+          fontSize: "calc(var(--probo-font-size, 14px) - 2px)",
+          fontWeight: 400,
+          color: "var(--probo-text-secondary, #555555)",
+        }}
+      >
+        Powered by
+        {" "}
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 25 24" fill="none" aria-hidden="true" style={{ verticalAlign: "-2px", display: "inline" }}>
+          <g clipPath="url(#pc-preview)">
+            <rect width="24" height="24" x=".85" fill="currentColor" rx="5.14" />
+            <path stroke="#fff" strokeWidth="3.53" d="M20.57 6.17c2.96 4.47-6.43 13.97-20.32 5.66" />
+            <path stroke="url(#pg-preview)" strokeWidth="3.53" d="M20.57 6.17c2.96 4.47-6.43 13.97-20.32 5.66" />
+            <path fill="#fff" d="M19.07 7.1a1.77 1.77 0 0 0 3-1.86l-1.5.93-1.5.94ZM8.82 25.18l1.71-.41c-2.3-9.67.01-14.66 2.54-16.83A6.25 6.25 0 0 1 17 6.33c1.22-.01 1.87.44 2.08.78l1.5-.94 1.5-.93c-1.1-1.74-3.16-2.46-5.13-2.44-2.03.03-4.26.81-6.17 2.45-3.9 3.35-6.16 9.92-3.67 20.33l1.72-.41Z" />
+          </g>
+          <defs>
+            <linearGradient id="pg-preview" x1="18.77" x2="1.2" y1="13.56" y2="13.56" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#101E1C" stopOpacity="0" />
+              <stop offset="1" stopColor="#fff" />
+            </linearGradient>
+            <clipPath id="pc-preview">
+              <rect width="24" height="24" x=".85" fill="#fff" rx="5.14" />
+            </clipPath>
+          </defs>
+        </svg>
+        {" "}
+        Probo
+      </div>
     </div>
   );
 }