From 7c44dccad0dae7745eeb4adf9192759c0216ca8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Chirico=20Indreb=C3=B8?= <ACIN@equinor.com>
Date: Fri, 10 Nov 2023 11:58:30 +0100
Subject: [PATCH] Make alert button background red on hover

---
 .../src/components/Alerts/FailedMissionAlert.tsx   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Alerts/FailedMissionAlert.tsx b/frontend/src/components/Alerts/FailedMissionAlert.tsx
index 856cc6b83..779a238a3 100644
--- a/frontend/src/components/Alerts/FailedMissionAlert.tsx
+++ b/frontend/src/components/Alerts/FailedMissionAlert.tsx
@@ -10,6 +10,12 @@ const Indent = styled.div`
     padding: 0px 9px;
 `
 
+const StyledButton = styled(Button)`
+    :hover {
+        background-color: #ff9797;
+    }
+`
+
 interface MissionsProps {
     missions: Mission[]
 }
@@ -24,10 +30,10 @@ function FailedMission({ missions }: MissionsProps) {
     }
 
     return (
-        <Button as={Typography} onClick={goToMission} variant="ghost" color="secondary">
+        <StyledButton onClick={goToMission} variant="ghost" color="secondary">
             <strong>'{mission.name}'</strong> {TranslateText('failed on robot')}{' '}
             <strong>'{mission.robot.name}':</strong> {mission.statusReason}
-        </Button>
+        </StyledButton>
     )
 }
 
@@ -40,10 +46,10 @@ function SeveralFailedMissions({ missions }: MissionsProps) {
     }
 
     return (
-        <Button as={Typography} onClick={goToHistory} variant="ghost" color="secondary">
+        <StyledButton onClick={goToHistory} variant="ghost" color="secondary">
             <strong>{missions.length}</strong>{' '}
             {' ' + TranslateText("missions failed recently. See 'Mission History' for more information.")}
-        </Button>
+        </StyledButton>
     )
 }