From a88259acf6e06c91af7fb26f1c08f997c3cfb94a Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Tue, 29 Oct 2024 08:45:09 +0530
Subject: [PATCH] feat: style links like tabs

---
 src/components/organisms/MainMenu.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/organisms/MainMenu.tsx b/src/components/organisms/MainMenu.tsx
index b643450a..e7ad940b 100644
--- a/src/components/organisms/MainMenu.tsx
+++ b/src/components/organisms/MainMenu.tsx
@@ -3,7 +3,7 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { Paper, Button } from "@mui/material";
-import { AutoAwesome, FormatListBulleted, VpnKey, Usb } from "@mui/icons-material";
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, Link, CloudQueue } from "@mui/icons-material";
 
 interface MainMenuProps {
   value: string;
@@ -22,14 +22,14 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
         height: 'auto',
         width: '250px',
         backgroundColor: 'white',
-        paddingTop: '2rem',
+        paddingTop: '0.5rem',
       }}
       variant="outlined"
       square
     >
       <Box sx={{
         width: '100%',
-        paddingBottom: '22rem',
+        paddingBottom: '1rem',
       }}>
         <Tabs
           value={value}
@@ -86,17 +86,14 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
         </Tabs>
         <hr />
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
-          <Button sx={buttonStyles}>
-            <a href="https://docs.maxun.io/" target="_blank" rel="noopener noreferrer" style={linkStyles}>Documentation</a>
+          <Button href="https://docs.maxun.io/" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
+            Documentation
           </Button>
-          <Button sx={buttonStyles}>
-            <a href="http://localhost:8080/api-docs/" target="_blank" rel="noopener noreferrer" style={linkStyles}>API Docs</a>
+          <Button href="http://localhost:8080/api-docs/" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Link />}>
+            API Docs
           </Button>
-          <Button sx={buttonStyles}>
-            <a href="https://discord.gg/NFhWDCdb" target="_blank" rel="noopener noreferrer" style={linkStyles}>Join Discord</a>
-          </Button>
-          <Button sx={buttonStyles}>
-            <a href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" style={linkStyles}>Join Maxun Cloud</a>
+          <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
+            Join Maxun Cloud
           </Button>
         </Box>
       </Box>
@@ -114,10 +111,10 @@ const buttonStyles = {
   display: 'flex',
   alignItems: 'center',
   textTransform: 'none',
-  color: 'rgba(0, 0, 0, 0.87) !important',
+  color: '#6C6C6C !important',
 };
 
 const linkStyles = {
   textDecoration: 'none',
-  color: 'rgba(0, 0, 0, 0.87) !important'
+  color: '#6C6C6C !important'
 }
\ No newline at end of file