mui blue color fixes

src/components/molecules/IntegrationSettings.tsx

@@ -14,18 +14,33 @@ import axios from "axios";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRecording } from "../../api/storage";
 import { apiUrl } from "../../apiConfig.js";
-import Cookies from 'js-cookie';
+
 interface IntegrationProps {
   isOpen: boolean;
   handleStart: (data: IntegrationSettings) => void;
   handleClose: () => void;
 }
+
 export interface IntegrationSettings {
   spreadsheetId: string;
   spreadsheetName: string;
   data: string;
 }
 
+// Helper functions to replace js-cookie functionality
+const getCookie = (name: string): string | null => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) {
+    return parts.pop()?.split(';').shift() || null;
+  }
+  return null;
+};
+
+const removeCookie = (name: string): void => {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+};
+
 export const IntegrationSettingsModal = ({
   isOpen,
   handleStart,
@@ -106,7 +121,7 @@ export const IntegrationSettingsModal = ({
         },
         { withCredentials: true }
       );
-      notify(`success`, `Google Sheet selected successfully`)
+      notify(`success`, `Google Sheet selected successfully`);
       console.log("Google Sheet ID updated:", response.data);
     } catch (error: any) {
       console.error(
@@ -137,14 +152,14 @@ export const IntegrationSettingsModal = ({
 
   useEffect(() => {
     // Check if there is a success message in cookies
-    const status = Cookies.get("robot_auth_status");
+    const status = getCookie("robot_auth_status");
-    const message = Cookies.get("robot_auth_message");
+    const message = getCookie("robot_auth_message");
 
     if (status === "success" && message) {
       notify("success", message);
       // Clear the cookies after reading
-      Cookies.remove("robot_auth_status");
+      removeCookie("robot_auth_status");
-      Cookies.remove("robot_auth_message");
+      removeCookie("robot_auth_message");
     }
 
     // Check if we're on the callback URL
@@ -177,7 +192,6 @@ export const IntegrationSettingsModal = ({
       >
         <Typography variant="h6">
           Integrate with Google Sheet{" "}
-          {/* <Chip label="beta" color="primary" variant="outlined" /> */}
         </Typography>
 
         {recording && recording.google_sheet_id ? (
@@ -320,4 +334,4 @@ export const modalStyle = {
   height: "fit-content",
   display: "block",
   padding: "20px",
-};
+};

src/components/organisms/MainMenu.tsx

@@ -124,4 +124,9 @@ const buttonStyles = {
   alignItems: 'center',
   textTransform: 'none',
   color: 'inherit',
+  backgroundColor: 'transparent',
+  '&:hover': {
+    backgroundColor: 'rgba(255, 0, 195, 0.1)',
+    color: '#ff00c3',
+  },
 };

src/components/organisms/ProxyForm.tsx

@@ -1,8 +1,48 @@
 import React, { useState, useEffect } from 'react';
 import { styled } from '@mui/system';
-import { Alert, AlertTitle, TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab, Table, TableContainer, TableHead, TableRow, TableBody, TableCell, Paper } from '@mui/material';
+import { 
+    Alert, 
+    AlertTitle, 
+    TextField, 
+    Button, 
+    Switch, 
+    FormControlLabel, 
+    Box, 
+    Typography, 
+    Tabs, 
+    Tab, 
+    Table, 
+    TableContainer, 
+    TableHead, 
+    TableRow, 
+    TableBody, 
+    TableCell, 
+    Paper 
+} from '@mui/material';
 import { sendProxyConfig, getProxyConfig, testProxyConfig, deleteProxyConfig } from '../../api/proxy';
 import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useThemeMode } from '../../context/theme-provider';
+
+// Custom styled Tabs component
+const CustomTabs = styled(Tabs)(({ theme }) => ({
+    '& .MuiTabs-indicator': {
+        backgroundColor: '#ff00c3', // Pink indicator
+    },
+}));
+
+// Custom styled Tab component
+const CustomTab = styled(Tab)(({ theme }) => ({
+    '&.Mui-selected': {
+        color: '#ff00c3', // Pink for selected tab
+    },
+    '&:hover': {
+        color: '#ff00c3', // Pink on hover
+         // Subtle hover effect
+    },
+    '&.MuiTab-root': {
+        textTransform: 'none', // Removes uppercase transformation
+    },
+}));
 
 const FormContainer = styled(Box)({
     display: 'flex',
@@ -132,16 +172,37 @@ const ProxyForm: React.FC = () => {
         fetchProxyConfig();
     }, []);
 
+    const theme = useThemeMode();
+    const isDarkMode = theme.darkMode;
+
     return (
         <>
             <FormContainer>
                 <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
                     Proxy Configuration
                 </Typography>
-                <Tabs value={tabIndex} onChange={handleTabChange}>
+                <CustomTabs 
-                    <Tab label="Standard Proxy" />
+                    value={tabIndex} 
-                    <Tab label="Automatic Proxy Rotation" />
+                    onChange={handleTabChange}
-                </Tabs>
+                    TabIndicatorProps={{
+                        style: {
+                            backgroundColor: '#FF69B4' // Ensures pink indicator
+                        }
+                    }}
+                >
+                    <CustomTab 
+                        label="Standard Proxy" 
+                        style={{ 
+                            color: tabIndex === 0 ? '#FF69B4' : (isDarkMode ? 'white' : 'black')
+                        }} 
+                    />
+                    <CustomTab 
+                        label="Automatic Proxy Rotation" 
+                        style={{ 
+                            color: tabIndex === 1 ? '#FF69B4' : (isDarkMode ? 'white' : 'black')
+                        }} 
+                    />
+                </CustomTabs>
                 {tabIndex === 0 && (
                     isProxyConfigured ? (
                         <Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
@@ -236,15 +297,15 @@ const ProxyForm: React.FC = () => {
                             <Typography variant="body1" gutterBottom component="div">
                                 Coming Soon - In Open Source (Basic Rotation) & Cloud (Advanced Rotation). If you don't want to manage the infrastructure, join our cloud waitlist to get early access.
                             </Typography>
-                            <Button variant="contained" color="primary" sx={{ marginTop: '20px' }}>
+                            <Button variant="contained" color="primary" sx={{ marginTop: '20px',backgroundColor: '#ff00c3' }}>
                                 <a style={{ color: 'white', textDecoration: 'none' }} href="https://forms.gle/hXjgqDvkEhPcaBW76">Join Maxun Cloud Waitlist</a>
                             </Button>
                         </>
                     </Box>
                 )}
             </FormContainer>
-            <Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px', border: '1px solid #ff00c3' }}>
+            <Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px', border: '1px solid #ff00c3', bgcolor: isDarkMode ? '#3b002d' : '#ffc4f1', color: isDarkMode ? 'white' : 'black' }}>
-            <AlertTitle>If your proxy requires a username and password, always provide them separately from the proxy URL. </AlertTitle>
+                <AlertTitle>If your proxy requires a username and password, always provide them separately from the proxy URL. </AlertTitle>
                 <br />
                 <b>The right way</b>
                 <br />
@@ -258,9 +319,10 @@ const ProxyForm: React.FC = () => {
                 <b>The wrong way</b>
                 <br />
                 Proxy URL: http://myusername:mypassword@proxy.com:1337
+                <br />
             </Alert>
         </>
     );
 };
 
-export default ProxyForm;
+export default ProxyForm;

src/context/theme-provider.tsx

@@ -6,7 +6,7 @@ const lightTheme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#1e88e5',
+      main: '#ff00c3', // Pink as the primary color
     },
     background: {
       default: '#ffffff',
@@ -16,13 +16,33 @@ const lightTheme = createTheme({
       primary: '#000000',
     },
   },
+  components: {
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          backgroundColor: '#ff00c3', // Pink for tab indicators
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ff00c3', // Pink button background
+          color: '#ffffff',
+          '&:hover': {
+            backgroundColor: '#e600b3', // Slightly darker pink on hover
+          },
+        },
+      },
+    },
+  },
 });
 
 const darkTheme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#90caf9',
+      main: '#ff00c3', // Pink as the primary color
     },
     background: {
       default: '#121212',
@@ -32,6 +52,26 @@ const darkTheme = createTheme({
       primary: '#ffffff',
     },
   },
+  components: {
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          backgroundColor: '#ff00c3', // Pink for tab indicators
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ff00c3', // Pink button background
+          color: '#ffffff',
+          '&:hover': {
+            backgroundColor: '#e600b3', // Slightly darker pink on hover
+          },
+        },
+      },
+    },
+  },
 });
 
 const ThemeModeContext = createContext({

src/pages/Login.tsx

@@ -38,7 +38,7 @@ const Login = () => {
       const { data } = await axios.post(`${apiUrl}/auth/login`, {
         email,
         password,
-      });
+      }, { withCredentials: true });
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));

src/pages/Register.tsx

@@ -39,6 +39,8 @@ const Register = () => {
         email,
         password,
       });
+
+      console.log(data)
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Registration Successful!");
       window.localStorage.setItem("user", JSON.stringify(data));