From 383a79d9b19b6ef71692ee6cc4305acf647a53ae Mon Sep 17 00:00:00 2001
From: Shashank Malhotra <shashank.malhotra@netsmartz.net>
Date: Thu, 11 Apr 2024 19:59:10 +0530
Subject: [PATCH] changed the dark logo showing on login/signup page to whitle
 logo

---
 src/assets/constants.jsx             | 9 +++++----
 src/components/AuthForm/AuthForm.jsx | 9 +++++++--
 src/components/Sidebar/Sidebar.jsx   | 2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/assets/constants.jsx b/src/assets/constants.jsx
index 045abca..0540a2a 100644
--- a/src/assets/constants.jsx
+++ b/src/assets/constants.jsx
@@ -1,12 +1,13 @@
-export const InstagramLogo = () => (
+export const InstagramLogo = ({ viewBox, height, width }) => (
+
 	<svg
 		aria-label='Instagram'
 		color='rgb(245, 245, 245)'
 		fill='rgb(245, 245, 245)'
-		height='29'
+		height={height}
 		role='img'
-		viewBox='32 4 113 32'
-		width='103'
+		viewBox={viewBox}
+		width={width}
 	>
 		<path
 			clipRule='evenodd'
diff --git a/src/components/AuthForm/AuthForm.jsx b/src/components/AuthForm/AuthForm.jsx
index f63d5e9..c70f37e 100644
--- a/src/components/AuthForm/AuthForm.jsx
+++ b/src/components/AuthForm/AuthForm.jsx
@@ -1,8 +1,9 @@
-import { Box, Flex, Image, Text, VStack } from "@chakra-ui/react";
+import { Box, Flex, Text, VStack } from "@chakra-ui/react";
 import { useState } from "react";
 import Login from "./Login";
 import Signup from "./Signup";
 import GoogleAuth from "./GoogleAuth";
+import { InstagramLogo } from "../../assets/constants";
 
 const AuthForm = () => {
 	const [isLogin, setIsLogin] = useState(true);
@@ -11,7 +12,11 @@ const AuthForm = () => {
 		<>
 			<Box border={"1px solid gray"} borderRadius={4} padding={5}>
 				<VStack spacing={4}>
-					<Image src='/logo.png' h={24} cursor={"pointer"} alt='Instagram' />
+				<InstagramLogo height="100"
+					role="img"
+					viewBox="15 9 148 18"
+					width="250"
+					/>
 
 					{isLogin ? <Login /> : <Signup />}
 
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 3fc810c..4dc05d9 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -21,7 +21,7 @@ const Sidebar = () => {
 		>
 			<Flex direction={"column"} gap={10} w='full' height={"full"}>
 				<Link to={"/"} as={RouterLink} pl={2} display={{ base: "none", md: "block" }} cursor='pointer'>
-					<InstagramLogo />
+					<InstagramLogo height="29" viewBox="32 4 113 32" width="103" />
 				</Link>
 				<Link
 					to={"/"}