diff --git a/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js index 76ab8e1b83..4d8444c135 100644 --- a/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js +++ b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import Modal from 'components/Modal/index'; import { PostHog } from 'posthog-node'; 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 StyledWrapper from './StyledWrapper'; import { useTheme } from 'providers/Theme/index'; @@ -59,7 +59,7 @@ const CheckIcon = () => { }; const GoldenEdition = ({ onClose }) => { - const { storedTheme } = useTheme(); + const { displayedTheme } = useTheme(); useEffect(() => { const anonymousId = getAnonymousTrackingId(); @@ -85,11 +85,10 @@ const GoldenEdition = ({ onClose }) => { }); }; - const goldenEditon = [ + const goldenEditonIndividuals = [ 'Inbuilt Bru File Explorer', 'Visual Git (Like Gitlens for Vscode)', 'GRPC, Websocket, SocketIO, MQTT', - 'Intergration with Secret Managers', 'Load Data from File for Collection Run', 'Developer Tools', 'OpenAPI Designer', @@ -98,16 +97,25 @@ const GoldenEdition = ({ onClose }) => { 'Custom Themes' ]; + const goldenEditonOrganizations = [ + 'Centralized License Management', + 'Intergration with Secret Managers', + 'Private Collection Registry', + 'Request Forms', + 'Priority Support' + ]; + const [pricingOption, setPricingOption] = useState('individuals'); const handlePricingOptionChange = (option) => { setPricingOption(option); }; + console.log(displayedTheme); - const themeBasedContainerClassNames = storedTheme === 'light' ? 'text-gray-900' : 'text-white'; - const themeBasedTabContainerClassNames = storedTheme === 'light' ? 'bg-gray-200' : 'bg-gray-800'; + const themeBasedContainerClassNames = displayedTheme === 'light' ? 'text-gray-900' : 'text-white'; + const themeBasedTabContainerClassNames = displayedTheme === 'light' ? 'bg-gray-200' : 'bg-gray-800'; 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 ( @@ -169,12 +177,29 @@ const GoldenEdition = ({ onClose }) => { Support Bruno's Development - {goldenEditon.map((item, index) => ( -
  • - - {item} -
  • - ))} + {pricingOption === 'individuals' ? ( + <> + {goldenEditonIndividuals.map((item, index) => ( +
  • + + {item} +
  • + ))} + + ) : ( + <> +
  • + + Everything in the Individual Plan +
  • + {goldenEditonOrganizations.map((item, index) => ( +
  • + + {item} +
  • + ))} + + )} diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js index 724ef4fa62..30603f65b2 100644 --- a/packages/bruno-app/src/providers/Theme/index.js +++ b/packages/bruno-app/src/providers/Theme/index.js @@ -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 themeOptions = Object.keys(themes); const value = { theme, themeOptions, storedTheme, + displayedTheme, setStoredTheme };