updating toast for small screens

BigSamu · Oct 31, 2023 · fed5005 · fed5005
1 parent a25b7b4
commit fed5005
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/components/ContactToast.jsx b/src/components/ContactToast.jsx
@@ -1,25 +1,31 @@
-import React, { useContext } from 'react';
-import { Toast } from 'flowbite-react';
-import { FaTelegramPlane, FaTimesCircle } from 'react-icons/fa';
-import ToastContext from '../contexts/ToastContext';
+import React, { useContext } from "react";
+import { Toast } from "flowbite-react";
+import { FaTelegramPlane, FaTimesCircle } from "react-icons/fa";
+import ToastContext from "../contexts/ToastContext";
 
 const ContactToast = () => {
   const { toastInfo, setToastInfo } = useContext(ToastContext);
 
-  const backgroundColor = toastInfo.type === 'success' ? '!bg-green-200 dark:!bg-green-700' : '!bg-red-200 dark:!bg-red-700';
-  const textColor = toastInfo.type === 'success' ? 'text-green-500 dark:text-green-200' : 'text-red-500 dark:text-red-200';
+  const backgroundColor =
+    toastInfo.type === "success" ? "!bg-green-700" : "!bg-red-700";
+  const textColor =
+    toastInfo.type === "success" ? "text-green-200" : "text-red-200";
 
   return (
-    <div className="fixed top-5 right-5 z-50">
-      <Toast onClose={() => setToastInfo(null)} className={backgroundColor}>
-        <div className={`inline-flex h-8 w-8 items-center justify-center rounded-lg ${textColor}`}>
-          {toastInfo.type === 'success' ? (
+    <div className="fixed sm:top-5 sm:right-5 sm:left-auto bottom-0 sm:bottom-auto w-full sm:w-auto z-50">
+      <Toast onClose={() => setToastInfo(null)} className={`${backgroundColor} rounded-none sm:rounded-lg`}>
+        <div
+          className={`inline-flex h-8 w-8 items-center justify-center ${textColor}`}
+        >
+          {toastInfo.type === "success" ? (
             <FaTelegramPlane className={`h-5 w-5 ${textColor}`} />
           ) : (
             <FaTimesCircle className={`h-5 w-5 ${textColor}`} />
           )}
         </div>
-        <div className={`mx-3 text-sm font-normal ${textColor}`}>{toastInfo.message}</div>
+        <div className={`mx-3 text-sm font-normal ${textColor}`}>
+          {toastInfo.message}
+        </div>
         <Toast.Toggle />
       </Toast>
     </div>

diff --git a/src/contexts/ToastContext.jsx b/src/contexts/ToastContext.jsx
@@ -5,7 +5,6 @@ const ToastContext = createContext();
 
 export const ToastProvider = ({ children }) => {
   const [toastInfo, setToastInfo] = useState({ message:"", type:"", visible: false });
-
   const showToast = (message, type, duration = 5000) => {
     setToastInfo({ message, type, visible: true });