From 587dacdaf14cbba65c84321205d0b4c952045780 Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sun, 8 Dec 2024 04:49:29 +0530 Subject: [PATCH] mui blue color fixes --- .../molecules/IntegrationSettings.tsx | 30 +++++-- src/components/organisms/MainMenu.tsx | 5 ++ src/components/organisms/ProxyForm.tsx | 80 ++++++++++++++++--- src/context/theme-provider.tsx | 44 +++++++++- src/pages/Login.tsx | 2 +- src/pages/Register.tsx | 2 + 6 files changed, 143 insertions(+), 20 deletions(-) diff --git a/src/components/molecules/IntegrationSettings.tsx b/src/components/molecules/IntegrationSettings.tsx index c31605de..8e38b5a0 100644 --- a/src/components/molecules/IntegrationSettings.tsx +++ b/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 message = Cookies.get("robot_auth_message"); + const status = getCookie("robot_auth_status"); + const message = getCookie("robot_auth_message"); if (status === "success" && message) { notify("success", message); // Clear the cookies after reading - Cookies.remove("robot_auth_status"); - Cookies.remove("robot_auth_message"); + removeCookie("robot_auth_status"); + removeCookie("robot_auth_message"); } // Check if we're on the callback URL @@ -177,7 +192,6 @@ export const IntegrationSettingsModal = ({ > Integrate with Google Sheet{" "} - {/* */} {recording && recording.google_sheet_id ? ( @@ -320,4 +334,4 @@ export const modalStyle = { height: "fit-content", display: "block", padding: "20px", -}; +}; \ No newline at end of file diff --git a/src/components/organisms/MainMenu.tsx b/src/components/organisms/MainMenu.tsx index 27c42fe1..60c9a082 100644 --- a/src/components/organisms/MainMenu.tsx +++ b/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', + }, }; diff --git a/src/components/organisms/ProxyForm.tsx b/src/components/organisms/ProxyForm.tsx index a581144b..acd71e4e 100644 --- a/src/components/organisms/ProxyForm.tsx +++ b/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 ( <> Proxy Configuration - - - - + + + + {tabIndex === 0 && ( isProxyConfigured ? ( @@ -236,15 +297,15 @@ const ProxyForm: React.FC = () => { 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. - )} - - If your proxy requires a username and password, always provide them separately from the proxy URL. + + If your proxy requires a username and password, always provide them separately from the proxy URL.
The right way
@@ -258,9 +319,10 @@ const ProxyForm: React.FC = () => { The wrong way
Proxy URL: http://myusername:mypassword@proxy.com:1337 +
); }; -export default ProxyForm; +export default ProxyForm; \ No newline at end of file diff --git a/src/context/theme-provider.tsx b/src/context/theme-provider.tsx index 02052cf5..a6097f95 100644 --- a/src/context/theme-provider.tsx +++ b/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({ diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 87f90b53..de5f4838 100644 --- a/src/pages/Login.tsx +++ b/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)); diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index b2a3eebf..ad7fb89f 100644 --- a/src/pages/Register.tsx +++ b/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));