Frontend: Improve Styling Of Toast Component.

CSS Of Toast Components is modified.
shivansh-bhatnagar18 · Jun 25, 2024 · 75f214e · 75f214e
1 parent ed58ec4
commit 75f214e
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 31 deletions.
diff --git a/frontend/src/library/toast/Toast.tsx b/frontend/src/library/toast/Toast.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ToastContext } from './toast-context';
 import './toast.css';
 
@@ -17,12 +17,28 @@ function useTimeout(callback: () => void, duration: number) {
         };
     }, [duration]);
 }
-type toastProperties = {
+
+type ToastProperties = {
     message: string;
     close: () => void;
     duration: number;
     position: string;
-    color: string;
+    color: 'info' | 'warning' | 'error' | 'success';
+};
+
+const getIconClass = (color: 'info' | 'warning' | 'error' | 'success'): string => {
+    switch (color) {
+        case 'info':
+            return 'fa-solid fa-circle-info';
+        case 'warning':
+            return 'fa-solid fa-triangle-exclamation';
+        case 'error':
+            return 'fa-solid fa-times-circle';
+        case 'success':
+            return 'fa-solid fa-check-circle';
+        default:
+            return '';
+    }
 };
 
 export function Toast({
@@ -31,15 +47,21 @@ export function Toast({
     duration,
     position,
     color,
-}: toastProperties) {
+}: ToastProperties) {
     useTimeout(() => {
         close();
     }, duration);
+
+    const iconClass = getIconClass(color);
+
     return (
         <div className={`toast ${position}-animation ${color}`}>
-            <p>{message}</p>
+            <p>
+                <i className={iconClass} style={{ marginRight: '8px' }}></i>
+                {message}
+            </p>
             <button className="close-button" onClick={close}>
-                {'x'}
+                <i className="fa-regular fa-circle-xmark"></i>
             </button>
         </div>
     );
@@ -48,36 +70,39 @@ export function Toast({
 type ToastProviderProperties = {
     children: React.ReactElement;
 };
+
 type ToastType = {
     message: string;
     id: number;
     duration: number;
     position: string;
-    color: string;
+    color: 'info' | 'warning' | 'error' | 'success';
 };
 
 export function ToastProvider({ children }: ToastProviderProperties) {
     const [toasts, setToasts] = useState<ToastType[]>([]);
     const [position, setPosition] = useState('top-left');
+
     type Options = {
         message?: string;
         duration?: number;
         position?: string;
         color?: 'info' | 'warning' | 'error' | 'success';
     };
+
     const openToast = useCallback(
         ({
             message = '',
             duration = 5000,
             position = 'top-center',
             color = 'info',
         }: Options = {}) => {
-            const newToast = {
-                message: message,
+            const newToast: ToastType = {
+                message,
                 id: Date.now(),
-                duration: duration,
-                position: position,
-                color: color,
+                duration,
+                position,
+                color,
             };
             setToasts((prevToast) => [...prevToast, newToast]);
             setPosition(position);
@@ -95,43 +120,41 @@ export function ToastProvider({ children }: ToastProviderProperties) {
         setToasts((toasts) => {
             return toasts.map((toast) => {
                 if (toast.id === id) {
-                    if (toast.position == 'top-left')
+                    if (toast.position === 'top-left')
                         toast.position = 'fade-out-left';
-                    else if (toast.position == 'top-right')
+                    else if (toast.position === 'top-right')
                         toast.position = 'fade-out-right';
-                    else if (toast.position == 'top-center')
+                    else if (toast.position === 'top-center')
                         toast.position = 'fade-out-center';
                 }
                 return toast;
             });
         });
     }, []);
+
     const contextValue = useMemo(
         () => ({
             open: openToast,
             close: closeToast,
         }),
         [openToast, closeToast]
     );
+
     return (
         <ToastContext.Provider value={contextValue}>
             {children}
             <div className={`toasts ${position}`}>
                 {toasts &&
-                    toasts.map((toast) => {
-                        return (
-                            <Toast
-                                key={toast.id}
-                                message={toast.message}
-                                close={() => {
-                                    closeToast(toast.id);
-                                }}
-                                duration={toast.duration}
-                                position={toast.position}
-                                color={toast.color}
-                            />
-                        );
-                    })}
+                    toasts.map((toast) => (
+                        <Toast
+                            key={toast.id}
+                            message={toast.message}
+                            close={() => closeToast(toast.id)}
+                            duration={toast.duration}
+                            position={toast.position}
+                            color={toast.color}
+                        />
+                    ))}
             </div>
         </ToastContext.Provider>
     );

diff --git a/frontend/src/library/toast/toast.css b/frontend/src/library/toast/toast.css
@@ -6,12 +6,15 @@
 }
 
 .toast {
-    color: black;
-    border-radius: 5px;
+    border-width: 5px;
+    border-color: black;
+    border-radius: 25px;
     padding: 10px 10px;
     width: 300px;
     position: relative;
     display: flex;
+    font-family: Kavoon;
+    font-size: small;
 }
 
 .top-right {
@@ -156,29 +159,35 @@
 }
 
 .info {
+    color: #000;
     background-color: cyan;
 }
 
 .success {
+    color: #fff;
     background-color: #5cb85c;
 }
 
 .error {
+    color: #fff;;
     background-color: #d9534f;
 }
 .warning {
+    color: #000;
     background-color: #f0ad4e;
 }
 
 .close-button {
     position: absolute;
     right: 0px;
     top: 0px;
+    margin-top: 4px;
     padding: 0px 5px;
     background: none;
     cursor: pointer;
     border: transparent;
     color: black;
+    font-size: 23px;
 }
 
 @media (max-width: 640px) {