From 71e114d0492b91597ea4951e139a9f9a7f8b3b82 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 11 May 2022 20:47:21 -0500
Subject: [PATCH] SiteLogo: fall back to Soapbox logo instead of Tabler's
 home.svg

---
 app/images/soapbox-logo-white.svg    | 1 +
 app/soapbox/components/site-logo.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 app/images/soapbox-logo-white.svg

diff --git a/app/images/soapbox-logo-white.svg b/app/images/soapbox-logo-white.svg
new file mode 100644
index 000000000..f09e910ea
--- /dev/null
+++ b/app/images/soapbox-logo-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95" width="100" height="100"><path d="M94.909 19.374C94.909 8.674 86.235 0 75.534 0c-10.647 0-19.28 8.591-19.365 19.217l-15.631 2.09c-1.961-6.007-7.598-10.35-14.258-10.35-8.284 0-15.002 6.716-15.002 15.002 0 6.642 4.321 12.267 10.303 14.24l-2.205 16.056c-10.66.049-19.285 8.7-19.285 19.37C.091 86.325 8.765 95 19.466 95c10.677 0 19.332-8.638 19.37-19.304l18.093-2.501c1.979 5.972 7.598 10.285 14.234 10.285 8.284 0 15.002-6.716 15.002-15.002 0-6.891-4.652-12.682-10.983-14.441l1.365-15.339c10.229-.53 18.363-8.966 18.363-19.324zM56.194 67.8l-18.116 2.505a19.39 19.39 0 0 0-13.312-13.3l2.205-16.077a14.98 14.98 0 0 0 14.27-14.222l15.655-2.094c1.894 6.757 7.351 12.009 14.225 13.612l-1.365 15.322c-7.4.688-13.224 6.753-13.562 14.254z" fill="#ffffff"/></svg>
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 9e05b2490..8a614d08c 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -11,14 +11,19 @@ const SiteLogo: React.FC<React.ComponentProps<'img'>> = (props) => {
   const userTheme = settings.get('themeMode');
   const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
 
+  /** Soapbox logo. */
+  const soapboxLogo = darkMode
+    ? require('images/soapbox-logo-white.svg')
+    : require('images/soapbox-logo.svg');
+
   // Use the right logo if provided, then use fallbacks.
   const getSrc = () => {
     // In demo mode, use the Soapbox logo.
-    if (settings.get('demo')) return require('images/soapbox-logo.svg');
+    if (settings.get('demo')) return soapboxLogo;
 
     return (darkMode && logoDarkMode)
       ? logoDarkMode
-      : logo || logoDarkMode || require('@tabler/icons/icons/home.svg');
+      : logo || logoDarkMode || soapboxLogo;
   };
 
   return (