From d370ee2d99083e9159bf9a194407a95d9440a8fd Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 25 Mar 2026 00:28:38 +0200
Subject: [PATCH] style/about dialog: select the icon using CSS class names

---
 apps/client/src/assets/icon-classic.svg        |  1 +
 .../assets/{icon-alt.svg => icon-nightly.svg}  |  0
 apps/client/src/widgets/dialogs/about.css      | 18 ++++++++++++++++++
 apps/client/src/widgets/dialogs/about.tsx      | 10 ++++++++--
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 apps/client/src/assets/icon-classic.svg
 rename apps/client/src/assets/{icon-alt.svg => icon-nightly.svg} (100%)

diff --git a/apps/client/src/assets/icon-classic.svg b/apps/client/src/assets/icon-classic.svg
new file mode 100644
index 0000000000..0fbc903d8a
--- /dev/null
+++ b/apps/client/src/assets/icon-classic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M63.966,45.043c0.008-0.009,0.021-0.021,0.027-0.029c0.938-1.156-0.823-13.453-5.063-20.125  c-1.389-2.186-2.239-3.423-3.219-4.719c-3.907-5.166-6-6.125-6-6.125S35.732,24.78,36.149,44.315  c-1.754,0.065-11.218,7.528-14.826,14.388c-1.206,2.291-1.856,3.645-2.493,5.141c-2.539,5.957-2.33,8.25-2.33,8.25  s16.271,6.79,33.014-3.294c0.007,0.021,0.013,0.046,0.02,0.063c0.537,1.389,12.08,5.979,19.976,5.621  c2.587-0.116,4.084-0.238,5.696-0.444c6.424-0.818,8.298-2.157,8.298-2.157S81.144,54.396,63.966,45.043z M50.787,65.343  c1.059-1.183,4.648-5.853,0.995-11.315c-0.253-0.377-0.496-0.236-0.496-0.236s0.063,10.822-5.162,12.359  c-5.225,1.537-13.886,4.4-20.427,0.455C25,66.186,26.924,53.606,38.544,47.229c0.546,1.599,2.836,6.854,9.292,6.409  c0.453-0.031,0.453-0.313,0.453-0.313s-9.422-5.328-8.156-10.625s3.089-14.236,9.766-17.948c0.714-0.397,10.746,7.593,10.417,20.94  c-1.606-0.319-7.377-1.004-10.226,4.864c-0.198,0.409,0.046,0.549,0.046,0.549s9.31-5.521,13.275-1.789  c3.965,3.733,10.813,9.763,10.71,17.4C74.111,67.533,62.197,72.258,50.787,65.343z M35.613,35.145c0,0-0.991,3.241-0.603,7.524  l-13.393-7.524C21.618,35.145,27.838,30.931,35.613,35.145z M21.193,36.03l13.344,7.612c-3.872,1.872-6.142,4.388-6.142,4.388  C20.78,43.531,21.193,36.03,21.193,36.03z M72.287,49.064c0,0-2.321-2.471-6.23-4.263l13.187-7.881  C79.243,36.92,79.808,44.413,72.287,49.064z M78.687,36.113l-13.237,7.794c0.3-4.291-0.754-7.511-0.754-7.511  C72.383,32.025,78.687,36.113,78.687,36.113z M42.076,73.778c0,0,3.309-0.737,6.845-3.185l0.056,15.361  C48.977,85.955,42.244,82.621,42.076,73.778z M49.956,85.888L50,70.526c3.539,2.445,6.846,3.181,6.846,3.181  C56.686,82.551,49.956,85.888,49.956,85.888z"></path></svg>
\ No newline at end of file
diff --git a/apps/client/src/assets/icon-alt.svg b/apps/client/src/assets/icon-nightly.svg
similarity index 100%
rename from apps/client/src/assets/icon-alt.svg
rename to apps/client/src/assets/icon-nightly.svg
diff --git a/apps/client/src/widgets/dialogs/about.css b/apps/client/src/widgets/dialogs/about.css
index ef98b26f78..20182f1104 100644
--- a/apps/client/src/widgets/dialogs/about.css
+++ b/apps/client/src/widgets/dialogs/about.css
@@ -10,6 +10,24 @@
 
     --bs-modal-width: 680px;
 
+    .icon {
+        width: 160px;
+        height: 160px;
+
+        &.icon-default {
+            background-image: url(../../assets/icon.svg);
+        }
+
+        &.icon-nightly {
+            background-image: url(../../assets/icon-nightly.svg);
+        }
+
+        &.icon-classic {
+            mask-image: url(../../assets/icon-classic.svg);
+            background-color: var(--muted-text-color);
+        }
+    }
+
     h2 {
         all: unset;
         font-size: 2em;
diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx
index b70f4ef7f5..b45cd19905 100644
--- a/apps/client/src/widgets/dialogs/about.tsx
+++ b/apps/client/src/widgets/dialogs/about.tsx
@@ -16,11 +16,13 @@ import { useCallback, useEffect } from "react";
 import contributors from "../../../../../contributors.json"; 
 import { Fragment } from "preact/jsx-runtime";
 import { ComponentChildren } from "preact";
+import clsx from "clsx";
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
     const [shown, setShown] = useState(false);
     const [isNightly, setNightly] = useState(false);
+    const [iconClassName, setIconClassName] = useState("icon-default");
 
     const onLoad = useCallback(async () => {
         if (!appInfo) {
@@ -33,17 +35,21 @@ export default function AboutDialog() {
 
     useEffect(() => {
         setNightly(!!appInfo?.appVersion.includes("test"));
+        if (isNightly) {
+            setIconClassName("icon-nightly");
+        }
     }, [appInfo])
 
     return (
         <Modal
-            className="about-dialog"
+            className={"about-dialog"}
             size="md"
             show={shown}
             onHidden={() => setShown(false)}
         >
            <div className="about-dialog-content">
-                <img src={(isNightly) ? iconAlt : icon} width="160" />
+               
+                <div className={clsx("icon", iconClassName)} />
                 <h2>Trilium Notes {isNightly && <span className="channel-name">Nightly</span>}</h2>
                 <a className="tn-link" href="https://triliumnotes.org/" target="_blank">
                     triliumnotes.org