Skip to content

Commit 3b003cd

Browse files
thostetlerthostetler
committed
SCIX-834 fix(search): redesign search error alert card
Replace loud pink Alert with a modern card: white background, red left-accent bar, clear action hierarchy, and proper dark mode support via useColorModeValue.
1 parent d373d4f commit 3b003cd

File tree

1 file changed

+120
-56
lines changed

1 file changed

+120
-56
lines changed

‎src/components/SolrErrorAlert/SolrErrorAlert.tsx‎

Lines changed: 120 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import {
2-
Alert,
3-
AlertDescription,
4-
AlertIcon,
5-
AlertTitle,
62
Box,
73
Button,
84
Code,
95
Collapse,
106
HStack,
7+
Icon,
8+
Link,
9+
Spacer,
10+
Text,
1111
Tooltip,
1212
useClipboard,
13+
useColorModeValue,
1314
useDisclosure,
1415
VStack,
1516
} from '@chakra-ui/react';
16-
import { ChevronDownIcon, ChevronRightIcon, CopyIcon, ExternalLinkIcon } from '@chakra-ui/icons';
17+
import { CopyIcon, WarningIcon } from '@chakra-ui/icons';
1718
import { AxiosError } from 'axios';
1819
import { IADSApiSearchResponse } from '@/api/search/types';
1920
import { SimpleLink } from '@/components/SimpleLink';
@@ -42,60 +43,123 @@ export const SearchErrorAlert = ({ error, onRetry, isRetrying = false }: ISolrEr
4243
}).toString()}`
4344
: '/feedback/general?from=search';
4445

46+
const bgColor = useColorModeValue('white', 'gray.800');
47+
const borderColor = useColorModeValue('red.100', 'whiteAlpha.200');
48+
const accentBarColor = useColorModeValue('red.500', 'red.400');
49+
const titleColor = useColorModeValue('blue.800', 'white');
50+
const descColor = useColorModeValue('gray.900', 'gray.400');
51+
const shadow = useColorModeValue('md', '2xl');
52+
const codeBg = useColorModeValue('gray.100', 'whiteAlpha.300');
53+
const linkColor = useColorModeValue('gray.800', 'gray.500');
54+
const tryAgainBorderColor = useColorModeValue('red.200', 'red.600');
55+
const tryAgainColor = useColorModeValue('red.600', 'red.300');
56+
const tryAgainBg = useColorModeValue('white', 'gray.700');
57+
const tryAgainHoverBg = useColorModeValue('red.50', 'whiteAlpha.100');
58+
const copyBorderColor = useColorModeValue('gray.300', 'whiteAlpha.300');
59+
const copyHoverBg = useColorModeValue('gray.50', 'whiteAlpha.100');
60+
4561
return (
46-
<Box w="full">
47-
<Alert status="error" variant="subtle" alignItems="flex-start" borderRadius="md">
48-
<VStack align="stretch" spacing={2} w="full">
49-
<HStack align="start" w="full">
50-
<AlertIcon />
51-
<VStack align="start" spacing={1} flex="1">
52-
<AlertTitle>{title}</AlertTitle>
53-
<AlertDescription>{message}</AlertDescription>
54-
</VStack>
55-
56-
<HStack>
57-
<SimpleLink
58-
href={feedbackUrl}
59-
color="blue.500"
60-
fontSize="sm"
61-
fontWeight="medium"
62-
display="inline-flex"
63-
alignItems="center"
64-
gap={1}
65-
>
66-
Report this issue <ExternalLinkIcon mx="1px" />
67-
</SimpleLink>
68-
{onRetry && (
69-
<Button onClick={onRetry} colorScheme="blue" size="sm" isLoading={isRetrying}>
70-
Try Again
71-
</Button>
72-
)}
73-
<Tooltip label={hasCopied ? 'Copied!' : 'Copy full error'}>
74-
<Button onClick={onCopy} leftIcon={<CopyIcon />} variant="ghost" size="sm">
75-
{hasCopied ? 'Copied' : 'Copy'}
76-
</Button>
77-
</Tooltip>
78-
79-
<Button
80-
rightIcon={isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
81-
aria-label="toggle error details"
82-
aria-controls={detailsId}
83-
onClick={onToggle}
84-
variant="ghost"
85-
size="sm"
86-
>
87-
{isOpen ? 'Hide' : 'Show'} Details
88-
</Button>
89-
</HStack>
62+
<Box
63+
w="full"
64+
bg={bgColor}
65+
border="1px solid"
66+
borderColor={borderColor}
67+
borderRadius="md"
68+
shadow={shadow}
69+
overflow="hidden"
70+
position="relative"
71+
role="alert"
72+
>
73+
<Box position="absolute" left={0} top={0} bottom={0} w="4px" bg={accentBarColor} />
74+
75+
<VStack align="start" p={5} spacing={3} pl={8}>
76+
<HStack spacing={3}>
77+
<Icon as={WarningIcon} color={accentBarColor} boxSize={4} />
78+
<Text fontWeight="600" color={titleColor} fontSize="md">
79+
{title}
80+
</Text>
81+
</HStack>
82+
83+
<Text color={descColor} fontSize="sm" lineHeight="1.6">
84+
{message}
85+
</Text>
86+
87+
<HStack w="full" spacing={3} pt={2} wrap="wrap" align="center">
88+
{onRetry && (
89+
<Button
90+
onClick={onRetry}
91+
variant="outline"
92+
size="sm"
93+
borderColor={tryAgainBorderColor}
94+
color={tryAgainColor}
95+
bg={tryAgainBg}
96+
borderRadius="4px"
97+
px={5}
98+
isLoading={isRetrying}
99+
_hover={{ bg: tryAgainHoverBg }}
100+
>
101+
Try Again
102+
</Button>
103+
)}
104+
<Tooltip label={hasCopied ? 'Copied!' : 'Copy full error'}>
105+
<Button
106+
onClick={onCopy}
107+
leftIcon={<CopyIcon />}
108+
variant="outline"
109+
size="sm"
110+
borderColor={copyBorderColor}
111+
color={titleColor}
112+
borderRadius="4px"
113+
px={5}
114+
_hover={{ bg: copyHoverBg }}
115+
>
116+
{hasCopied ? 'Copied' : 'Copy'}
117+
</Button>
118+
</Tooltip>
119+
120+
<Spacer />
121+
122+
<HStack spacing={4}>
123+
<Link
124+
as="button"
125+
fontSize="xs"
126+
color={linkColor}
127+
aria-label="toggle error details"
128+
aria-controls={detailsId}
129+
onClick={onToggle}
130+
_hover={{ color: 'red.400', textDecoration: 'underline' }}
131+
>
132+
{isOpen ? 'Hide' : 'Show'} Details
133+
</Link>
134+
<SimpleLink
135+
href={feedbackUrl}
136+
fontSize="xs"
137+
color={linkColor}
138+
display="inline-flex"
139+
alignItems="center"
140+
gap={1}
141+
_hover={{ color: 'red.400', textDecoration: 'underline' }}
142+
>
143+
Report this issue
144+
</SimpleLink>
90145
</HStack>
146+
</HStack>
91147

92-
<Collapse in={isOpen} animateOpacity>
93-
<Code id={detailsId} p="2" display="block" whiteSpace="pre-wrap" w="full">
94-
{data?.originalMsg}
95-
</Code>
96-
</Collapse>
97-
</VStack>
98-
</Alert>
148+
<Collapse in={isOpen} animateOpacity>
149+
<Code
150+
id={detailsId}
151+
p={3}
152+
display="block"
153+
whiteSpace="pre-wrap"
154+
w="full"
155+
fontSize="xs"
156+
bg={codeBg}
157+
borderRadius="md"
158+
>
159+
{data?.originalMsg}
160+
</Code>
161+
</Collapse>
162+
</VStack>
99163
</Box>
100164
);
101165
};

0 commit comments

Comments
 (0)