From 48339cfd94a02b7f05c7f5dea4d05baac29d621c Mon Sep 17 00:00:00 2001 From: metodi96 Date: Fri, 15 May 2026 11:27:43 +0300 Subject: [PATCH] fix(share-pnl): render brand mark only across all covers Covers 2 (orange) and 3 (lavender) were drawing the full mark+wordmark logo while cover 1 (dark navy) appeared mark-only because its wordmark color blended into the background. Crop the SVG to the 32x32 mark on every cover so the three previews are visually consistent. Drop the now-unused logo-dark.svg asset and the per-palette logo variant field. --- src/assets/icons/logo-dark.svg | 4 --- .../single-lease/SharePnLDialog.vue | 33 ++++++++----------- 2 files changed, 14 insertions(+), 23 deletions(-) delete mode 100644 src/assets/icons/logo-dark.svg diff --git a/src/assets/icons/logo-dark.svg b/src/assets/icons/logo-dark.svg deleted file mode 100644 index 3f352104c..000000000 --- a/src/assets/icons/logo-dark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/modules/leases/components/single-lease/SharePnLDialog.vue b/src/modules/leases/components/single-lease/SharePnLDialog.vue index 81b441f6b..325155d7e 100644 --- a/src/modules/leases/components/single-lease/SharePnLDialog.vue +++ b/src/modules/leases/components/single-lease/SharePnLDialog.vue @@ -90,8 +90,7 @@ import { useI18n } from "vue-i18n"; import shareImageTwo from "@/assets/icons/share-image-2.png?url"; import shareImageThree from "@/assets/icons/share-image-3.png?url"; import shareImageFour from "@/assets/icons/share-image-4.png?url"; -import logoLight from "@/assets/icons/logo-light.svg?url"; -import logoDark from "@/assets/icons/logo-dark.svg?url"; +import nolusLogo from "@/assets/icons/logo-light.svg?url"; import type { LeaseInfo } from "@/common/api"; import type { LeaseDisplayData } from "@/common/stores/leases"; import { NATIVE_CURRENCY } from "@/config/global"; @@ -114,16 +113,15 @@ const showPositionSize = ref(true); type Palette = { text: string; muted: string; - logo: "light" | "dark"; }; -// Per-cover palette covers text + logo variant only. PnL colors are a single -// brand pair (PNL_POSITIVE / PNL_NEGATIVE) used on every cover for visual +// Per-cover palette covers text colors only. PnL colors are a single brand +// pair (PNL_POSITIVE / PNL_NEGATIVE) used on every cover for visual // consistency across the share library. const palettes: Palette[] = [ - { text: "#FFFFFF", muted: "#C1CAD7", logo: "light" }, // dark navy illustration - { text: "#082D63", muted: "#5E7699", logo: "dark" }, // orange - { text: "#082D63", muted: "#5E7699", logo: "dark" } // light lavender + { text: "#FFFFFF", muted: "#C1CAD7" }, // dark navy illustration + { text: "#082D63", muted: "#5E7699" }, // orange + { text: "#082D63", muted: "#5E7699" } // light lavender ]; const PNL_POSITIVE = "#1AB171"; @@ -392,23 +390,20 @@ function setPositionMetaRow(ctx: CanvasRenderingContext2D) { } } -// Render the Nolus logo (mark + wordmark) top-left of the canvas. Uses -// logo-light.svg on dark covers, logo-dark.svg on light covers. The logo SVG -// is 126x32 native; rendered at 2x = 252x64. Awaited so the image.onload -// paints before the next render's setBackground overwrites the bitmap. +// Render the Nolus brand mark top-left of the canvas. The source SVG is +// 126x32 with the 32x32 mark on the left followed by the "nolus" wordmark; +// we crop to the mark only so every cover shows the same compact glyph +// (the wordmark would blend into the dark navy cover anyway). Awaited so +// image.onload paints before the next render's setBackground overwrites +// the bitmap. async function setLogo(ctx: CanvasRenderingContext2D) { - const variant = palette().logo; - const src = variant === "light" ? logoLight : logoDark; - const image = new Image(); - const data = await fetch(src); + const data = await fetch(nolusLogo); const blob = await data.blob(); return new Promise((resolve) => { image.onload = () => { - const w = 252; - const h = 64; - ctx.drawImage(image, 80, 80, w, h); + ctx.drawImage(image, 0, 0, 32, 32, 80, 80, 64, 64); resolve(); }; image.src = window.URL.createObjectURL(blob);