feat: make StoppedIcon theme-aware and remove hardcoded loader colors

1. StoppedIcon component:
   - Add theme detection using useTheme hook
   - Use lighter grey (black-300) for dark theme
   - Use darker grey (black-500) for light theme
   - Improves visibility of stopped workspace status icon in both themes

2. Main page loader:
   - Remove hardcoded color: #fff
   - Remove hardcoded background-color: #000
   - Allow loader to inherit theme colors naturally

Changes:
- Convert StoppedIcon to use dynamic fill color based on theme
- Keep greyCssVariable export for backward compatibility
- Clean up branding.css to respect theme colors

Assisted-by: Claude Sonnet 4.5
Signed-off-by: Oleksii Orel <oorel@redhat.com>

Author: olexii4

.image-tag

@@ -1 +1 @@
-pr-1452-07
+pr-1452-08

packages/dashboard-frontend/assets/branding/branding.css

@@ -7,10 +7,8 @@
   left: 0;
   z-index: 80;
   margin: auto;
-  color: #fff;
   font-size: 24px;
   font-family: Helvetica, Arial, sans-serif;
-  background-color: #000;
 }
 
 .main-page-loader .ide-page-loader-content img {

packages/dashboard-frontend/src/components/Workspace/Status/StoppedIcon.tsx

@@ -12,12 +12,22 @@
 
 import React from 'react';
 
-export const greyCssVariable = 'var(--pf-global--palette--black-500)';
+import { useTheme } from '@/contexts/ThemeContext';
+
+// Theme-aware grey colors
+const lightGreyCssVariable = 'var(--pf-global--palette--black-500)';
+const darkGreyCssVariable = 'var(--pf-global--palette--black-300)';
+
+// Deprecated: kept for backward compatibility
+export const greyCssVariable = lightGreyCssVariable;
 
 export function StoppedIcon(): React.ReactElement {
+  const { isDarkTheme } = useTheme();
+  const fillColor = isDarkTheme ? darkGreyCssVariable : lightGreyCssVariable;
+
   return (
     <svg
-      fill={greyCssVariable}
+      fill={fillColor}
       height="1em"
       width="1em"
       viewBox="0 0 16 16"