From 9b4ebd4ff0ed0c5e7f0d91b5eb5b6a33970ece18 Mon Sep 17 00:00:00 2001
From: Stefan Kalscheuer <stefan@stklcode.de>
Date: Wed, 20 Aug 2025 09:16:26 +0200
Subject: [PATCH] FE: Use theme color definition for warning icon

We already have a color definition `warningIcon` in our theme which is
close to the hard-coded yellow color in the actual template. Use it for
consistency and allow theming here.

For slightly better contrast on white background, we introduce a darker
yellow version and switch from yellow[20] to yellow[30].
---
 frontend/src/components/common/Icons/WarningIcon.tsx | 5 +++--
 frontend/src/theme/theme.ts                          | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/Icons/WarningIcon.tsx b/frontend/src/components/common/Icons/WarningIcon.tsx
index 1bffe0db5..c56f86de6 100644
--- a/frontend/src/components/common/Icons/WarningIcon.tsx
+++ b/frontend/src/components/common/Icons/WarningIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 const WarningIconContainer = styled.span`
   align-items: center;
@@ -10,6 +10,7 @@ const WarningIconContainer = styled.span`
 `;
 
 const WarningIcon: React.FC = () => {
+  const theme = useTheme();
   return (
     <WarningIconContainer>
       <svg
@@ -24,7 +25,7 @@ const WarningIcon: React.FC = () => {
           fillRule="evenodd"
           clipRule="evenodd"
           d="M8.09265 1.06679C7.60703 0.250524 6.39297 0.250524 5.90735 1.06679L0.170916 10.7089C-0.314707 11.5252 0.292322 12.5455 1.26357 12.5455H12.7364C13.7077 12.5455 14.3147 11.5252 13.8291 10.7089L8.09265 1.06679ZM6 5.00006C6 4.44778 6.44772 4.00006 7 4.00006C7.55228 4.00006 8 4.44778 8 5.00006V7.00006C8 7.55235 7.55228 8.00006 7 8.00006C6.44772 8.00006 6 7.55235 6 7.00006V5.00006ZM6 10.0001C6 9.44778 6.44772 9.00006 7 9.00006C7.55228 9.00006 8 9.44778 8 10.0001C8 10.5523 7.55228 11.0001 7 11.0001C6.44772 11.0001 6 10.5523 6 10.0001Z"
-          fill="#F2C94C"
+          fill={theme.icons.warningIcon}
         />
       </svg>
     </WarningIconContainer>
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 48e39ecf5..3f657915f 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -68,6 +68,7 @@ const Colors = {
   yellow: {
     '10': '#FFEECC',
     '20': '#FFDD57',
+    '30': '#FFD439',
   },
   blue: {
     '10': '#e3f2fd',
@@ -270,7 +271,7 @@ const baseTheme = {
     infoIcon: Colors.neutral[30],
     closeCircleIcon: Colors.neutral[30],
     deleteIcon: Colors.red[20],
-    warningIcon: Colors.yellow[20],
+    warningIcon: Colors.yellow[30],
     warningRedIcon: {
       rectFill: Colors.red[10],
       pathFill: Colors.red[50],