From a712c3b747e9d738f47acca4ef29ac3a26cd78ac Mon Sep 17 00:00:00 2001 From: Sampo Tawast Date: Fri, 11 Aug 2023 12:04:13 +0300 Subject: [PATCH] lint fixes --- .../BatchActionsInspectionForm.tsx | 4 +- .../batchProcessing/BatchApplicationList.tsx | 2 +- .../src/components/table/TableExtras.sc.ts | 5 +- frontend/shared/src/styles/theme.ts | 54 ++++++++++--------- 4 files changed, 35 insertions(+), 30 deletions(-) diff --git a/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx b/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx index e83b4d9591..cc4573e24c 100644 --- a/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx +++ b/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx @@ -17,13 +17,13 @@ import { useTranslation } from 'next-i18next'; import React, { ChangeEvent } from 'react'; import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; import Modal from 'shared/components/modal/Modal'; +import theme from 'shared/styles/theme'; +import { CSSProperties } from 'styled-components'; import ConfirmModalContent from '../applicationReview/actions/ConfirmModalContent/confirm'; import { $InspectionTypeContainer } from '../table/BatchCompletion.sc'; import { $FormSection } from '../table/TableExtras.sc'; import { useBatchActionsInspected } from './useBatchActionsInspected'; -import theme from 'shared/styles/theme'; -import { CSSProperties } from 'styled-components'; type BatchProps = { batch: BatchProposal; diff --git a/frontend/benefit/handler/src/components/batchProcessing/BatchApplicationList.tsx b/frontend/benefit/handler/src/components/batchProcessing/BatchApplicationList.tsx index ce0217dff4..a2d9cbe67f 100644 --- a/frontend/benefit/handler/src/components/batchProcessing/BatchApplicationList.tsx +++ b/frontend/benefit/handler/src/components/batchProcessing/BatchApplicationList.tsx @@ -218,7 +218,7 @@ const BatchApplicationList: React.FC = ({ batch }: BatchProps) => { {applications?.length ? ( - <$TableBody isCollapsed={isCollapsed} aria-hidden={isCollapsed}> + <$TableBody $isCollapsed={isCollapsed} aria-hidden={isCollapsed}> ` `; export const $TableBody = styled.div` - display: ${(props) => (props.isCollapsed ? 'none' : 'block')}; + display: ${(props) => (props.$isCollapsed ? 'none' : 'block')}; `; export const $HintText = styled.p` diff --git a/frontend/shared/src/styles/theme.ts b/frontend/shared/src/styles/theme.ts index 47e5fa5c3b..5ef4176546 100644 --- a/frontend/shared/src/styles/theme.ts +++ b/frontend/shared/src/styles/theme.ts @@ -1,14 +1,20 @@ import { DefaultTheme } from 'styled-components'; -const colors = { +const tokens = { coatOfArms: 'var(--color-coat-of-arms)', - components: { - stepper: { - black: 'var(--color-black-90)', - white: 'var(--color-white)', - grey: 'var(--color-black-30)', - }, - radio: {}, + fog: 'var(--color-fog)', +}; + +const componentColors = { + stepper: { + black: 'var(--color-black-90)', + white: 'var(--color-white)', + grey: 'var(--color-black-30)', + }, + radio: { + base: tokens.coatOfArms, + selectedHover: 'var(--color-black-80)', + selectedFocus: tokens.fog, }, }; @@ -22,7 +28,7 @@ const theme: DefaultTheme = { busLight: 'var(--color-bus-light)', busMediumLight: 'var(--color-bus-medium-light)', busDark: 'var(--color-bus-dark)', - coatOfArms: colors.coatOfArms as 'var(--color-coat-of-arms)', + coatOfArms: 'var(--color-coat-of-arms)', coatOfArmsLight: 'var(--color-coat-of-arms-light)', coatOfArmsMediumLight: 'var(--color-coat-of-arms-medium-light)', coatOfArmsDark: 'var(--color-coat-of-arms-dark)', @@ -151,28 +157,28 @@ const theme: DefaultTheme = { }, components: { tabs: { - '--tab-color': colors.coatOfArms, + '--tab-color': tokens.coatOfArms, '--tab-active-border-color': 'var(--color-black)', }, table: { - '--header-background-color': colors.coatOfArms, + '--header-background-color': tokens.coatOfArms, }, stepper: { - '--hds-not-selected-step-label-color': colors.components.stepper.black, - '--hds-step-background-color': colors.components.stepper.white, - '--hds-step-content-color': colors.components.stepper.black, - '--hds-stepper-background-color': colors.components.stepper.white, - '--hds-stepper-color': colors.components.stepper.black, - '--hds-stepper-disabled-color': colors.components.stepper.grey, - '--hds-stepper-focus-border-color': colors.components.stepper.black, + '--hds-not-selected-step-label-color': componentColors.stepper.black, + '--hds-step-background-color': componentColors.stepper.white, + '--hds-step-content-color': componentColors.stepper.black, + '--hds-stepper-background-color': componentColors.stepper.white, + '--hds-stepper-color': componentColors.stepper.black, + '--hds-stepper-disabled-color': componentColors.stepper.grey, + '--hds-stepper-focus-border-color': componentColors.stepper.black, }, radio: { - '--border-color-selected': 'var(--color-coat-of-arms)', - '--border-color-selected-hover': 'var(--color-black-80)', - '--border-color-selected-focus': 'var(--color-fog)', - '--icon-color-selected': 'var(--color-coat-of-arms)', - '--icon-color-hover': 'var(--color-coat-of-arms)', - '--focus-outline-color': 'var(--color-coat-of-arms)', + '--border-color-selected': componentColors.radio.base, + '--border-color-selected-hover': componentColors.radio.selectedHover, + '--border-color-selected-focus': componentColors.radio.selectedFocus, + '--icon-color-selected': componentColors.radio.base, + '--icon-color-hover': componentColors.radio.base, + '--focus-outline-color': componentColors.radio.base, }, }, };