From 4acd781cc281616c10d02b37c24c048123a14b08 Mon Sep 17 00:00:00 2001
From: Diogo Mateus <diogo@feather-insurance.com>
Date: Wed, 25 Oct 2023 15:37:52 +0100
Subject: [PATCH] refactor(toast): Update toast styles

---
 src/lib/components/toast/index.stories.tsx |  9 +++++++--
 src/lib/components/toast/index.tsx         | 12 ++++++++----
 src/lib/components/toast/style.module.scss | 14 +++++++++-----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/toast/index.stories.tsx b/src/lib/components/toast/index.stories.tsx
index 75ef3457..3f785326 100644
--- a/src/lib/components/toast/index.stories.tsx
+++ b/src/lib/components/toast/index.stories.tsx
@@ -35,7 +35,7 @@ const story = {
   },
   args: {
     title: 'We couldn’t open the chat',
-    description: 'Description description description description description description description',
+    description: "We couldn't open the chat description. We couldn't open the chat description.",
     action: {
       title: 'Send an email',
       onClick: () => {}
@@ -52,7 +52,12 @@ const FakeInlineToast = ({
   type
 }: Omit<ToastProps, 'onDismiss'>) => (
   <div className='mb32'>
-    <div className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}>
+    <div
+      className={classNames(styles.toast, 'br8 bs-lg d-inline-flex')}
+      style={{
+        padding: "12px 20px"
+      }}
+    >
       <Toast 
         title={title}
         onDismiss={() => {}}
diff --git a/src/lib/components/toast/index.tsx b/src/lib/components/toast/index.tsx
index b46ff44b..e2ee1d82 100644
--- a/src/lib/components/toast/index.tsx
+++ b/src/lib/components/toast/index.tsx
@@ -37,14 +37,18 @@ const Toast = ({
   title,
   type = "success"
 }: ToastProps) => (
-  <div className='d-flex jc-between w100'>
+  <div 
+    className={classNames(
+      styles.toastContent,
+      'd-flex jc-between w100'
+  )}>
     <div
       className={classNames(
         styles.toastSidebar, 
         styles[`toastSidebar--${type}`]
       )}
     />
-    <div className='mr16'>
+    <div className='d-flex fd-column jc-center ta-left mr8'>
       <h4 className='p-h4'>{title}</h4>
       
       {description && (
@@ -56,7 +60,7 @@ const Toast = ({
           className={classNames(
             styles.actionButton,
             styles[`actionButton--${type}`],
-            'mt8 c-pointer'
+            'mt8 c-pointer ta-left'
           )}
           onClick={() => {
             action.onClick();
@@ -75,7 +79,7 @@ const Toast = ({
         onClick={onDismiss}
         data-testid="toast-close-button"
       >
-        <XIcon /> 
+        <XIcon size={24} /> 
       </button>
     </div>
   </div>
diff --git a/src/lib/components/toast/style.module.scss b/src/lib/components/toast/style.module.scss
index ecd9f83c..b1569495 100644
--- a/src/lib/components/toast/style.module.scss
+++ b/src/lib/components/toast/style.module.scss
@@ -8,9 +8,13 @@
 .toast {
   position: relative;
   margin: 0;
+  padding: 0;
   width: 392px;
   overflow: hidden;
-  padding: 20px 16px 20px 20px;
+}
+
+.toastContent {
+  padding: 4px 0 4px 8px;
 }
 
 .toastSidebar {
@@ -67,18 +71,18 @@
   }
 
   &--success {
-    color: $ds-green-700;
+    color: $ds-spearmint-700;
 
     &:hover {
-      color: $ds-green-900;
+      color: $ds-spearmint-900;
     }
   }
 
   &--information {
-    color: $ds-blue-500;
+    color: $ds-blue-700;
 
     &:hover {
-      color: $ds-blue-700;
+      color: $ds-blue-900;
     }
   }