extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-07 16:44:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixed theming issues

Browse Source
This commit is contained in:
Anoop M D 2024-02-04 15:17:56 +05:30
parent 4d8c377143
commit a97adbb97e
2 changed files with 51 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import Modal from 'components/Modal/index'; import Modal from 'components/Modal/index';
import { PostHog } from 'posthog-node'; import { PostHog } from 'posthog-node';
import { uuid } from 'utils/common'; import { uuid } from 'utils/common';
import { IconHeart, IconUser, IconUsers } from '@tabler/icons'; import { IconHeart, IconUser, IconUsers, IconPlus } from '@tabler/icons';
import platformLib from 'platform'; import platformLib from 'platform';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
import { useTheme } from 'providers/Theme/index'; import { useTheme } from 'providers/Theme/index';
@ -59,7 +59,7 @@ const CheckIcon = () => {
}; };
const GoldenEdition = ({ onClose }) => { const GoldenEdition = ({ onClose }) => {
const { storedTheme } = useTheme(); const { displayedTheme } = useTheme();
useEffect(() => { useEffect(() => {
const anonymousId = getAnonymousTrackingId(); const anonymousId = getAnonymousTrackingId();
@ -85,11 +85,10 @@ const GoldenEdition = ({ onClose }) => {
}); });
}; };
const goldenEditon = [ const goldenEditonIndividuals = [
'Inbuilt Bru File Explorer', 'Inbuilt Bru File Explorer',
'Visual Git (Like Gitlens for Vscode)', 'Visual Git (Like Gitlens for Vscode)',
'GRPC, Websocket, SocketIO, MQTT', 'GRPC, Websocket, SocketIO, MQTT',
'Intergration with Secret Managers',
'Load Data from File for Collection Run', 'Load Data from File for Collection Run',
'Developer Tools', 'Developer Tools',
'OpenAPI Designer', 'OpenAPI Designer',
@ -98,16 +97,25 @@ const GoldenEdition = ({ onClose }) => {
'Custom Themes' 'Custom Themes'
]; ];
const goldenEditonOrganizations = [
'Centralized License Management',
'Intergration with Secret Managers',
'Private Collection Registry',
'Request Forms',
'Priority Support'
];
const [pricingOption, setPricingOption] = useState('individuals'); const [pricingOption, setPricingOption] = useState('individuals');
const handlePricingOptionChange = (option) => { const handlePricingOptionChange = (option) => {
setPricingOption(option); setPricingOption(option);
}; };
console.log(displayedTheme);
const themeBasedContainerClassNames = storedTheme === 'light' ? 'text-gray-900' : 'text-white'; const themeBasedContainerClassNames = displayedTheme === 'light' ? 'text-gray-900' : 'text-white';
const themeBasedTabContainerClassNames = storedTheme === 'light' ? 'bg-gray-200' : 'bg-gray-800'; const themeBasedTabContainerClassNames = displayedTheme === 'light' ? 'bg-gray-200' : 'bg-gray-800';
const themeBasedActiveTabClassNames = const themeBasedActiveTabClassNames =
storedTheme === 'light' ? 'bg-white text-gray-900 font-medium' : 'bg-gray-700 text-white font-medium'; displayedTheme === 'light' ? 'bg-white text-gray-900 font-medium' : 'bg-gray-700 text-white font-medium';
return ( return (
<StyledWrapper> <StyledWrapper>
@ -169,12 +177,29 @@ const GoldenEdition = ({ onClose }) => {
<HeartIcon /> <HeartIcon />
<span>Support Bruno's Development</span> <span>Support Bruno's Development</span>
</li> </li>
{goldenEditon.map((item, index) => ( {pricingOption === 'individuals' ? (
<li className="flex items-center space-x-3" key={index}> <>
<CheckIcon /> {goldenEditonIndividuals.map((item, index) => (
<span>{item}</span> <li className="flex items-center space-x-3" key={index}>
</li> <CheckIcon />
))} <span>{item}</span>
</li>
))}
</>
) : (
<>
<li className="flex items-center space-x-3 pb-4">
<IconPlus size={16} strokeWidth={1.5} style={{ marginLeft: '2px' }} />
<span>Everything in the Individual Plan</span>
</li>
{goldenEditonOrganizations.map((item, index) => (
<li className="flex items-center space-x-3" key={index}>
<CheckIcon />
<span>{item}</span>
</li>
))}
</>
)}
</ul> </ul>
</div> </div>
</Modal> </Modal>

13
packages/bruno-app/src/providers/Theme/index.js
View File

@ -17,12 +17,25 @@ export const ThemeProvider = (props) => {
}); });
}, []); }, []);
useEffect(() => {
if (storedTheme === 'system') {
const isBrowserThemeLight = window.matchMedia('(prefers-color-scheme: light)').matches;
setDisplayedTheme(isBrowserThemeLight ? 'light' : 'dark');
} else {
setDisplayedTheme(storedTheme);
}
}, [storedTheme, setDisplayedTheme, window.matchMedia]);
// storedTheme can have 3 values: 'light', 'dark', 'system'
// displayedTheme can have 2 values: 'light', 'dark'
const theme = storedTheme === 'system' ? themes[displayedTheme] : themes[storedTheme]; const theme = storedTheme === 'system' ? themes[displayedTheme] : themes[storedTheme];
const themeOptions = Object.keys(themes); const themeOptions = Object.keys(themes);
const value = { const value = {
theme, theme,
themeOptions, themeOptions,
storedTheme, storedTheme,
displayedTheme,
setStoredTheme setStoredTheme
}; };