Refined base toast styles

components/Toast/index.scss

@@ -0,0 +1,35 @@
+.Toast {
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: $unit-2x;
+  padding: $unit-3x;
+
+  .Header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    h3 {
+      font-size: $font-regular;
+      font-weight: $medium;
+    }
+
+    button {
+      background: none;
+      border: none;
+      font-size: $font-regular;
+      font-weight: $bold;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  p {
+    line-height: 1.3;
+  }
+}

components/Toast/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import * as ToastPrimitive from '@radix-ui/react-toast'
 import './index.scss'
 
-interface Props {
+interface Props extends ToastPrimitive.ToastProps {
   className?: string
   title?: string
   content: string
@@ -22,16 +22,24 @@ const Toast = ({
 
   return (
     <ToastPrimitive.Root {...props} className={classes}>
-      {title && <ToastPrimitive.Title>{title}</ToastPrimitive.Title>}
-      <ToastPrimitive.Description>{content}</ToastPrimitive.Description>
+      <div className="Header">
+        {title && (
+          <ToastPrimitive.Title asChild>
+            <h3>{title}</h3>
+          </ToastPrimitive.Title>
+        )}
+        <ToastPrimitive.Close aria-label="Close">
+          <span aria-hidden>×</span>
+        </ToastPrimitive.Close>
+      </div>
+      <ToastPrimitive.Description asChild>
+        <p>{content}</p>
+      </ToastPrimitive.Description>
       {children && (
         <ToastPrimitive.Action asChild altText={content}>
           {children}
         </ToastPrimitive.Action>
       )}
-      <ToastPrimitive.Close aria-label="Close">
-        <span aria-hidden>×</span>
-      </ToastPrimitive.Close>
     </ToastPrimitive.Root>
   )
 }