fix(ui): Fix visual issues on <IgnoreActions /> & <ResolveActions /> (#30924)

- Remove unnecessary shadows on the dropdown trigger
 - Fix border radii on the left side action button

static/app/components/actions/actionLink.tsx

@@ -11,11 +11,16 @@ const StyledAction = styled('a')<{disabled?: boolean}>`
   ${p => p.disabled && 'cursor: not-allowed;'}
 `;
 
-const StyledActionButton = styled(ActionButton)`
+const StyledActionButton = styled(ActionButton)<{
+  disabled?: boolean;
+  hasDropdown?: boolean;
+}>`
   display: flex;
   align-items: center;
-  ${p => p.disabled && 'cursor: not-allowed;'}
   pointer-events: ${p => (p.disabled ? 'none' : 'auto')};
+
+  ${p => p.disabled && 'cursor: not-allowed;'}
+  ${p => p.hasDropdown && `border-radius: ${p.theme.borderRadiusLeft}`};
 `;
 
 type ConfirmableActionProps = React.ComponentProps<typeof ConfirmableAction>;

static/app/components/actions/ignore.tsx

@@ -129,13 +129,14 @@ const IgnoreActions = ({
           title={t('Ignore')}
           onAction={() => onUpdate({status: ResolutionStatus.IGNORED})}
           icon={<IconMute size="xs" />}
+          hasDropdown
         >
           {t('Ignore')}
         </ActionLink>
       </Tooltip>
       <StyledDropdownLink
         customTitle={
-          <ActionButton
+          <StyledActionButton
             disabled={disabled}
             icon={<IconChevron direction="down" size="xs" />}
           />
@@ -332,6 +333,10 @@ const StyledForActionLink = styled(ActionLink)`
   ${actionLinkCss};
 `;
 
+const StyledActionButton = styled(ActionButton)`
+  box-shadow: none;
+`;
+
 const StyledDropdownLink = styled(DropdownLink)`
   transition: none;
   border-top-left-radius: 0 !important;

static/app/components/actions/resolve.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled from '@emotion/styled';
 
 import {openModal} from 'sentry/actionCreators/modal';
 import ActionLink from 'sentry/components/actions/actionLink';
@@ -143,7 +144,7 @@ class ResolveActions extends React.Component<Props> {
     return (
       <DropdownLink
         customTitle={
-          <ActionButton
+          <StyledActionButton
             label={t('More resolve options')}
             disabled={!projectSlug ? disabled : disableDropdown}
             icon={<IconChevron direction="down" size="xs" />}
@@ -244,6 +245,7 @@ class ResolveActions extends React.Component<Props> {
               title={t('Resolve')}
               icon={<IconCheckmark size="xs" />}
               onAction={() => onUpdate({status: ResolutionStatus.RESOLVED})}
+              hasDropdown
             >
               {t('Resolve')}
             </ActionLink>
@@ -256,3 +258,7 @@ class ResolveActions extends React.Component<Props> {
 }
 
 export default withOrganization(ResolveActions);
+
+const StyledActionButton = styled(ActionButton)`
+  box-shadow: none;
+`;

static/app/utils/theme.tsx

@@ -617,6 +617,9 @@ const commonTheme = {
   borderRadius: '4px',
   borderRadiusBottom: '0 0 4px 4px',
   borderRadiusTop: '4px 4px 0 0',
+  borderRadiusLeft: '4px 0 0 4px',
+  borderRadiusRight: '0 4px 4px 0',
+
   headerSelectorRowHeight: 44,
   headerSelectorLabelHeight: 28,