From dbd20e676f4d836c442e0ae19bae893014824729 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 9 Oct 2025 17:27:53 +0100
Subject: [PATCH] refactor: use IconButton component for cache clear button

Replace inline styled button with existing IconButton component to keep code DRY
---
 .../Settings/OfflineModeSettings.tsx          | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/Settings/OfflineModeSettings.tsx b/src/components/Settings/OfflineModeSettings.tsx
index 3f84c0dc..92a65793 100644
--- a/src/components/Settings/OfflineModeSettings.tsx
+++ b/src/components/Settings/OfflineModeSettings.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 import { getImageCacheStats, clearImageCache } from '../../services/imageCacheService'
+import IconButton from '../IconButton'
 
 interface OfflineModeSettingsProps {
   settings: UserSettings
@@ -111,20 +111,13 @@ const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onU
               <span>
                 ( {cacheStats.totalSizeMB.toFixed(1)} MB / [ {settings.imageCacheSizeMB ?? 50} ] MB used )
               </span>
-              <button
+              <IconButton
+                icon={faTrash}
                 onClick={handleClearCache}
                 title="Clear cache"
-                style={{
-                  padding: '0.25rem 0.5rem',
-                  background: 'transparent',
-                  color: 'var(--danger, #ef4444)',
-                  border: 'none',
-                  cursor: 'pointer',
-                  fontSize: '0.9rem'
-                }}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-              </button>
+                variant="ghost"
+                size={28}
+              />
             </div>
           </>
         )}