lint fixes

City-of-Helsinki · Aug 14, 2023 · a712c3b · a712c3b
1 parent 5e9e5ef
commit a712c3b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 30 deletions.
diff --git 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
@@ -218,7 +218,7 @@ const BatchApplicationList: React.FC<BatchProps> = ({ batch }: BatchProps) => {
           </div>
         </$HorizontalList>
         {applications?.length ? (
-          <$TableBody isCollapsed={isCollapsed} aria-hidden={isCollapsed}>
+          <$TableBody $isCollapsed={isCollapsed} aria-hidden={isCollapsed}>
             <Table
               indexKey="id"
               theme={theme.components.table}

diff --git a/frontend/benefit/handler/src/components/table/TableExtras.sc.ts b/frontend/benefit/handler/src/components/table/TableExtras.sc.ts
@@ -1,9 +1,8 @@
 import FormSection from 'shared/components/forms/section/FormSection';
-import theme from 'shared/styles/theme';
 import styled from 'styled-components';
 
 type CollapsedProps = {
-  isCollapsed: boolean;
+  $isCollapsed: boolean;
 };
 
 export const $HorizontalList = styled.dl`
@@ -74,7 +73,7 @@ export const $TableWrapper = styled.div<TableWrapperProps>`
 `;
 
 export const $TableBody = styled.div<CollapsedProps>`
-  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
@@ -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,
     },
   },
 };