holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: fix dark mode colors of golden edition modal (#1358)

Browse Source
This commit is contained in:
Rinku Chaudhari 2024-01-10 16:01:05 +05:45 committed by GitHub
parent db9aeec498
commit b5fccef417
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import { uuid } from 'utils/common';
import { IconHeart, IconUser, IconUsers } from '@tabler/icons'; import { IconHeart, IconUser, IconUsers } 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';
let posthogClient = null; let posthogClient = null;
const posthogApiKey = 'phc_7gtqSrrdZRohiozPMLIacjzgHbUlhalW1Bu16uYijMR'; const posthogApiKey = 'phc_7gtqSrrdZRohiozPMLIacjzgHbUlhalW1Bu16uYijMR';
@ -58,6 +59,8 @@ const CheckIcon = () => {
}; };
const GoldenEdition = ({ onClose }) => { const GoldenEdition = ({ onClose }) => {
const { storedTheme } = useTheme();
useEffect(() => { useEffect(() => {
const anonymousId = getAnonymousTrackingId(); const anonymousId = getAnonymousTrackingId();
const client = getPosthogClient(); const client = getPosthogClient();
@ -101,10 +104,15 @@ const GoldenEdition = ({ onClose }) => {
setPricingOption(option); setPricingOption(option);
}; };
const themeBasedContainerClassNames = storedTheme === 'light' ? 'text-gray-900' : 'text-white';
const themeBasedTabContainerClassNames = storedTheme === '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';
return ( return (
<StyledWrapper> <StyledWrapper>
<Modal size="sm" title={'Golden Edition'} handleCancel={onClose} hideFooter={true}> <Modal size="sm" title={'Golden Edition'} handleCancel={onClose} hideFooter={true}>
<div className="flex flex-col text-gray-900 bg-white w-full"> <div className={`flex flex-col w-full ${themeBasedContainerClassNames}`}>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">Golden Edition</h3> <h3 className="text-lg font-semibold">Golden Edition</h3>
<a <a
@ -124,7 +132,7 @@ const GoldenEdition = ({ onClose }) => {
<div className="my-4"> <div className="my-4">
<span className="text-3xl font-extrabold">$19</span> <span className="text-3xl font-extrabold">$19</span>
</div> </div>
<p className="bg-yellow-200 rounded-md px-2 py-1 mb-2 inline-flex text-sm">One Time Payment</p> <p className="bg-yellow-200 text-black rounded-md px-2 py-1 mb-2 inline-flex text-sm">One Time Payment</p>
<p className="text-sm">perpetual license for 2 devices, with 2 years of updates</p> <p className="text-sm">perpetual license for 2 devices, with 2 years of updates</p>
</div> </div>
) : ( ) : (
@ -136,12 +144,12 @@ const GoldenEdition = ({ onClose }) => {
</div> </div>
)} )}
<div <div
className="flex items-center justify-between my-8 w-40 bg-gray-200 rounded-full p-1" className={`flex items-center justify-between my-8 w-40 rounded-full p-1 ${themeBasedTabContainerClassNames}`}
style={{ width: '24rem' }} style={{ width: '24rem' }}
> >
<div <div
className={`cursor-pointer w-1/2 h-8 flex items-center justify-center rounded-full ${ className={`cursor-pointer w-1/2 h-8 flex items-center justify-center rounded-full ${
pricingOption === 'individuals' ? 'bg-white text-gray-900 font-medium' : 'text-gray-500' pricingOption === 'individuals' ? themeBasedActiveTabClassNames : 'text-gray-500'
}`} }`}
onClick={() => handlePricingOptionChange('individuals')} onClick={() => handlePricingOptionChange('individuals')}
> >
@ -149,7 +157,7 @@ const GoldenEdition = ({ onClose }) => {
</div> </div>
<div <div
className={`cursor-pointer w-1/2 h-8 flex items-center justify-center rounded-full ${ className={`cursor-pointer w-1/2 h-8 flex items-center justify-center rounded-full ${
pricingOption === 'organizations' ? 'bg-white text-gray-900 font-medium' : 'text-gray-500' pricingOption === 'organizations' ? themeBasedActiveTabClassNames : 'text-gray-500'
}`} }`}
onClick={() => handlePricingOptionChange('organizations')} onClick={() => handlePricingOptionChange('organizations')}
> >