Increase contrast on banner alerts

gravitational · Sep 4, 2024 · 1fd6942 · 1fd6942
1 parent c0e948f
commit 1fd6942
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/web/packages/teleport/src/components/BannerList/Banner.tsx b/web/packages/teleport/src/components/BannerList/Banner.tsx
@@ -40,10 +40,11 @@ export function Banner({
   link = '',
   onClose,
 }: Props) {
+  const textColor = severity === 'danger' ? 'text.primaryInverse' : 'text.main';
   const icon = {
-    info: <Info mr={3} size="medium" role="icon" />,
-    warning: <Info mr={3} size="medium" role="icon" />,
-    danger: <Warning mr={3} size="medium" role="icon" />,
+    info: <Info mr={3} size="medium" role="icon" color={textColor} />,
+    warning: <Info mr={3} size="medium" role="icon" color={textColor} />,
+    danger: <Warning mr={3} size="medium" role="icon" color={textColor} />,
   }[severity];
 
   const isValidTeleportLink = (link: string) => {
@@ -72,7 +73,7 @@ export function Banner({
           <Link
             href={link}
             target="_blank"
-            color="text.primaryInverse"
+            color={textColor}
             style={{ fontWeight: 'bold' }}
             onClick={() =>
               userEventService.captureUserEvent({
@@ -84,7 +85,9 @@ export function Banner({
             {message}
           </Link>
         ) : (
-          <Text bold>{message}</Text>
+          <Text color={textColor} bold>
+            {message}
+          </Text>
         )}
         <CloseButton
           onClick={() => {