feat: change proxy tabs styling

This commit is contained in:
RohitR311
2025-01-08 21:36:09 +05:30
parent 7772411b40
commit df2db055c7

View File

@@ -24,28 +24,6 @@ import { useGlobalInfoStore } from '../../context/globalInfo';
import { useThemeMode } from '../../context/theme-provider';
import { useTranslation } from 'react-i18next';
// 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',
flexDirection: 'column',
@@ -184,33 +162,10 @@ const ProxyForm: React.FC = () => {
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
{t('proxy.title')}
</Typography>
<CustomTabs
value={tabIndex}
onChange={handleTabChange}
TabIndicatorProps={{
style: {
backgroundColor: '#FF69B4' // Ensures pink indicator
}
}}
>
<CustomTab
label={t('proxy.tab_standard')}
style={{
color: tabIndex === 0 ? '#FF69B4' : (isDarkMode ? 'white' : 'black')
}}
/>
<CustomTab
label={t('proxy.tab_rotation')}
style={{
color: tabIndex === 1 ? '#FF69B4' : (isDarkMode ? 'white' : 'black')
}}
/>
</CustomTabs>
{/* <Tabs value={tabIndex} onChange={handleTabChange}>
<Tabs value={tabIndex} onChange={handleTabChange}>
<Tab label={t('proxy.tab_standard')} />
<Tab label={t('proxy.tab_rotation')} />
</Tabs> */}
</Tabs>
{tabIndex === 0 && (
isProxyConfigured ? (