feat: update alert styles

src/components/icons/alert-circle.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const AlertCircleIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <circle cx="12" cy="12" r="9" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+    <line x1="12" y1="16" x2="12.01" y2="16" />
+  </BaseSvg>
+);

src/components/icons/alert-triangle.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const AlertTriangleIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <path d="M12 9v2m0 4v.01" />
+    <path d="M5.07 19H19a2 2 0 0 0 1.75 -2.75L13.75 4a2 2 0 0 0 -3.5 0L3.25 16.25a2 2 0 0 0 1.75 2.75" />
+  </BaseSvg>
+);

src/components/icons/check-circle.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const CheckCircleIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <circle cx="12" cy="12" r="9" />
+    <path d="M9 12l2 2l4 -4" />
+  </BaseSvg>
+);

src/components/icons/info-circle.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BaseSvg, SvgProps } from '@components/icons/_base';
+
+export const InfoCircleIcon: SvgProps = props => (
+  <BaseSvg {...props}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <circle cx="12" cy="12" r="9" />
+    <line x1="12" y1="8" x2="12.01" y2="8" />
+    <polyline points="11 12 12 12 12 16 13 16" />
+  </BaseSvg>
+);

src/components/mdx/mdx-components.tsx

@@ -14,6 +14,10 @@ import { Text } from '@components/typography';
 import { border } from '@common/utils';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
+import { CheckCircleIcon } from '@components/icons/check-circle';
+import { AlertTriangleIcon } from '@components/icons/alert-triangle';
+import { AlertCircleIcon } from '@components/icons/alert-circle';
+import { InfoCircleIcon } from '@components/icons/info-circle';
 const Code = dynamic(() => import('../code-block/index'));
 
 const BaseHeading: React.FC<BoxProps> = React.memo(props => (
@@ -50,59 +54,78 @@ export const Li: React.FC<BoxProps> = props => <Box as="li" pb={space('tight')}
 
 const getAlertStyles = (className: string) => {
   if (className?.includes('alert-success')) {
-    return {};
+    return {
+      borderTopColor: themeColor('green'),
+      borderTopWidth: '2px',
+      borderTopRightRadius: '0px',
+      borderTopLeftRadius: '0px',
+      accent: themeColor('green'),
+      icon: CheckCircleIcon,
+    };
   }
   if (className?.includes('alert-info')) {
-    return {};
+    return {
+      border: border(),
+      borderRadius: 'md',
+      boxShadow: 'mid',
+      bg: color('bg'),
+      accent: color('accent'),
+      icon: InfoCircleIcon,
+    };
   }
   if (className?.includes('alert-warning')) {
     return {
-      bg: '#FEF0E3',
-      borderColor: '#F7AA00',
+      borderTopColor: '#F7AA00',
+      borderTopWidth: '2px',
+      borderTopRightRadius: '0px',
+      borderTopLeftRadius: '0px',
       accent: '#F7AA00',
+      icon: AlertTriangleIcon,
     };
   }
   if (className?.includes('alert-danger')) {
     return {
-      bg: '#FCEBEC',
-      borderColor: themeColor('red'),
+      borderTopColor: themeColor('red'),
+      borderTopWidth: '2px',
+      borderTopRightRadius: '0px',
+      borderTopLeftRadius: '0px',
       accent: themeColor('red'),
+      icon: AlertCircleIcon,
     };
   }
   return {};
 };
 
 export const BlockQuote: React.FC<BoxProps> = ({ children, className, ...rest }) => {
-  const { accent, ...styles } = getAlertStyles(className);
+  const isAlert = className?.includes('alert');
+  const { accent, icon: Icon, ...styles } = getAlertStyles(className);
   return (
     <Box as="blockquote" display="block" my={space('extra-loose')} className={className} {...rest}>
       <Box
         border="1px solid"
         css={css({
-          border: border(),
+          display: 'flex',
+          alignItems: 'flex-start',
+          border: isAlert ? border() : border(),
+          bg: isAlert ? color('bg') : themeColor('ink.150'),
           borderRadius: 'md',
-          boxShadow: 'mid',
+          boxShadow: isAlert ? 'mid' : 'unset',
           py: space('base'),
           px: space('base'),
-          bg: color('bg-light'),
+          '& p': {
+            flexGrow: 1,
+            pt: '4px',
+          },
           ...styles,
         })}
       >
-        <Box
-          css={css({
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            marginTop: 0,
-            py: space('base-tight'),
-            borderLeft: '2px solid',
-            borderRadius: '2px',
-            borderColor: accent || color('accent'),
-            pl: space('base'),
-          })}
-        >
-          {children}
+        {Icon && (
+          <Box flexShrink={0} color={accent} mr={space('base-tight')} size="24px">
+            <Icon />
           </Box>
+        )}
+
+        <Box>{children}</Box>
       </Box>
     </Box>
   );

src/pages/contributing.md

@@ -233,21 +233,25 @@ Which will render:
 We use another remark plugin to generate certain kinds of alerts inline in our documentation.
 
 ```md
-=> This will be a success style alert.
+> This is a standard blockquote (non-alert).
 
 -> This will be a standard note style alert.
 
-~> This will be a warning style alert.
+=> This will be a success style alert.
+
+~> This will be a warning style alert!
 
-!> This will be a danger style alert.
+!> This will be a danger style alert!!!
 ```
 
 Which renders:
 
-=> This will be a success style alert.
+> This is a standard blockquote (non-alert).
 
 -> This will be a standard note style alert.
 
-~> This will be a warning style alert.
+=> This will be a success style alert.
+
+~> This will be a warning style alert!
 
-!> This will be a danger style alert.
+!> This will be a danger style alert!!!