feat(frontend): add toast system (#34)

* build(frontend): add toast system

This commit introduces the toast system which can be used across all pages by a function.

Fixes #27

* feat(frontend): add responsive toast message

This commit introduces responsive toast message for better user experience on all devices.

Fixes #27

Author: cosypix

package-lock.json

@@ -20,7 +20,8 @@
     "lottie-react": "^2.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.0"
+    "react-router-dom": "^7.6.0",
+    "react-toastify": "^11.0.5"
   },
   "lint-staged": {
     "src/**/*.{ts,html}": [

package.json

@@ -9,25 +9,31 @@ import MainLayout from "./layouts/MainLayout.jsx";
 import Preloader from "./pages/Preloader/Preloader";
 import ProfilePage from "./pages/Profile/ProfilePage.jsx";
 import PrivateRoutesWrapper from "./components/ProtectedRoutes/PrivateRoutesWrapper.jsx";
+import { ToastContainer } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css'
 
 function App() {
   return (
-    <Routes>
-      <Route element={<MainLayout />}>
-        <Route path="/" element={<Landingpage />} />
-        <Route path="/login" element={<Login />} />
-        <Route element={<PrivateRoutesWrapper />}>
-          <Route path="/home" element={<Home />} />
-          <Route path="/profile" element={<ProfilePage />} />
-          <Route path="/preloader" element={<Preloader />} />
-          {/* Add more protected routes here */}
+    <>
+      <ToastContainer />
+    
+      <Routes>
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<Landingpage />} />
+          <Route path="/login" element={<Login />} />
+          <Route element={<PrivateRoutesWrapper />}>
+            <Route path="/home" element={<Home />} />
+            <Route path="/profile" element={<ProfilePage />} />
+            <Route path="/preloader" element={<Preloader />} />
+            {/* Add more protected routes here */}
+          </Route>
+          <Route path="/callback" element={<Callback />} />
         </Route>
-        <Route path="/callback" element={<Callback />} />
-      </Route>
 
 
-      <Route path="*" element={<NotFound />} />
-    </Routes>
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </>
   );
 }
 

src/App.jsx

@@ -0,0 +1,77 @@
+.Toastify__toast {
+  background: transparent !important;
+  padding: 0 !important;
+  width: 0.5vw !important;
+  height: 0.1vw !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.toast-message {
+  font-family: 'Poppins';
+  font-weight: 400;
+  font-style: 'regular';
+  font-size: 1.8vw;
+  white-space: nowrap;
+  letter-spacing: 2%;
+}
+
+.like-toast {
+  background: #D96C81 !important;
+  color: #541312 !important;
+  width: 42vw !important;
+  height: 1vw !important;
+  top: 3vw;
+  border: 0.245rem solid;
+  opacity: 90%;
+  box-shadow: 0px 0.8vw 0.8vw #731d1c4f !important;
+  display: flex;
+  border-color:  #ffffff;
+  border-bottom-color: #999999;
+  border-radius: 78.65px !important;
+  padding-top: 1.5vw;
+  padding-right: 8vw;
+  padding-bottom: 1.5vw;
+  padding-left: 8vw;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.toast-icon.left,
+.toast-icon.right {
+  width: 7vw;
+  height: 10vw;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  animation: fadeIn 0.6s ease forwards 0.4s;
+  z-index: 0;
+}
+
+.toast-icon.left {
+  left: -3.5vw;
+}
+
+.toast-icon.right {
+  right: -3.5vw;
+
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) scale(1);
+  }
+}

src/assets/Toast/Like/heart_left.svg

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import './ToastContent.css';
+import heartLeftIcon from '../../assets/Toast/Like/heart_left.svg';
+import heartRightIcon from '../../assets/Toast/Like/heart_right.svg';
+
+const ToastTemplate = {
+  like: {
+    className: 'like-toast',
+    leftIcon: heartLeftIcon,
+    rightIcon: heartRightIcon,
+    message: "Crush initiated. Let’s hope it’s mutual ✨",
+  }
+  // more templates will be added here
+}
+
+const ToastContent = ({ type }) => {
+  const [showIcons, setShowIcons] = useState(false);
+  const ToastTemplates = ToastTemplate[type];
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowIcons(true), 400);
+    return () => clearTimeout(timer);
+  }, []);
+
+ return (
+  <div className={`toast-content ${ToastTemplates.className}`}>
+    {showIcons && <img src={ToastTemplates.leftIcon} className="toast-icon left" />}
+    <p className="toast-message">{ToastTemplates.message}</p>
+    {showIcons && <img src={ToastTemplates.rightIcon} className="toast-icon right" />}
+  </div>
+);
+
+};
+
+export default ToastContent;

src/assets/Toast/Like/heart_right.svg

@@ -0,0 +1,23 @@
+import { toast } from 'react-toastify';
+import ToastContent from './ToastContent';
+
+const useCustomToast = () => {
+  const showToast = (type) => {
+    toast(<ToastContent type={type} />, {
+      toastClassName: ({type}) => `toast-shell ${type}-toast`,
+      position: "top-center",
+      autoClose: 3000,
+      hideProgressBar: true,
+      closeOnClick: false,
+      pauseOnHover: false,
+      draggable: false,
+      closeButton: false,
+});
+
+
+  };
+
+  return { showToast };
+};
+
+export default useCustomToast;