Browse Source

fix(ui): Use full opacity for close button in app alerts (#30794)

The current close buttons are set to opacity: 0.4. This is too light and not accessible.
Vu Luong 3 years ago
parent
commit
e6bc01fabc

+ 1 - 2
static/app/components/createAlertButton.tsx

@@ -172,7 +172,7 @@ function IncompatibleQueryAlert({
         </React.Fragment>
       )}
       <StyledCloseButton
-        icon={<IconClose color="yellow300" size="sm" isCircled />}
+        icon={<IconClose size="sm" />}
         aria-label={t('Close')}
         size="zero"
         onClick={onClose}
@@ -438,6 +438,5 @@ const StyledCloseButton = styled(Button)`
   &:hover,
   &:focus {
     background-color: transparent;
-    opacity: 1;
   }
 `;

+ 1 - 2
static/app/views/app/alertMessage.tsx

@@ -33,7 +33,7 @@ const AlertMessage = ({alert, system}: Props) => {
         {url ? <ExternalLink href={url}>{message}</ExternalLink> : message}
       </StyledMessage>
       <StyledCloseButton
-        icon={<IconClose size="md" isCircled />}
+        icon={<IconClose size="sm" />}
         aria-label={t('Close')}
         onClick={alert.onClose ?? handleClose}
         size="zero"
@@ -57,7 +57,6 @@ const StyledMessage = styled('span')`
 
 const StyledCloseButton = styled(Button)`
   background-color: transparent;
-  opacity: 0.4;
   transition: opacity 0.1s linear;
   position: absolute;
   top: 50%;