message: fixing close button alignment when alert is inline
diff: @@ -16,7 +16,6 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  styles?: {
  wrapper?: Interpolation
  container?: Interpolation
  - inlineContainer?: Interpolation
  }
  }
  @@ -26,22 +25,12 @@ export function Alert(props: AlertProps) {
  const typeStyle = createTypesStyles(theme)[type]
  const locale = useLocale()
  - const alertContent = (
  - <Fragment>
  - <Icon icon={typeStyle.icon} style={classes.icon} size={inline ? 1 : undefined} />
  - <div className={classes.content}>{children}</div>
  - </Fragment>
  - )
  -
  return (
  <div className={css(classes.wrapper, typeStyle.style, styles && styles.wrapper)} role='alert' {...rest}>
  <div className={css(classes.container, styles && styles.container)}>
  - {inline ? (
  - <div className={css(classes.inlineContainer, styles && styles.inlineContainer)}>{alertContent}</div>
  - ) : (
  - alertContent
  - )}
  -
  + <Icon icon={typeStyle.icon} style={classes.icon} size={inline && 1} />
  + <div className={classes.content}>{children}</div>
  + </div>
  {onCloseClick && (
  <span className={classes.closeButtonWrapper}>
  <Tooltip text={locale.alert.close}>
  @@ -58,13 +47,12 @@ export function Alert(props: AlertProps) {
  </span>
  )}
  </div>
  - </div>
  )
  }
  export const createStyles = (theme: Theme, { inline }: AlertProps) => ({
  wrapper: {
  - padding: inline ? '0.375rem 0.5rem' : '0 1rem',
  + padding: '0 1rem',
  minHeight: inline ? '2rem' : '2.5rem',
  borderRadius: '2px',
  borderStyle: 'solid',
  @@ -76,14 +64,9 @@ export const createStyles = (theme: Theme, { inline }: AlertProps) => ({
  } as CSSProperties,
  container: {
  display: 'flex',
  - alignItems: 'center',
  + alignItems: inline ? 'start' : 'center',
  flex: 1,
  } as CSSProperties,
  - inlineContainer: {
  - display: 'flex',
  - flex: 1,
  - alignItems: 'top',
  - } as CSSProperties,
  icon: {
  marginTop: inline && '0.125rem',
  marginRight: '0.5rem',
  @@ -92,10 +75,11 @@ export const createStyles = (theme: Theme, { inline }: AlertProps) => ({
  flex: 1,
  } as CSSProperties,
  closeButtonWrapper: {
  + marginTop: inline && '0.125rem',
  marginLeft: 'auto',
  paddingLeft: '1rem',
  display: 'inline-flex',
  - alignItems: 'center',
  + alignSelf: inline ? 'start' : 'center',
  } as CSSProperties,
  closeButton: {
  padding: inline && 0,
  