From deee031196555350bedbc243f26515191ed5848e Mon Sep 17 00:00:00 2001
From: FTCHD <144691102+FTCHD@users.noreply.github.com>
Date: Sun, 12 Jul 2026 01:27:29 +0300
Subject: [PATCH] update notification icons

---
 lib/notifications.ts                        |  2 +-
 src/components/icons/ProviderIcon.tsx       | 34 ++++++++++++++++++---
 src/pages/Settings/NotificationsSection.tsx | 15 +++------
 tailwind.config.js                          |  1 +
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/lib/notifications.ts b/lib/notifications.ts
index 0932e24..c90638e 100644
--- a/lib/notifications.ts
+++ b/lib/notifications.ts
@@ -196,7 +196,7 @@ export const NOTIFICATION_PROVIDERS: Record<
         titleLabel: 'Discord Webhook',
         description: 'Post to a Discord channel',
         urlPlaceholder: 'https://discord.com/api/webhooks/1234567890/AbCdEf...',
-        accentClass: 'text-indigo-500',
+        accentClass: 'text-[#5865F2]',
         helpUrl: 'https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks',
         helpLabel: 'How to create a webhook',
     },
diff --git a/src/components/icons/ProviderIcon.tsx b/src/components/icons/ProviderIcon.tsx
index e15891c..4715c50 100644
--- a/src/components/icons/ProviderIcon.tsx
+++ b/src/components/icons/ProviderIcon.tsx
@@ -20,8 +20,9 @@ export default function ProviderIcon({
     return <WebhookIcon className={className} />
 }
 
-// Inline monochrome brand glyphs (path data from simple-icons, CC0). Bundled SVG instead of
-// public/ PNGs so they follow currentColor and theme correctly in light/dark.
+// Inline brand glyphs bundled as SVG (not public/ PNGs). The monochrome marks (Discord, Telegram,
+// WhatsApp, Webhook) use currentColor so they take their tint from the caller's text-color class
+// and theme correctly; Slack keeps its official four-color logo.
 
 function DiscordIcon({ className }: { className?: string }) {
     return (
@@ -31,7 +32,7 @@ function DiscordIcon({ className }: { className?: string }) {
     )
 }
 
-function TelegramIcon({ className }: { className?: string }) {
+export function TelegramIcon({ className }: { className?: string }) {
     return (
         <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
             <path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
@@ -39,10 +40,33 @@ function TelegramIcon({ className }: { className?: string }) {
     )
 }
 
-function SlackIcon({ className }: { className?: string }) {
+export function WhatsAppIcon({ className }: { className?: string }) {
     return (
         <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
-            <path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.523A2.528 2.528 0 010 15.165a2.527 2.527 0 012.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 012.521-2.52 2.527 2.527 0 012.521 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.521H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 012.522-2.521A2.528 2.528 0 0124 8.834a2.528 2.528 0 01-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 01-2.523 2.521 2.527 2.527 0 01-2.52-2.521V2.522A2.527 2.527 0 0115.165 0a2.528 2.528 0 012.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 012.523 2.522A2.528 2.528 0 0115.165 24a2.527 2.527 0 01-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 01-2.52-2.523 2.526 2.526 0 012.52-2.52h6.313A2.527 2.527 0 0124 15.165a2.528 2.528 0 01-2.522 2.523h-6.313z" />
+            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z" />
+        </svg>
+    )
+}
+
+function SlackIcon({ className }: { className?: string }) {
+    return (
+        <svg viewBox="0 0 122.8 122.8" className={className} aria-hidden="true">
+            <path
+                d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
+                fill="#E01E5A"
+            />
+            <path
+                d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
+                fill="#36C5F0"
+            />
+            <path
+                d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
+                fill="#2EB67D"
+            />
+            <path
+                d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
+                fill="#ECB22E"
+            />
         </svg>
     )
 }
diff --git a/src/pages/Settings/NotificationsSection.tsx b/src/pages/Settings/NotificationsSection.tsx
index 30e5e59..5cf0b61 100644
--- a/src/pages/Settings/NotificationsSection.tsx
+++ b/src/pages/Settings/NotificationsSection.tsx
@@ -14,14 +14,7 @@ import {
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { ask, message } from '@tauri-apps/plugin-dialog'
 import { platform } from '@tauri-apps/plugin-os'
-import {
-    MessageCircleIcon,
-    PencilIcon,
-    SendIcon,
-    SettingsIcon,
-    Trash2Icon,
-    TriangleAlertIcon,
-} from 'lucide-react'
+import { PencilIcon, SendIcon, SettingsIcon, Trash2Icon, TriangleAlertIcon } from 'lucide-react'
 import { type ReactNode, useMemo, useState } from 'react'
 import {
     FREE_MAX_TARGETS,
@@ -40,7 +33,7 @@ import type {
     NotificationTarget,
 } from '../../../types/notifications'
 import NotificationTargetDrawer from '../../components/NotificationTargetDrawer'
-import ProviderIcon from '../../components/icons/ProviderIcon'
+import ProviderIcon, { TelegramIcon, WhatsAppIcon } from '../../components/icons/ProviderIcon'
 import BaseSection from './BaseSection'
 
 const PROVIDER_ORDER: NotificationProvider[] = ['discord', 'slack', 'telegram', 'webhook']
@@ -100,7 +93,7 @@ export default function NotificationsSection() {
                         <DummyProviderCard
                             label="Telegram (bot-less)"
                             description="Get messages without your own bot"
-                            icon={<SendIcon className="text-sky-500 size-8 shrink-0" />}
+                            icon={<TelegramIcon className="text-sky-500 size-8 shrink-0" />}
                             onPress={() =>
                                 message(
                                     'Telegram without your own bot is coming in v4. Upgrade to v4 to use it.',
@@ -111,7 +104,7 @@ export default function NotificationsSection() {
                         <DummyProviderCard
                             label="WhatsApp"
                             description="Get messages on WhatsApp"
-                            icon={<MessageCircleIcon className="text-green-500 size-8 shrink-0" />}
+                            icon={<WhatsAppIcon className="text-green-500 size-8 shrink-0" />}
                             onPress={() =>
                                 message(
                                     'WhatsApp notifications are coming in v4. Upgrade to v4 to use them.',
diff --git a/tailwind.config.js b/tailwind.config.js
index c30cc49..64cee47 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ export default {
     content: [
         './index.html',
         './src/**/*.{js,ts,jsx,tsx}',
+        './lib/**/*.{js,ts,jsx,tsx}',
         './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
     ],
     theme: {