update style

Author: mydea

app/globals.css

@@ -63,6 +63,9 @@
   --flame7: #edcf9e;
   --flame8: #ffefae;
 
+  /* Desaturated oranges */
+  --desatFlame8: #fefbe9;
+
   /* A range of desaturated purples */
   --desatPurple0: #0f0a1f;
   --desatPurple1: #231c3d;

src/components/alert/index.tsx

@@ -1,4 +1,5 @@
 import {ReactNode} from 'react';
+import {ExclamationTriangleIcon, InfoCircledIcon} from '@radix-ui/react-icons';
 
 // explicitly not usig CSS modules here
 // because there's some prerendered content that depends on these exact class names
@@ -11,10 +12,15 @@ type AlertProps = {
 };
 
 export function Alert({title, children, level = 'info'}: AlertProps) {
+  const Icon = level === 'warning' ? ExclamationTriangleIcon : InfoCircledIcon;
+
   return (
     <div className={`alert ${'alert-' + level}`} role="alert">
-      {title && <h5 className="alert-header">{title}</h5>}
-      <div className="alert-body content-flush-bottom">{children}</div>
+      <Icon className='alert-icon' />
+      <div className="alert-content">
+        {title && <h5 className="alert-header">{title}</h5>}
+        <div className="alert-body content-flush-bottom">{children}</div>
+      </div>
     </div>
   );
 }

src/components/alert/styles.scss

@@ -1,53 +1,54 @@
 .alert {
   background: var(--accent-2);
-  border-color: var(--accent-12);
-  border-left: 3px solid var(--accent-12);
   margin-bottom: 1rem;
   padding: 0.5rem 1rem;
-
-  > .alert-header {
-    font-weight: 500;
-    position: relative;
-    font-size: 1em;
-    margin-bottom: 0.5rem;
-    margin-top: 0.25rem;
-  }
+  border-radius: 6px;
+  color: var(--gray-500);
+  display: flex;
+  flex-direction: row;
+  gap: 0.7em;
+  line-height: 1.75em;
 
   p {
     margin-bottom: 0.5rem;
+    margin-top: 0;
   }
 
   strong {
     font-weight: 500;
   }
 
-  ul {
+  ul, ol {
     padding-inline-start: 2rem;
+    margin-top: 0;
   }
 
-  p:last-of-type,
-  ul:last-of-type {
-    margin-bottom: 0;
+  li {
+    padding-inline-start: 0;
+    margin: 0;
   }
+}
 
-  p:first-of-type,
-  ul:first-of-type {
-    margin-top: 0;
-  }
+.alert-icon {
+  flex: 1em 0 0;
+  height: 1.75em;
+}
 
-  .alert-body {
-    font-size: 0.9rem;
-  }
+.alert-content {
+}
+
+.alert-header {
+  font-weight: 500;
 }
 
 .alert-info {
-  background: var(--blue-2);
-  border-color: var(--blue-11);
-  color: var(--blue-12);
+  background: var(--desatPurple15);
 }
 
 .alert-warning {
-  background: var(--amber-2);
-  border-color: var(--amber-10);
-  color: var(--amber-12);
+  background: var(--desatFlame8);
+
+  > .alert-icon {
+    color: var(--flame5);
+  }
 }