From 3310a6e01a4a5af2ed7c049ddef545d5802cc5bb Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Wed, 8 Jan 2025 16:30:36 +1030
Subject: [PATCH] fix: replace type icons with logos in ArrCard component

---
 .../src/components/settings/arrs/ArrCard.jsx    | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/settings/arrs/ArrCard.jsx b/frontend/src/components/settings/arrs/ArrCard.jsx
index 946b3f0..3f7d78c 100644
--- a/frontend/src/components/settings/arrs/ArrCard.jsx
+++ b/frontend/src/components/settings/arrs/ArrCard.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import {Film, Tv, Clock, ArrowUpDown, Timer, BarChart} from 'lucide-react';
+import {Clock, ArrowUpDown, BarChart} from 'lucide-react';
+import RadarrLogo from '@logo/Radarr.svg';
+import SonarrLogo from '@logo/Sonarr.svg';
 
 const ArrCard = ({
     title,
@@ -20,9 +22,6 @@ const ArrCard = ({
         return date.toLocaleString();
     };
 
-    // Get appropriate icon based on type
-    const TypeIcon = type === 'radarr' ? Film : Tv;
-
     // Get sync method display
     const getSyncMethodDisplay = () => {
         switch (sync_method) {
@@ -46,11 +45,17 @@ const ArrCard = ({
                  shadow-xl hover:shadow-2xl hover:border-blue-500/50 transition-all duration-200 
                  cursor-pointer overflow-hidden group'>
             <div className='p-4 space-y-4'>
-                {/* Header with Icon, Title, and Tags */}
+                {/* Header with Logo, Title, and Tags */}
                 <div className='flex items-start justify-between'>
                     <div className='flex items-center space-x-3'>
                         <div className='p-2 bg-blue-500/10 rounded-lg group-hover:bg-blue-500/20 transition-colors'>
-                            <TypeIcon className='w-5 h-5 text-blue-400' />
+                            <img
+                                src={
+                                    type === 'radarr' ? RadarrLogo : SonarrLogo
+                                }
+                                className='w-5 h-5'
+                                alt={type === 'radarr' ? 'Radarr' : 'Sonarr'}
+                            />
                         </div>
                         <div>
                             <h3 className='font-medium text-gray-100'>