Cleaned up unused classNames and imported Components

frontend/src/App.jsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import {Grid, GridItem, Button, Box, Container, Image, Flex, Center, SimpleGrid, Text} from "@chakra-ui/react"
+import {Grid, Button, Box, Container, Image, Flex, Center, Text} from "@chakra-ui/react"
 import { LuMoon, LuSun } from "react-icons/lu";
 import { useColorMode } from "@/components/ui/color-mode"
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
@@ -25,7 +25,6 @@ function App() {
             <Router>
                 <div className="App">
                     <Container mt="5">
-
                         <Grid>
                             <Box
                                 p="4"

frontend/src/components/PayPalButton.jsx

@@ -52,7 +52,7 @@ const PayPalButton = ({ orderData, onCreateOrder, onCaptureOrder, loading }) =>
     }
 
     return (
-        <div className="paypal-button-wrapper">
+        <div>
             {paypalError && (
                 <Alert.Root mb="5" status="warning">
                     <Alert.Indicator />

frontend/src/pages/Cancel.jsx

@@ -3,9 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import {
     Alert,
     Text,
-    Spinner,
     Center,
-    VStack,
     HStack,
     Button,
     Accordion,
@@ -37,7 +35,7 @@ const Cancel = () => {
     };
 
     return (
-        <div className="payment-container">
+        <div>
             <Alert.Root status="error" title="Payment Cancelled">
                 <Alert.Indicator />
                 <Alert.Content>

frontend/src/pages/Payment.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import {
     Alert,
     Heading,
-    DataList,
     Timeline,
     Text,
     Spinner,
@@ -12,7 +11,7 @@ import {
     EmptyState,
     VStack, HStack
 } from "@chakra-ui/react"
-import { LuShoppingBasket, LuPackageCheck, LuLoaderCircle, LuMail } from "react-icons/lu";
+import { LuShoppingBasket, LuPackageCheck, LuMail } from "react-icons/lu";
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import OrderSummary from '../components/OrderSummary.jsx';
 import PayPalButton from '../components/PayPalButton.jsx';
@@ -170,7 +169,7 @@ const Payment = () => {
     }
 
     return (
-        <div className="payment-container">
+        <div>
             <Heading as="h1" fontSize="2xl" textAlign="center" mb="10">Secure Payment with PayPal</Heading>
             {order.length === 0 ?
                 <Center>
@@ -266,16 +265,21 @@ const Payment = () => {
                 </GridItem>
             </Grid>
             }
-
-
-            <div className="payment-card">
-
-                <div className="payment-body">
             {error && (
-                        <div className="error-message">
+                <Alert.Root status="error" mb="5">
-                            <i className="fas fa-exclamation-triangle me-2"></i>
+                    <Alert.Indicator/>
-                            {error}
+                    <Alert.Content>
-                        </div>
+                        <Alert.Title>{error}</Alert.Title>
+                        <Alert.Description>
+                            <Text mb="2">We're available via email and usually respond within a few hours. So don't
+                                hesitate to reach out if you need assistance - we're here to help.</Text>
+                            <HStack>
+                                <LuMail/>
+                                <Text>{import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
+                            </HStack>
+                        </Alert.Description>
+                    </Alert.Content>
+                </Alert.Root>
             )}
 
             {backendStatus && (
@@ -284,7 +288,8 @@ const Payment = () => {
                     <Alert.Content>
                         <Alert.Title>Payment system connected</Alert.Title>
                         <Alert.Description>
-                                    <Text mb="2">We're available via email and usually respond within a few hours. So don't hesitate to reach out if you need assistance - we're here to help.</Text>
+                            <Text mb="2">We're available via email and usually respond within a few hours. So don't
+                                hesitate to reach out if you need assistance - we're here to help.</Text>
                             <HStack>
                                 <LuMail/>
                                 <Text>{import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
@@ -313,8 +318,6 @@ const Payment = () => {
                 </Alert.Root>
             )}
         </div>
-            </div>
-        </div>
     );
 };
 

frontend/src/pages/Success.jsx

@@ -76,14 +76,15 @@ const Success = () => {
     }
 
     return (
-        <div className="payment-container">
+        <div>
             <Alert.Root status="success" title="Payment Successful!" mb="5">
                 <Alert.Indicator/>
                 <Alert.Content>
                     <Alert.Title>Payment Successful!</Alert.Title>
                     <Alert.Description>
                         <Text>Thank you for your payment. Your transaction has been completed successfully.</Text>
-                        <Text>A confirmation email has been sent to your email address with all the transaction details.</Text>
+                        <Text>A confirmation email has been sent to your email address with all the transaction
+                            details.</Text>
                         <Text>Redirecting you back to checkout in <strong>{countdown}</strong> seconds...</Text>
                     </Alert.Description>
                 </Alert.Content>
@@ -131,10 +132,6 @@ const Success = () => {
                 )}
             </DataList.Root>
 
-
-
-            <div className="payment-card">
-                <div className="payment-body text-center">
             <Center mt="5" mb="5">
                 <a
                     href={returnUrl}
@@ -148,8 +145,7 @@ const Success = () => {
                     </HStack>
                 </a>
             </Center>
-                </div>
+
-            </div>
         </div>
     );
 };