update

src/App.js

@@ -73,7 +73,7 @@ function App() {
         {/* <Features /> */}
         {/* <Feedback /> */}
         <Alert />
-        {/* <Toast /> */}
+        <Toast />
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
         {/* <ProductTab /> */}

src/components/Toast/index.js

@@ -1,14 +1,20 @@
 import React from "react";
-// import "./SweetAlert.css";
+
+import "./index.scss";
+
 import { toastAlert } from "../../redux/actions/modalActions";
 import { connect } from "react-redux";
 
 function Toast(props) {
   return (
     <div className="mt-5">
+      {" "}
+      <h2 className="mt-4 mx-7 bg-indigo-400 rounded p-4 text-center text-white">
+        inside Toast Components
+      </h2>
       {/* toast1 */}
       <button
-        className="bg-blue-600"
+        className="bg-orange-300 p-4 rounded text-white m-4"
         onClick={() =>
           props.customAlert({
             icon: "error",
@@ -32,7 +38,7 @@ function Toast(props) {
       </button>
       {/* toast2 */}
       <button
-        className="bg-blue-600"
+        className="bg-orange-300 p-4 rounded text-white m-4"
         onClick={() =>
           props.customAlert({
             icon: "success",
@@ -55,7 +61,7 @@ function Toast(props) {
       </button>
       {/* toast3 */}
       <button
-        className="bg-blue-600"
+        className="bg-orange-300 p-4 rounded text-white m-4"
         onClick={() =>
           props.customAlert({
             icon: false,
@@ -79,7 +85,7 @@ function Toast(props) {
       </button>
       {/* toast4 */}
       <button
-        className="bg-blue-600"
+        className="bg-orange-300 p-4 rounded text-white m-4"
         onClick={() =>
           props.customAlert({
             icon: false,
@@ -102,7 +108,7 @@ function Toast(props) {
       </button>
       {/* toast5 */}
       <button
-        className="bg-blue-600"
+        className="bg-orange-300 p-4 rounded text-white m-4"
         onClick={() =>
           props.customAlert({
             icon: false,
@@ -125,7 +131,7 @@ function Toast(props) {
       </button>
       {/* toast6 */}
       <button
-        className="bg-blue-600"
+        className="bg-orange-300 p-4 rounded text-white m-4"
         onClick={() =>
           props.customAlert({
             icon: false,

src/components/Toast/index.scss

@@ -0,0 +1,75 @@
+$red: #e92424;
+$errorToastBgColor: #ffeaea;
+
+$lightGreen: #3ee924;
+$successToastBgColor: #f2ffea;
+
+$white: #fff;
+
+.swal2-popup.swal2-toast .swal2-title {
+  font-size: 14px !important;
+}
+
+.swal2-popup.swal2-toast .swal2-close {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+}
+
+.swal2-timer-progress-bar-container {
+  direction: ltr !important;
+}
+
+// .swal2-timer-progress-bar {
+//   background-color: yellow !important;
+// }
+
+.swal2-icon {
+  font-size: 13px !important;
+}
+
+// ! error Tost
+.error-toast-title {
+  color: $red !important;
+}
+
+.error-toast-modalBox,
+.error-toast-modalBox-timer {
+  background-color: $errorToastBgColor !important;
+}
+
+.error-toast-closeButton {
+  background-color: $red !important;
+  color: $white !important;
+  padding: 15px !important;
+}
+
+.success-toast-title {
+  color: $lightGreen !important;
+}
+
+.success-toast-modalBox,
+.success-toast-modalBox-timer {
+  background-color: $successToastBgColor !important;
+}
+
+.success-toast-closeButton {
+  background-color: $lightGreen !important;
+  color: $white !important;
+  padding: 15px !important;
+}
+
+.error-toast-modalBox-timer .swal2-timer-progress-bar-container {
+  background-color: #e9242455 !important;
+}
+
+.error-toast-modalBox-timer .swal2-timer-progress-bar {
+  background-color: $red !important;
+}
+
+.success-toast-modalBox-timer .swal2-timer-progress-bar-container {
+  background-color: #3ee92455 !important;
+}
+
+.success-toast-modalBox-timer .swal2-timer-progress-bar {
+  background-color: $lightGreen !important;
+}