rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Use full Probo logo (picto + wordmark) in cookie banner branding

Browse Source 
Replace the picto-only SVG with the full Logo component in both the
console theme preview and the cookie-banner web component.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-22 15:49:56 +04:00
parent 4313930ae9
commit 72443ff32f
2 changed files with 4 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
View File

@@ -13,7 +13,7 @@
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Button, Card, Field, Input, useToast } from "@probo/ui";
import { Button, Card, Field, Input, Logo, useToast } from "@probo/ui";
import { useCallback, useMemo, useState } from "react";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -302,25 +302,7 @@ function BannerPreview({ showBranding }: { showBranding: boolean }) {
>
Privacy 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
<Logo withPicto className="inline h-3.5 align-[-3px]" />
</div>
)}
</div>

4
packages/cookie-banner/src/html.ts
View File

@@ -20,6 +20,6 @@ export const COOKIE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" h
export const LOCK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
const PROBO_LOGO = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 25 24" fill="none" aria-hidden="true"><g clip-path="url(#pc)"><rect width="24" height="24" x=".85" fill="currentColor" rx="5.14"/><path stroke="#fff" stroke-width="3.53" d="M20.57 6.17c2.96 4.47-6.43 13.97-20.32 5.66"/><path stroke="url(#pg)" stroke-width="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" x1="18.77" x2="1.2" y1="13.56" y2="13.56" gradientUnits="userSpaceOnUse"><stop stop-color="#101E1C" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><clipPath id="pc"><rect width="24" height="24" x=".85" fill="#fff" rx="5.14"/></clipPath></defs></svg>`;
const PROBO_LOGO = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="14" viewBox="0 0 90 24" aria-hidden="true"><g clip-path="url(#pc)"><rect width="24" height="24" x=".85" fill="currentColor" rx="5.14"/><path stroke="#fff" stroke-width="3.53" d="M20.57 6.17c2.96 4.47-6.43 13.97-20.32 5.66"/><path stroke="url(#pg)" stroke-width="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><path fill="currentColor" d="M66.87 0v7.32a4.84 4.84 0 0 1 1.48-.74 5.63 5.63 0 0 1 1.76-.28c1.63 0 3 .55 4.1 1.68a5.5 5.5 0 0 1 1.67 4.06c0 1.6-.56 2.93-1.69 4.06a5.49 5.49 0 0 1-4.08 1.69 5.8 5.8 0 0 1-4.06-1.56 5.48 5.48 0 0 1-1.71-4.27V0h2.53Zm3.24 8.72a3.2 3.2 0 0 0-3.24 3.32 3.18 3.18 0 0 0 3.24 3.32 3.2 3.2 0 0 0 3.24-3.32c0-1.9-1.43-3.32-3.24-3.32ZM52.75 7.98a5.53 5.53 0 0 1 4.08-1.68c1.61 0 2.93.55 4.06 1.68a5.51 5.51 0 0 1 1.69 4.06c0 1.58-.55 2.95-1.69 4.09a5.59 5.59 0 0 1-4.06 1.66 5.64 5.64 0 0 1-4.08-1.66 5.53 5.53 0 0 1-1.69-4.09c0-1.6.56-2.92 1.7-4.06Zm.84 4.06c0 .98.32 1.77.93 2.4.63.6 1.4.92 2.31.92.92 0 1.7-.31 2.3-.92.63-.64.94-1.42.94-2.4 0-.97-.31-1.76-.94-2.37a3.03 3.03 0 0 0-2.3-.95 3.22 3.22 0 0 0-3.24 3.32ZM79.32 7.98A5.53 5.53 0 0 1 83.4 6.3c1.6 0 2.93.55 4.06 1.68a5.51 5.51 0 0 1 1.69 4.06c0 1.58-.56 2.95-1.7 4.09a5.59 5.59 0 0 1-4.05 1.66 5.64 5.64 0 0 1-4.08-1.66 5.53 5.53 0 0 1-1.69-4.09c0-1.6.55-2.92 1.69-4.06Zm.84 4.06c0 .98.32 1.77.92 2.4.64.6 1.4.92 2.32.92.92 0 1.69-.31 2.3-.92.63-.64.94-1.42.94-2.4 0-.97-.31-1.76-.95-2.37a3.03 3.03 0 0 0-2.29-.95 3.22 3.22 0 0 0-3.24 3.32ZM34.24 16.76V24h-2.53V12.12c0-1.82.58-3.24 1.71-4.27a5.87 5.87 0 0 1 4.06-1.55c1.56 0 2.98.55 4.08 1.68a5.51 5.51 0 0 1 1.7 4.06 5.66 5.66 0 0 1-5.77 5.75 5.43 5.43 0 0 1-2.88-.77l-.36-.26Zm3.24-8.04a3.2 3.2 0 0 0-3.24 3.32c0 1.9 1.42 3.32 3.24 3.32a3.2 3.2 0 0 0 3.24-3.32 3.2 3.2 0 0 0-3.24-3.32ZM47.4 17.65h-2.5v-6.7c0-3.23 1.82-4.52 4.27-4.52h.6v2.42h-.47c-1.26 0-1.9.71-1.9 2.1v6.7Z"/><defs><linearGradient id="pg" x1="18.77" x2="1.2" y1="13.56" y2="13.56" gradientUnits="userSpaceOnUse"><stop stop-color="#101E1C" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><clipPath id="pc"><rect width="24" height="24" x=".85" fill="#fff" rx="5.14"/></clipPath></defs></svg>`;
export const BRANDING = `<div class="branding" data-branding><a href="https://www.getprobo.com" target="_blank" rel="noopener noreferrer">Privacy by ${PROBO_LOGO} Probo</a></div>`;
export const BRANDING = `<div class="branding" data-branding><a href="https://www.getprobo.com" target="_blank" rel="noopener noreferrer">Privacy by ${PROBO_LOGO}</a></div>`;