fix: issue with toasts not triggering on page load and fix padding issue

components/Profile/AddCreditCardButton/index.tsx

@@ -29,21 +29,27 @@ function useAddCardResultToast() {
     const error = searchParams.get("error")
 
     if (success) {
-      toast.success(
-        intl.formatMessage({ id: "Your card was successfully saved!" })
-      )
+      setTimeout(() => {
+        toast.success(
+          intl.formatMessage({ id: "Your card was successfully saved!" })
+        )
+      })
     } else if (cancel) {
-      toast.warning(
-        intl.formatMessage({
-          id: "You canceled adding a new credit card.",
-        })
-      )
+      setTimeout(() => {
+        toast.warning(
+          intl.formatMessage({
+            id: "You canceled adding a new credit card.",
+          })
+        )
+      })
     } else if (failure || error) {
-      toast.error(
-        intl.formatMessage({
-          id: "Something went wrong and we couldn't add your card. Please try again later.",
-        })
-      )
+      setTimeout(() => {
+        toast.error(
+          intl.formatMessage({
+            id: "Something went wrong and we couldn't add your card. Please try again later.",
+          })
+        )
+      })
     }
 
     router.replace(pathname)

components/TempDesignSystem/Toasts/toasts.module.css

@@ -9,7 +9,7 @@
   width: var(--width);
 }
 
-.message {
+.toast .message {
   padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
 }