chore: update error styles

caisy-io · Sep 19, 2024 · 9c069d4 · 9c069d4
1 parent d41cefe
commit 9c069d4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 ?? ''};
 `;