From 161cce7381f4d5f6fdbc880950645b8dcb256cef Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 16 Oct 2026 10:17:15 -0300
Subject: [PATCH 1/2] Show official logos in the media source menu

Canva's brand guidelines require its official, unaltered icon wherever the
app interacts with Canva; the menu showed a Tabler look-alike "C". Canva,
Google Drive, Google Photos and Unsplash now use their logos from
@thesvg/vue. Each Canva size fits on one line: name, size and default.
---
 package-lock.json                             | 13 ++++
 package.json                                  |  1 +
 .../posts/composer/MediaSourceMenu.vue        | 75 +++++++++++--------
 tests/Browser/ComposerCanvaMenuTest.php       | 18 ++++-
 4 files changed, 70 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b3f40da9f..0d691da24a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
                 "@inertiajs/vue3": "^3.8.0",
                 "@tabler/icons-vue": "^3.49.0",
                 "@tailwindcss/typography": "^0.5.19",
+                "@thesvg/vue": "^3.4.0",
                 "@unovis/ts": "^1.7.0",
                 "@unovis/vue": "^1.7.0",
                 "@vueuse/core": "^12.8.2",
@@ -1902,6 +1903,18 @@
                 "vue": "^2.7.0 || ^3.0.0"
             }
         },
+        "node_modules/@thesvg/vue": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/@thesvg/vue/-/vue-3.4.0.tgz",
+            "integrity": "sha512-qKf/O0XQp4KIGYaf7rTRf1rYhdV1gN5mafnuVbMGS3P698K+v6o9/t2JKqM3jMcH1WF9mmCaEiBQ7rZWbsDZHw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "peerDependencies": {
+                "vue": ">=3.3"
+            }
+        },
         "node_modules/@tybys/wasm-util": {
             "version": "0.10.2",
             "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
diff --git a/package.json b/package.json
index 99c3e31806..4e1e30edcc 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
         "@inertiajs/vue3": "^3.8.0",
         "@tabler/icons-vue": "^3.49.0",
         "@tailwindcss/typography": "^0.5.19",
+        "@thesvg/vue": "^3.4.0",
         "@unovis/ts": "^1.7.0",
         "@unovis/vue": "^1.7.0",
         "@vueuse/core": "^12.8.2",
diff --git a/resources/js/components/posts/composer/MediaSourceMenu.vue b/resources/js/components/posts/composer/MediaSourceMenu.vue
index a5819f1d06..0acd2a0fbe 100644
--- a/resources/js/components/posts/composer/MediaSourceMenu.vue
+++ b/resources/js/components/posts/composer/MediaSourceMenu.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import {
-    IconBrandGoogleDrive,
-    IconBrandGooglePhotos,
-    IconBrandUnsplash,
-    IconCircleLetterCFilled,
-    IconPhotoPlus,
-    IconUpload,
-} from '@tabler/icons-vue';
+import { IconPhotoPlus, IconUpload } from '@tabler/icons-vue';
+import Canva from '@thesvg/vue/canva';
+import GoogleDrive from '@thesvg/vue/google-drive-2026';
+import GooglePhotos from '@thesvg/vue/google-photos';
+import Unsplash from '@thesvg/vue/unsplash';
 import { getActiveLanguage, trans } from 'laravel-vue-i18n';
-import { computed, onBeforeUnmount, ref, type Component } from 'vue';
+import {
+    computed,
+    h,
+    onBeforeUnmount,
+    ref,
+    type Component,
+    type FunctionalComponent,
+} from 'vue';
 import { toast } from 'vue-sonner';
 
 import {
@@ -61,11 +65,15 @@ const emit = defineEmits<{
     (event: 'upload'): void;
 }>();
 
+/** Unsplash's logo is black; drawn in the text color so it shows in dark mode. */
+const UnsplashLogo: FunctionalComponent = (_, { attrs }) =>
+    h(Unsplash, { ...attrs, fill: 'currentColor' });
+
 const ICONS: Record<SourceKey, Component> = {
-    canva: IconCircleLetterCFilled,
-    google_drive: IconBrandGoogleDrive,
-    google_photos: IconBrandGooglePhotos,
-    unsplash: IconBrandUnsplash,
+    canva: Canva,
+    google_drive: GoogleDrive,
+    google_photos: GooglePhotos,
+    unsplash: UnsplashLogo,
 };
 
 const page = usePage();
@@ -273,29 +281,30 @@ const pickCanvaPreset = (
                                 :data-testid="`canva-preset-${preset.value}`"
                                 @select="pickCanvaPreset(option, preset.value)"
                             >
-                                <span class="flex flex-col">
-                                    <span class="flex items-center gap-1.5">
-                                        {{
-                                            $t(
-                                                `posts.composer.media_sources.canva_presets.${preset.value}`,
-                                            )
-                                        }}
-                                        <span
-                                            v-if="preset.is_default"
-                                            class="text-xs text-muted-foreground"
-                                            :data-testid="`canva-preset-${preset.value}-default`"
-                                        >
-                                            ({{
-                                                $t(
-                                                    'posts.composer.media_sources.canva_default',
-                                                )
-                                            }})
-                                        </span>
-                                    </span>
+                                <span
+                                    class="flex items-baseline gap-1.5 whitespace-nowrap"
+                                >
+                                    {{
+                                        $t(
+                                            `posts.composer.media_sources.canva_presets.${preset.value}`,
+                                        )
+                                    }}
                                     <span
                                         class="text-xs text-muted-foreground tabular-nums"
                                     >
-                                        {{ preset.width }} × {{ preset.height }}
+                                        ({{ preset.width }}×{{ preset.height }})
+                                        <template v-if="preset.is_default">
+                                            ·
+                                            <span
+                                                :data-testid="`canva-preset-${preset.value}-default`"
+                                            >
+                                                {{
+                                                    $t(
+                                                        'posts.composer.media_sources.canva_default',
+                                                    )
+                                                }}
+                                            </span>
+                                        </template>
                                     </span>
                                 </span>
                             </DropdownMenuItem>
diff --git a/tests/Browser/ComposerCanvaMenuTest.php b/tests/Browser/ComposerCanvaMenuTest.php
index 61cc11752e..b8271c98b9 100644
--- a/tests/Browser/ComposerCanvaMenuTest.php
+++ b/tests/Browser/ComposerCanvaMenuTest.php
@@ -78,15 +78,25 @@ function openComposerWithOnlyCanva(mixed $test): array
         ->toBe(['canva-preset-square', 'canva-preset-portrait_4_5', 'canva-preset-portrait_3_4', 'canva-preset-landscape', 'canva-preset-story']);
 
     $page->assertSeeIn('@canva-preset-square', 'Square 1:1')
-        ->assertSeeIn('@canva-preset-square', '1200 × 1200')
+        ->assertSeeIn('@canva-preset-square', '(1200×1200)')
         ->assertPresent('@canva-preset-square-default')
-        ->assertSeeIn('@canva-preset-portrait_4_5', '1080 × 1350')
-        ->assertSeeIn('@canva-preset-landscape', '1200 × 627')
-        ->assertSeeIn('@canva-preset-story', '1080 × 1920')
+        ->assertSeeIn('@canva-preset-portrait_4_5', '(1080×1350)')
+        ->assertSeeIn('@canva-preset-landscape', '(1200×627)')
+        ->assertSeeIn('@canva-preset-story', '(1080×1920)')
         ->assertNotPresent('@canva-preset-story-default')
         ->assertNoJavaScriptErrors();
 });
 
+test('the Canva entry shows the official Canva logo', function () {
+    ['page' => $page] = openComposerWithOnlyCanva($this);
+
+    $page->click('@composer-base-media-source-menu');
+    waitForComposerCanvaTestId($page, 'media-source-canva');
+
+    $page->assertPresent('[data-testid="media-source-canva"] svg path[fill="#7D2AE7"]')
+        ->assertNoJavaScriptErrors();
+});
+
 /**
  * Stubs window.open, picks `$preset` from the Canva submenu and returns the
  * nonce the composer put on the popup URL. `$severed` makes the stub

From 14a08c1d9640ece6e7a9f9450f05e5d324421a6d Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 16 Oct 2026 10:20:48 -0300
Subject: [PATCH 2/2] Draw one-color brand logos in the text color through a
 shared helper

---
 AGENTS.md                                        |  1 +
 .../posts/composer/MediaSourceMenu.vue           | 16 +++-------------
 resources/js/lib/brandLogos.ts                   | 11 +++++++++++
 tests/Browser/ComposerMediaSourcesTest.php       |  2 ++
 4 files changed, 17 insertions(+), 13 deletions(-)
 create mode 100644 resources/js/lib/brandLogos.ts

diff --git a/AGENTS.md b/AGENTS.md
index b9dc8bdf16..662de79a3d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -726,6 +726,7 @@ view turns a forgotten variable into a runtime-only failure.
 ## Icons (@tabler/icons-vue)
 
 - This project uses `@tabler/icons-vue` for all icons. NEVER use `lucide-vue-next`.
+- Brand logos come from `@thesvg/vue`, one import per logo (`import Canva from '@thesvg/vue/canva'`). A one-color logo that must follow the theme goes through `inTextColor()` (`resources/js/lib/brandLogos.ts`).
 - All Tabler icons are prefixed with `Icon`, e.g. `IconCheck`, `IconChevronRight`, `IconMail`.
 - Import icons from `@tabler/icons-vue`: `import { IconCheck, IconX } from '@tabler/icons-vue'`.
 - Browse available icons at https://tabler.io/icons
diff --git a/resources/js/components/posts/composer/MediaSourceMenu.vue b/resources/js/components/posts/composer/MediaSourceMenu.vue
index 0acd2a0fbe..b3387adf0e 100644
--- a/resources/js/components/posts/composer/MediaSourceMenu.vue
+++ b/resources/js/components/posts/composer/MediaSourceMenu.vue
@@ -6,14 +6,7 @@ import GoogleDrive from '@thesvg/vue/google-drive-2026';
 import GooglePhotos from '@thesvg/vue/google-photos';
 import Unsplash from '@thesvg/vue/unsplash';
 import { getActiveLanguage, trans } from 'laravel-vue-i18n';
-import {
-    computed,
-    h,
-    onBeforeUnmount,
-    ref,
-    type Component,
-    type FunctionalComponent,
-} from 'vue';
+import { computed, onBeforeUnmount, ref, type Component } from 'vue';
 import { toast } from 'vue-sonner';
 
 import {
@@ -36,6 +29,7 @@ import {
     type MediaImportPayload,
     useMediaImport,
 } from '@/composables/useMediaImport';
+import { inTextColor } from '@/lib/brandLogos';
 import { defaultCanvaPreset, openCanva } from '@/lib/mediaSources/canva';
 import {
     type GoogleDrivePick,
@@ -65,15 +59,11 @@ const emit = defineEmits<{
     (event: 'upload'): void;
 }>();
 
-/** Unsplash's logo is black; drawn in the text color so it shows in dark mode. */
-const UnsplashLogo: FunctionalComponent = (_, { attrs }) =>
-    h(Unsplash, { ...attrs, fill: 'currentColor' });
-
 const ICONS: Record<SourceKey, Component> = {
     canva: Canva,
     google_drive: GoogleDrive,
     google_photos: GooglePhotos,
-    unsplash: UnsplashLogo,
+    unsplash: inTextColor(Unsplash),
 };
 
 const page = usePage();
diff --git a/resources/js/lib/brandLogos.ts b/resources/js/lib/brandLogos.ts
new file mode 100644
index 0000000000..2fcbd27c40
--- /dev/null
+++ b/resources/js/lib/brandLogos.ts
@@ -0,0 +1,11 @@
+import { h, type Component, type FunctionalComponent } from 'vue';
+
+/**
+ * A one-color brand logo from @thesvg/vue drawn in the surrounding text
+ * color, so it follows the theme. For logos whose paths carry no fill of
+ * their own (Unsplash): a fill on a path still wins.
+ */
+export const inTextColor =
+    (logo: Component): FunctionalComponent =>
+    (_, { attrs }) =>
+        h(logo, { ...attrs, fill: 'currentColor' });
diff --git a/tests/Browser/ComposerMediaSourcesTest.php b/tests/Browser/ComposerMediaSourcesTest.php
index 8006075fa5..74bcb0ae4b 100644
--- a/tests/Browser/ComposerMediaSourcesTest.php
+++ b/tests/Browser/ComposerMediaSourcesTest.php
@@ -177,6 +177,8 @@ function enableOnlyUnsplashForMediaSources(int $apiStatus = 200): void
     expect($page->script("Array.from(document.querySelectorAll('[data-testid=\"composer-base-media-source-list\"] [data-testid^=\"media-source-\"]')).map((item) => item.dataset.testid)"))
         ->toBe(['media-source-upload', 'media-source-canva', 'media-source-unsplash']);
 
+    $page->assertPresent('[data-testid="media-source-unsplash"] svg[fill="currentColor"]');
+
     $page->click('@media-source-unsplash');
     waitForComposerMediaSourcesTestId($page, 'unsplash-dialog');