Merge branch 'logo-fix' of github.com:LitZeus/SCROLLME--ECOMMERCE-WEB…

…SITE into LitZeus-logo-fix

.prettierrc.cjs

@@ -13,7 +13,7 @@ module.exports = {
   proseWrap: 'preserve',
   quoteProps: 'as-needed',
   requirePragma: false,
-  semi: false,
+  semi: true,
   singleQuote: true,
   trailingComma: 'none',
   useTabs: false,

src/api/endPoints.js

@@ -23,5 +23,5 @@ export const CART_ENDPOINTS = {
 };
 
 export const AUTH_STATUS = {
-  AUTH_STATUS: `${API_BASE_URL}/auth/status`,
-};
+  AUTH_STATUS: `${API_BASE_URL}/auth/status`
+};

src/components/Footer.jsx

@@ -1,8 +1,9 @@
 import { Email, Facebook, Instagram, LinkedIn, LocalPhone, LocationOn } from '@mui/icons-material';
+import XIcon from '@mui/icons-material/X';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import Logo from '../components/Logo';
 import { mobile } from '../responsive';
-import { Link } from 'react-router-dom';
-import XIcon from '@mui/icons-material/X';
 
 const Container = styled.div`
   display: flex;
@@ -16,10 +17,6 @@ const Left = styled.div`
   padding: 20px;
 `;
 
-const Logo = styled.h1`
-  font-size: 28px;
-`;
-
 const Desc = styled.p`
   margin: 20px 0px;
   line-height: 1.6;
@@ -96,9 +93,7 @@ const Footer = () => {
   return (
     <Container>
       <Left>
-        <Logo>
-          SCROLL<span style={{ color: 'teal' }}>ME</span>.
-        </Logo>
+        <Logo /> {/* Using Logo component directly */}
         <Desc>
           Welcome to <span style={{ color: 'teal', fontWeight: 600 }}>ScrollMe</span> Web Store, your ultimate destination for trendy and
           fashionable clothing. We pride ourselves on curating a diverse collection of high-quality apparel that caters to your unique style
@@ -140,7 +135,6 @@ const Footer = () => {
       </Center>
       <Right>
         <Title>Contact</Title>
-        {/* Implimented LocationOn icon wrapped with link to open Google Maps pointing to the store's location */}
         <ContactItem>
           <a
             href='https://www.google.com/maps?q=622 Dixie Path, South Tobinchester 98336'
@@ -157,7 +151,6 @@ const Footer = () => {
             622 Dixie Path, South Tobinchester 98336
           </a>
         </ContactItem>
-        {/* LocalPhone icon wrapped with link to open phone dialer with the phone number */}
         <ContactItem>
           <a
             href='tel:+12345678'
@@ -172,7 +165,6 @@ const Footer = () => {
             +1 234 56 78
           </a>
         </ContactItem>
-        {/* Email icon wrapped with mailto link to open the default email client */}
         <ContactItem>
           <Email style={{ marginRight: '10px' }} />
           <a href='mailto:[email protected]' style={{ color: 'inherit', textDecoration: 'none' }}>

src/components/Logo.jsx

@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+// Styled component for the Logo (optional)
+const LogoWrapper = styled.h1``;
+
+const Logo = () => {
+  return (
+    <LogoWrapper>
+      <Link to='/'>
+        SCROLL<span style={{ color: 'teal' }}>ME</span>
+      </Link>
+    </LogoWrapper>
+  );
+};
+
+export default Logo;

src/components/Navbar.jsx

@@ -9,6 +9,7 @@ import { AUTH_ENDPOINTS } from '../api/endPoints';
 import axios from 'axios';
 import { logOut } from '../store/slices/userSlice';
 import { Badge } from '@chakra-ui/react';
+import Logo from '../components/Logo';
 
 const Container = styled.div`
   height: 60px;
@@ -60,10 +61,6 @@ const Center = styled.div`
   text-align: center;
 `;
 
-const Logo = styled.h1`
-  font-weight: bold;
-  ${mobile({ fontSize: '24px;' })}
-`;
 const Right = styled.div`
   flex: 1;
   display: flex;
@@ -122,16 +119,15 @@ const Navbar = () => {
         <Left>
           <Language>EN</Language>
           <SearchContainer>
-            <Input />
+            <Input placeholder='Search' />
             <SearchIcon style={{ color: 'gray', fontSize: 16 }} />
           </SearchContainer>
         </Left>
         <Center>
-          <Logo>
-            <Link to='/'>
-              SCROLL<span style={{ color: 'teal' }}>ME</span>
-            </Link>
-          </Logo>
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 'bold' }}>
+            {' '}
+            <Logo />{' '}
+          </div>
         </Center>
         <Right>
           <MenuItem>
@@ -150,17 +146,10 @@ const Navbar = () => {
           {isAuthenticated && <MenuItem onClick={handleLogout}>LOG OUT</MenuItem>}
           <MenuItem>
             <Link to='/cart'>
-                <Box position="relative">
+              <Box position='relative'>
                 <ShoppingCartOutlined />
                 {totalQuantity > 0 && (
-                  <Badge
-                    colorScheme="teal"
-                    borderRadius="full"
-                    position="absolute"
-                    top="-5px"  
-                    right="-10px"
-                    fontSize="0.8em"
-                  >
+                  <Badge colorScheme='teal' borderRadius='full' position='absolute' top='-5px' right='-10px' fontSize='0.8em'>
                     {totalQuantity}
                   </Badge>
                 )}

src/components/ProductGallery.jsx

@@ -4,7 +4,6 @@ import { listProductsAPI } from '../services/products/productService';
 import { Box } from '@mui/material';
 import { Button, Heading, HStack, SimpleGrid, Spinner, Text } from '@chakra-ui/react';
 
-
 const ProductGallery = () => {
   const [products, setProducts] = useState([]);
   const [loading, setLoading] = useState(true);

src/hooks/useAuthCheck.js

@@ -13,13 +13,13 @@ const useAuthCheck = () => {
     const checkAuthStatus = async () => {
       try {
         const response = await checkAuthStatusAPI();
-        console.log("auth status response", response);
+        console.log('auth status response', response);
         let isAuthenticated = false;
-        if(response.status === 200 && response.data.message === "Authenticated"){
+        if (response.status === 200 && response.data.message === 'Authenticated') {
           // User is authenticated, do nothing.
           return;
-        }else {
-          if(isAuthenticated){
+        } else {
+          if (isAuthenticated) {
             dispatch(changeAuthenticated(false));
             navigate('/login');
           }

src/pages/Cart.jsx

@@ -4,14 +4,13 @@ import Announcement from '../components/Announcement';
 import Footer from '../components/Footer';
 import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import { useState } from "react";
+import { useState } from 'react';
 import { Text } from '../styles/Text';
 import { LeftDivider } from '../styles/Divider';
 import { useDispatch } from 'react-redux';
 import { Box, useToast } from '@chakra-ui/react';
 import { deleteCartItem, updateCartItem } from '../store/slices/cartSlice';
 
-
 const Container = styled.div``;
 
 const Wrapper = styled.div`
@@ -204,14 +203,16 @@ const Cart = () => {
   const dispatch = useDispatch();
 
   const handleQuantityChange = (productId, quantity) => {
-    dispatch(updateCartItem({productId, quantity}))
+    dispatch(updateCartItem({ productId, quantity }))
       .unwrap()
       .then(() => {
         toast({
           position: 'bottom-right',
           render: () => (
-            <Box color='white' p={1} bg='teal.500' borderRadius="xs">Quantity updated!</Box>
-          ),
+            <Box color='white' p={1} bg='teal.500' borderRadius='xs'>
+              Quantity updated!
+            </Box>
+          )
         });
       })
       .catch((error) => {
@@ -220,8 +221,10 @@ const Cart = () => {
           position: 'bottom-right',
           status: 'error',
           render: () => (
-            <Box color='white' p={3} bg='red.500'>Error while updated quantity!</Box>
-          ),
+            <Box color='white' p={3} bg='red.500'>
+              Error while updated quantity!
+            </Box>
+          )
         });
       });
   };
@@ -235,7 +238,7 @@ const Cart = () => {
           description: 'The item has been successfully removed from your cart.',
           status: 'success',
           duration: 3000,
-          isClosable: true,
+          isClosable: true
         });
       })
       .catch((error) => {
@@ -244,7 +247,7 @@ const Cart = () => {
           description: 'There was an issue removing the item from your cart.',
           status: 'error',
           duration: 3000,
-          isClosable: true,
+          isClosable: true
         });
         console.error(error);
       });
@@ -286,10 +289,8 @@ const Cart = () => {
                       onSaveForLater={() => handleSaveForLater(item.productId)}
                     />
                   </Details>
-
                 </ProductDetail>
                 <PriceDetail>
-
                   <ProductPrice>$ {item.price}</ProductPrice>
                 </PriceDetail>
               </Product>
@@ -325,7 +326,6 @@ const Cart = () => {
 
 export default Cart;
 
-
 const ContainerWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -391,9 +391,7 @@ const CartItemActions = ({ initialQuantity, onChange, onRemove, onSaveForLater }
           –
         </IconButton>
         <Text>{quantity}</Text>
-        <IconButton onClick={handleIncrement}>
-          +
-        </IconButton>
+        <IconButton onClick={handleIncrement}>+</IconButton>
       </Controls>
       <Actions>
         <span onClick={onRemove}>Remove</span>

src/pages/Login.jsx

@@ -4,9 +4,10 @@ import { useDispatch } from 'react-redux';
 import { changeAuthenticated, userSignIn } from '../store/slices/userSlice';
 import { mobile, tablet } from '../responsive';
 import { useToast } from '@chakra-ui/react';
-import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'; // Import user creation method
-import { auth } from '../context/Firebase'; // Update import
-import { FaGoogle } from 'react-icons/fa'; // Add this import
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+import { auth } from '../context/Firebase';
+import { FaGoogle } from 'react-icons/fa';
+import Logo from '../components/Logo';
 
 const Container = styled.div`
   width: 100vw;
@@ -91,7 +92,7 @@ const Login = () => {
           isClosable: true
         });
         dispatch(changeAuthenticated(true));
-        console.log("Redirecting to /");
+        console.log('Redirecting to /');
         navigate('/');
       })
       .catch((error) => {
@@ -134,6 +135,11 @@ const Login = () => {
   return (
     <Container>
       <Wrapper>
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 'bold' }}>
+          {' '}
+          <Logo />{' '}
+        </div>
+        <br />
         <Title>SIGN IN</Title>
         <Form onSubmit={(e) => handleSubmit(e)}>
           <Input placeholder='username' name='username' type='text' required />

src/pages/Product.jsx

@@ -23,7 +23,7 @@ const Product = () => {
   const toast = useToast();
   const dispatch = useDispatch();
 
-  console.log("product", product);
+  console.log('product', product);
 
   useEffect(() => {
     const fetchProduct = async () => {
@@ -42,15 +42,15 @@ const Product = () => {
 
   const handleAddToCart = async () => {
     try {
-      console.log("product", product);
+      console.log('product', product);
       const itemToAdd = {
         productId: product._id,
         name: product.name,
         price: product.price,
         image: product.imageUrl,
         brand: product.brand,
         category: product.category,
-        quantity: 1,
+        quantity: 1
       };
       const result = await dispatch(addToCart(itemToAdd)).unwrap();
       if (result.response) {

src/pages/Register.jsx

@@ -8,10 +8,10 @@ import { Triangle } from 'react-loader-spinner';
 import { mobile, tablet } from '../responsive';
 import PasswordStrengthBar from 'react-password-strength-bar';
 import { useToast } from '@chakra-ui/react';
-
-import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'; // Import user creation method
-import { auth } from '../context/Firebase'; // Update import
-import { FaGoogle } from 'react-icons/fa'; // Add this import
+import Logo from '../components/Logo';
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+import { auth } from '../context/Firebase';
+import { FaGoogle } from 'react-icons/fa';
 
 const LoaderOverlay = styled.div`
   position: absolute;
@@ -268,6 +268,11 @@ const Register = () => {
       )}
       <Container>
         <Wrapper>
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 'bold' }}>
+            {' '}
+            <Logo />{' '}
+          </div>
+          <br />
           <Title>CREATE AN ACCOUNT</Title>
           <Form onSubmit={(e) => handleSubmit(e)}>
             <Input type='text' name='firstName' placeholder='first name' required />

src/services/auth/authService.js

@@ -1,16 +1,16 @@
-import { AUTH_STATUS } from "../../api/endPoints";
-import { createFetchOptions } from "../../utils/apiConfig";
+import { AUTH_STATUS } from '../../api/endPoints';
+import { createFetchOptions } from '../../utils/apiConfig';
 import axios from 'axios';
 
 export const checkAuthStatusAPI = async () => {
-    const config = createFetchOptions('GET', true);
-    return await axios
-        .get(AUTH_STATUS.AUTH_STATUS, config)
-        .then((response) => {
-            return Promise.resolve(response.data);
-        })
-        .catch((error) => {
-            console.error(error.message);
-            return Promise.reject(error.data);
-        });
-};
+  const config = createFetchOptions('GET', true);
+  return await axios
+    .get(AUTH_STATUS.AUTH_STATUS, config)
+    .then((response) => {
+      return Promise.resolve(response.data);
+    })
+    .catch((error) => {
+      console.error(error.message);
+      return Promise.reject(error.data);
+    });
+};