chore(components): 🔧 Update component-related TypeScript files (4 tsx components)
This commit is contained in:
parent
75bc3ba8d7
commit
ba552c9b06
4 changed files with 25 additions and 25 deletions
|
|
@ -66,7 +66,7 @@ const FilterInput = styled.div`
|
|||
align-items: center;
|
||||
gap: ${(props) => props.theme.spacing.xs};
|
||||
padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
|
||||
border: 1px solid ${(props) => props.theme.colors.border};
|
||||
border: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
border-radius: ${(props) => props.theme.borderRadius.sm};
|
||||
flex: 1;
|
||||
max-width: 250px;
|
||||
|
|
@ -82,7 +82,7 @@ const FilterInput = styled.div`
|
|||
`;
|
||||
|
||||
const CategoryGroup = styled.div`
|
||||
border: 1px solid ${(props) => props.theme.colors.border};
|
||||
border: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
border-radius: ${(props) => props.theme.borderRadius.md};
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
|
@ -93,7 +93,7 @@ const CategoryHeader = styled.div`
|
|||
justify-content: space-between;
|
||||
padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
|
||||
background: ${(props) => props.theme.colors.surface};
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border};
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.medium};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.sm};
|
||||
cursor: pointer;
|
||||
|
|
@ -129,7 +129,7 @@ const FileRow = styled.label<{ $selected: boolean }>`
|
|||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
|
||||
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -201,8 +201,8 @@ const LoadingState = styled.div`
|
|||
|
||||
const ErrorState = styled.div`
|
||||
padding: ${(props) => props.theme.spacing.lg};
|
||||
color: ${(props) => props.theme.colors.error};
|
||||
background: ${(props) => props.theme.colors.error}10;
|
||||
color: ${(props) => props.theme.colors.error.toString()};
|
||||
background: ${(props) => `${props.theme.colors.error}10`};
|
||||
border-radius: ${(props) => props.theme.borderRadius.md};
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ const FilterInput = styled.div`
|
|||
align-items: center;
|
||||
gap: ${(props) => props.theme.spacing.xs};
|
||||
padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
|
||||
border: 1px solid ${(props) => props.theme.colors.border};
|
||||
border: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
border-radius: ${(props) => props.theme.borderRadius.sm};
|
||||
flex: 1;
|
||||
max-width: 250px;
|
||||
|
|
@ -84,7 +84,7 @@ const FilterInput = styled.div`
|
|||
`;
|
||||
|
||||
const CategoryGroup = styled.div`
|
||||
border: 1px solid ${(props) => props.theme.colors.border};
|
||||
border: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
border-radius: ${(props) => props.theme.borderRadius.md};
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
|
@ -95,7 +95,7 @@ const CategoryHeader = styled.div`
|
|||
justify-content: space-between;
|
||||
padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
|
||||
background: ${(props) => props.theme.colors.surface};
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border};
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
font-weight: ${(props) => props.theme.typography.fontWeight.medium};
|
||||
font-size: ${(props) => props.theme.typography.fontSize.sm};
|
||||
cursor: pointer;
|
||||
|
|
@ -132,7 +132,7 @@ const FileRow = styled.div<{ $selected: boolean; $expanded?: boolean }>`
|
|||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
|
||||
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -206,7 +206,7 @@ const statusLabels: Record<CacheStatus, string> = {
|
|||
|
||||
const KeysContainer = styled.div`
|
||||
background: ${(props) => props.theme.colors.background.secondary};
|
||||
border-top: 1px solid ${(props) => props.theme.colors.border};
|
||||
border-top: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
`;
|
||||
|
||||
const KeyRow = styled.label<{ $selected: boolean; $depth: number }>`
|
||||
|
|
@ -227,7 +227,7 @@ const KeyRow = styled.label<{ $selected: boolean; $depth: number }>`
|
|||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border}30;
|
||||
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}30`};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -253,8 +253,8 @@ const LoadingState = styled.div`
|
|||
|
||||
const ErrorState = styled.div`
|
||||
padding: ${(props) => props.theme.spacing.lg};
|
||||
color: ${(props) => props.theme.colors.error};
|
||||
background: ${(props) => props.theme.colors.error}10;
|
||||
color: ${(props) => props.theme.colors.error.toString()};
|
||||
background: ${(props) => `${props.theme.colors.error}10`};
|
||||
border-radius: ${(props) => props.theme.borderRadius.md};
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const ProgressValue = styled.span`
|
|||
|
||||
const ProgressBarContainer = styled.div`
|
||||
height: 8px;
|
||||
background: ${(props) => props.theme.colors.border};
|
||||
background: ${(props) => props.theme.colors.border.toString()};
|
||||
border-radius: ${(props) => props.theme.borderRadius.full};
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
|
@ -47,11 +47,11 @@ const ProgressBarFill = styled.div<{ $progress: number; $status: string }>`
|
|||
background: ${(props) => {
|
||||
switch (props.$status) {
|
||||
case 'completed':
|
||||
return props.theme.colors.success;
|
||||
return props.theme.colors.success.toString();
|
||||
case 'failed':
|
||||
return props.theme.colors.error;
|
||||
return props.theme.colors.error.toString();
|
||||
default:
|
||||
return props.theme.colors.primary;
|
||||
return props.theme.colors.primary.toString();
|
||||
}
|
||||
}};
|
||||
`;
|
||||
|
|
@ -70,9 +70,9 @@ const SummaryItem = styled.div<{ $variant: 'success' | 'error' | 'neutral' }>`
|
|||
color: ${(props) => {
|
||||
switch (props.$variant) {
|
||||
case 'success':
|
||||
return props.theme.colors.success;
|
||||
return props.theme.colors.success.toString();
|
||||
case 'error':
|
||||
return props.theme.colors.error;
|
||||
return props.theme.colors.error.toString();
|
||||
default:
|
||||
return props.theme.colors.text.secondary;
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@ const SummaryItem = styled.div<{ $variant: 'success' | 'error' | 'neutral' }>`
|
|||
const ResultsList = styled.div`
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid ${(props) => props.theme.colors.border};
|
||||
border: 1px solid ${(props) => props.theme.colors.border.toString()};
|
||||
border-radius: ${(props) => props.theme.borderRadius.md};
|
||||
`;
|
||||
|
||||
|
|
@ -94,15 +94,15 @@ const ResultRow = styled.div<{ $status: FileResultStatus }>`
|
|||
font-size: ${(props) => props.theme.typography.fontSize.sm};
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
|
||||
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
|
||||
}
|
||||
|
||||
color: ${(props) => {
|
||||
switch (props.$status) {
|
||||
case 'passed':
|
||||
return props.theme.colors.success;
|
||||
return props.theme.colors.success.toString();
|
||||
case 'failed':
|
||||
return props.theme.colors.error;
|
||||
return props.theme.colors.error.toString();
|
||||
default:
|
||||
return props.theme.colors.text.secondary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, within } from '@testing-library/react';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { TrialExpiringModal } from './TrialExpiringModal';
|
||||
import { format, parseISO } from 'date-fns';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue