From 9c069d4969519d760e598326859a902075ada98c Mon Sep 17 00:00:00 2001
From: Moritz Gruber <m.gruber@cyclus.digital>
Date: Thu, 19 Sep 2024 21:16:48 +0200
Subject: [PATCH] chore: update error styles

chore: update error styles
---
 .../input-field/styles/SFieldErrorsDropdown.tsx  | 12 ++++++++++--
 .../styles/SFieldErrorsDropdownBadge.tsx         |  3 ++-
 src/components/line-tab/LineTab.tsx              |  4 +++-
 src/components/line-tab/styles/SLineTab.tsx      | 16 +++++++++++++++-
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/input-field/styles/SFieldErrorsDropdown.tsx b/src/components/input-field/styles/SFieldErrorsDropdown.tsx
index b7724ded..553bc89b 100644
--- a/src/components/input-field/styles/SFieldErrorsDropdown.tsx
+++ b/src/components/input-field/styles/SFieldErrorsDropdown.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import {CSSProgressiveHighlight} from "../../../constants/styles";
+import { CSSProgressiveHighlight } from "../../../constants/styles";
 
 export const SFieldErrorsDropdown = styled.div`
   display: flex;
@@ -8,7 +8,15 @@ export const SFieldErrorsDropdown = styled.div`
   padding: 8px 12px 8px 16px;
   cursor: pointer;
   user-select: none;
-  color: var(--hover-text-06, #CB2D3B);
   ${CSSProgressiveHighlight};
+  color: var(--ui-supportive-01);
+  transition: color 0.2s ease-in-out;
 
+  :hover {
+    color: var(--active-interactional-secondary-02);
+
+    .errors-count-badge {
+      background-color: var(--active-interactional-secondary-02);
+    }
+  }
 `;
diff --git a/src/components/input-field/styles/SFieldErrorsDropdownBadge.tsx b/src/components/input-field/styles/SFieldErrorsDropdownBadge.tsx
index 5ec048c5..86814a58 100644
--- a/src/components/input-field/styles/SFieldErrorsDropdownBadge.tsx
+++ b/src/components/input-field/styles/SFieldErrorsDropdownBadge.tsx
@@ -8,7 +8,8 @@ export const SFieldErrorsDropdownBadge = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  background: var(--active-interactional-secondary-02);
+  transition: background-color 0.2s ease-in-out;
+  background-color: var(--ui-supportive-01);
   color: var(--text-02);
   ${CSSProgressiveHighlight};
   margin-right: 4px;
diff --git a/src/components/line-tab/LineTab.tsx b/src/components/line-tab/LineTab.tsx
index cd07a357..a097832e 100644
--- a/src/components/line-tab/LineTab.tsx
+++ b/src/components/line-tab/LineTab.tsx
@@ -11,6 +11,7 @@ interface ILineTabProps {
   onClick: () => void;
   children?: React.ReactNode;
   errorsCount?: number;
+  styleOverwrite?: any;
 }
 
 export const LineTab: React.FC<ILineTabProps> = ({
@@ -21,9 +22,10 @@ export const LineTab: React.FC<ILineTabProps> = ({
   children,
   hasError = false,
   errorsCount = 0,
+  styleOverwrite,
 }) => {
   return (
-    <SLineTab hover={hover} activated={activated} onClick={onClick} hasError={hasError}>
+    <SLineTab styleOverwrite={styleOverwrite} hover={hover} activated={activated} onClick={onClick} hasError={hasError}>
       {hasError && errorsCount > 0 && (
         <SLineTabErrorsCountBadge className="errors-count-badge">
           {errorsCount}
diff --git a/src/components/line-tab/styles/SLineTab.tsx b/src/components/line-tab/styles/SLineTab.tsx
index 24f43290..c0959b9b 100644
--- a/src/components/line-tab/styles/SLineTab.tsx
+++ b/src/components/line-tab/styles/SLineTab.tsx
@@ -2,6 +2,18 @@ import styled, { css } from "styled-components";
 import { CSSProgressiveBody03Semibold } from "../../../constants/styles";
 import { MIN_SILVER, MIN_GOLD, MIN_PLATINUM, MIN_DIAMOND } from "../../../constants/styles";
 
+const CSSErrorHover = css`
+  color: var(--active-interactional-secondary-02);
+
+  .errors-count-badge {
+    background-color: var(--active-interactional-secondary-02);
+  }
+
+  div:last-of-type {
+    background-color: var(--active-interactional-secondary-02);
+  }
+`;
+
 const CSSHover = css`
   color: var(--hover-text-04);
   cursor: pointer;
@@ -13,6 +25,7 @@ const CSSHover = css`
   div:last-of-type {
     background-color: var(--hover-text-04);
   }
+  ${({ hasError }) => hasError && CSSErrorHover};
 `;
 
 const CSSActivated = css<{ activated?: boolean; hover?: boolean; hasError?: boolean }>`
@@ -71,10 +84,11 @@ const Platinum = css``;
 
 const Diamond = css``;
 
-export const SLineTab = styled.div<{ activated?: boolean; hover?: boolean; hasError?: boolean }>`
+export const SLineTab = styled.div<{ activated?: boolean; hover?: boolean; hasError?: boolean; styleOverwrite: any }>`
   ${Bronze}
   ${MIN_SILVER`${Silver}`};
   ${MIN_GOLD`${Gold}`};
   ${MIN_PLATINUM`${Platinum}`};
   ${MIN_DIAMOND`${Diamond}`};
+  ${({styleOverwrite}) => styleOverwrite ?? ''};
 `;