From 6bd31fabbced3095aaa28b809e53cfa3d8117a10 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 21:39:58 +0530
Subject: [PATCH] feat: logout button style

---
 src/components/molecules/NavBar.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index c09a4ca7..9f98b299 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -6,7 +6,7 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
 import { Button, IconButton } from "@mui/material";
 import { RecordingIcon } from "../atoms/RecorderIcon";
 import { SaveRecording } from "./SaveRecording";
-import { Circle, Add } from "@mui/icons-material";
+import { Circle, Add, Logout } from "@mui/icons-material";
 import MeetingRoomIcon from '@mui/icons-material/MeetingRoom';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
@@ -110,18 +110,21 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                 exit</Button>
                 : null}
               <Button sx={{
-                width: '100px',
-                background: '#fff',
-                color: 'rgba(25, 118, 210, 0.7)',
-                padding: '9px',
-                marginRight: '19px',
-                '&:hover': {
-                  background: 'white',
-                  color: 'rgb(25, 118, 210)',
-                }
+                width: '140px',
+                borderRadius: '5px',
+                  padding: '8px',
+                  background: '#ff00c3',
+                  color: 'white',
+                  marginRight: '10px',
+                  fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+                  fontWeight: '500',
+                  fontSize: '0.875rem',
+                  lineHeight: '1.75',
+                  letterSpacing: '0.02857em',
+                  '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
               }} onClick={logout}>
-                <MeetingRoomIcon sx={{ marginRight: '5px' }} />
-                logout</Button>
+                <Logout sx={{ marginRight: '5px' }} />
+                Logout</Button>
             </div>
           </>
         ) : ""