From d31c221c394e7416aa996eeb47563c3ea184c19d Mon Sep 17 00:00:00 2001 From: gudnuf Date: Wed, 23 Oct 2024 14:44:33 -0700 Subject: [PATCH 1/4] try making bg color more noticable --- .../leaderboards/LeaderboardDrawer.tsx | 2 +- .../notifications/NotificationDrawer.tsx | 2 +- .../NotificationItemContainer.tsx | 8 +- src/components/sidebar/SettingsSidebar.tsx | 75 +++++++++--------- .../transactionHistory/HistoryTable.tsx | 2 +- .../TransactionHistoryDrawer.tsx | 2 +- src/components/utility/Balance.tsx | 18 ++++- src/hooks/contexts/cashuContext.tsx | 77 +++++++++++++++++-- src/themes/drawerTheme.ts | 2 +- src/themes/tableThemes.ts | 2 +- 10 files changed, 136 insertions(+), 54 deletions(-) diff --git a/src/components/leaderboards/LeaderboardDrawer.tsx b/src/components/leaderboards/LeaderboardDrawer.tsx index 719c6c4a..fd33b664 100644 --- a/src/components/leaderboards/LeaderboardDrawer.tsx +++ b/src/components/leaderboards/LeaderboardDrawer.tsx @@ -16,7 +16,7 @@ const LeaderboardDrawer = ({ isOpen, onClose }: LeaderboardDrawerProps) => { onClose={onClose} edge={false} position='right' - className='h-full bg-[#0f1f41ff] text-white flex flex-col md:min-w-[400px] min-w-full' + className='h-full text-white flex flex-col md:min-w-[400px] min-w-full drawer' theme={customDrawerTheme} > { onClose={() => setHidden(true)} edge={false} position='left' - className='md:min-w-fit min-w-full bg-[#0f1f41ff] text-white flex flex-col' + className='md:min-w-fit min-w-full text-white flex flex-col drawer' theme={customDrawerTheme} > { + const { activeUnit } = useCashuContext(); const icon = useMemo(() => { switch (notificationType) { case NotificationType.NewContact: @@ -53,7 +55,9 @@ const NotificationItemContainer = ({ }, [notificationType]); return ( -
+
{icon}
{children}
diff --git a/src/components/sidebar/SettingsSidebar.tsx b/src/components/sidebar/SettingsSidebar.tsx index cefbcfc0..f5696586 100644 --- a/src/components/sidebar/SettingsSidebar.tsx +++ b/src/components/sidebar/SettingsSidebar.tsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import { RootState } from '@/redux/store'; import { Drawer, Modal } from 'flowbite-react'; import ClipboardButton from '../buttons/utility/ClipboardButton'; -import { customDrawerTheme } from '@/themes/drawerTheme'; +import { customDrawerTheme, getCustomDrawerTheme } from '@/themes/drawerTheme'; import DrawerCollapse from '../utility/DrawerCollapse'; import { BuildingLibraryIcon, UserIcon, XMarkIcon } from '@heroicons/react/20/solid'; import EcashTapsSettings from './Taps/EcashTapsSettings'; @@ -13,6 +13,7 @@ import EcashIcon from '../icons/EcashIcon'; import LeaderboardSettings from './Leaderboard/LeaderboardSettings'; import FlameIcon from '../icons/FlameIcon'; import MintSettings from './Mints/MintSettings'; +import { useCashuContext } from '@/hooks/contexts/cashuContext'; const SettingsCog = () => ( ( export const SettingsSidebar = () => { const [hidden, setHidden] = useState(true); - const nwcState = useSelector((state: RootState) => state.nwc); const [nwcUri, setNwcUri] = useState(''); const [isLeaderboardOpen, setIsLeaderboardOpen] = useState(false); @@ -55,33 +55,33 @@ export const SettingsSidebar = () => {
{/* makes it so all drawers close when hidden */} - {!hidden && ( - - null} - className='drawer-header' - closeIcon={() => } - /> - -
+ + null} + className='drawer-header' + closeIcon={() => } + /> + +
-
- } - > - - -
- {/*
+
+ } + > + + +
+ {/*
}> {nwcState.allPubkeys.map((pubkey, idx) => ( @@ -95,12 +95,12 @@ export const SettingsSidebar = () => {
*/} -
- }> - - -
- {/*
+
+ }> + + +
+ {/*
} @@ -108,14 +108,13 @@ export const SettingsSidebar = () => {
*/} - {/*
+ {/*
}>
*/} - - - )} + + setNwcUri('')} className='text-black'> New Wallet Connection diff --git a/src/components/transactionHistory/HistoryTable.tsx b/src/components/transactionHistory/HistoryTable.tsx index d2adf6c0..e7551045 100644 --- a/src/components/transactionHistory/HistoryTable.tsx +++ b/src/components/transactionHistory/HistoryTable.tsx @@ -68,7 +68,7 @@ const HistoryTable: React.FC<{ return ( <> - +
{history.map((tx: Transaction, i) => ( { onClose={() => setHidden(true)} edge={false} position='right' - className='md:min-w-fit min-w-full bg-[#0f1f41ff] text-white flex flex-col' + className='md:min-w-fit min-w-full text-white flex flex-col drawer' theme={customDrawerTheme} > { const { displayBalance, unitSymbol, toggleFxValue, showFxValue, activeUnit } = useBalance(); + const { activeUnit: contextActiveUnit } = useCashuContext(); + + // const unitSymbolColor = contextActiveUnit === Currency.USD ? '#26a69a' : '#6a26a6'; + const unitSymbolColor = '#26a69a'; return (
{activeUnit === 'usd' && !showFxValue && ( - {unitSymbol} + + {unitSymbol} + )} {activeUnit === 'sat' && showFxValue && ( - {unitSymbol} + + {unitSymbol} + )} {displayBalance} {(activeUnit === 'sat' && !showFxValue) || (activeUnit === 'usd' && showFxValue) ? ( - {unitSymbol} + + {unitSymbol} + ) : null}
diff --git a/src/hooks/contexts/cashuContext.tsx b/src/hooks/contexts/cashuContext.tsx index b92629b7..b93fa5f1 100644 --- a/src/hooks/contexts/cashuContext.tsx +++ b/src/hooks/contexts/cashuContext.tsx @@ -168,11 +168,78 @@ export const CashuProvider: React.FC<{ children: React.ReactNode }> = ({ childre }, 300); }; - if (activeUnit === Currency.USD) { - changeStatusBarColor('#0f3470'); - } else { - changeStatusBarColor('#1D4D98'); - } + const changeDrawerColor = (color: string) => { + const drawers = document.querySelectorAll('.drawer'); + console.log('drawers', drawers); + drawers.forEach(drawer => { + drawer.setAttribute('style', `background-color: ${color}`); + }); + }; + + const changePrimaryButtonColor = (color: string) => { + const buttons = document.querySelectorAll('.btn-primary'); + buttons.forEach(button => { + button.setAttribute('style', `background-color: ${color}`); + }); + // const unitSymbol = document.querySelector('.unit-symbol'); + // if (unitSymbol) { + // unitSymbol.setAttribute('style', `color: ${color}`); + // } + }; + + const changeDrawerItemBgColor = (color: string) => { + const drawerItems = document.querySelectorAll('table, .notification-item-container'); + console.log('drawerItems', drawerItems); + drawerItems.forEach(drawerItem => { + drawerItem.setAttribute('style', `background-color: ${color}`); + }); + }; + + const applyColors = () => { + if (activeUnit === Currency.USD) { + changeStatusBarColor('#0f3470'); + changeDrawerItemBgColor('#0f3470'); + changeDrawerColor('#0f1f41ff'); + // changePrimaryButtonColor('#26a69a'); + } else { + changeStatusBarColor('#342070'); + changeDrawerItemBgColor('#342070'); + changeDrawerColor(' #1f0f41'); + // changePrimaryButtonColor('#6a26a6 '); + } + }; + + // Apply colors immediately + applyColors(); + + // Set up a MutationObserver to watch for changes in the DOM + const observer = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.addedNodes.length) { + // Check if any of the added nodes are drawers or contain drawers + mutation.addedNodes.forEach(node => { + if (node.nodeType === Node.ELEMENT_NODE) { + const element = node as Element; + if ( + element.classList.contains('drawer') || + element.querySelector('.drawer') || + element.querySelector('#tx-history-table') || + element.classList.contains('notification-item-container') + ) { + // Drawer, table, or notification item found, apply colors again + applyColors(); + } + } + }); + } + }); + }); + + // Start observing the document with the configured parameters + observer.observe(document.body, { childList: true, subtree: true }); + + // Clean up the observer when the component unmounts + return () => observer.disconnect(); }, [activeUnit]); const setKeysetNotReserve = () => { diff --git a/src/themes/drawerTheme.ts b/src/themes/drawerTheme.ts index 0191e27c..7e68b92e 100644 --- a/src/themes/drawerTheme.ts +++ b/src/themes/drawerTheme.ts @@ -8,7 +8,7 @@ type DeepPartial = T extends object export const customDrawerTheme: DeepPartial = { root: { - base: 'fixed z-40 overflow-y-auto p-4 transition-transform dark:bg-gray-800 bg-[#0f1f41ff] text-white flex flex-col', + base: 'fixed z-40 overflow-y-auto p-4 transition-transform dark:bg-gray-800 text-white flex flex-col', }, header: { inner: { diff --git a/src/themes/tableThemes.ts b/src/themes/tableThemes.ts index a81800a2..4a7b51e8 100644 --- a/src/themes/tableThemes.ts +++ b/src/themes/tableThemes.ts @@ -1,6 +1,6 @@ export const txHistoryTableTheme = { root: { - base: 'md:max-w-fit w-full text-left text-sm text-gray-500 dark:text-gray-400 bg-[#0f3470] ', + base: 'md:max-w-fit w-full text-left text-sm text-gray-500 dark:text-gray-400', shadow: 'absolute left-0 top-0 -z-10 h-full rounded-lg bg-white drop-shadow-md', wrapper: 'relative flex justify-center', }, From 883c41ee5325cf554194439a9edea154c22a3b49 Mon Sep 17 00:00:00 2001 From: gudnuf Date: Wed, 23 Oct 2024 14:47:10 -0700 Subject: [PATCH 2/4] fix type error --- src/components/sidebar/SettingsSidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebar/SettingsSidebar.tsx b/src/components/sidebar/SettingsSidebar.tsx index f5696586..5caa5362 100644 --- a/src/components/sidebar/SettingsSidebar.tsx +++ b/src/components/sidebar/SettingsSidebar.tsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import { RootState } from '@/redux/store'; import { Drawer, Modal } from 'flowbite-react'; import ClipboardButton from '../buttons/utility/ClipboardButton'; -import { customDrawerTheme, getCustomDrawerTheme } from '@/themes/drawerTheme'; +import { customDrawerTheme } from '@/themes/drawerTheme'; import DrawerCollapse from '../utility/DrawerCollapse'; import { BuildingLibraryIcon, UserIcon, XMarkIcon } from '@heroicons/react/20/solid'; import EcashTapsSettings from './Taps/EcashTapsSettings'; From 5062713b5892e356f49671e0a32d99be81b07238 Mon Sep 17 00:00:00 2001 From: gudnuf Date: Fri, 25 Oct 2024 11:53:13 -0700 Subject: [PATCH 3/4] new colors --- .../notifications/NotificationItemContainer.tsx | 2 +- src/hooks/contexts/cashuContext.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/notifications/NotificationItemContainer.tsx b/src/components/notifications/NotificationItemContainer.tsx index 283f542c..929a5255 100644 --- a/src/components/notifications/NotificationItemContainer.tsx +++ b/src/components/notifications/NotificationItemContainer.tsx @@ -56,7 +56,7 @@ const NotificationItemContainer = ({ return (
{icon}
{children}
diff --git a/src/hooks/contexts/cashuContext.tsx b/src/hooks/contexts/cashuContext.tsx index b93fa5f1..9f6038ae 100644 --- a/src/hooks/contexts/cashuContext.tsx +++ b/src/hooks/contexts/cashuContext.tsx @@ -197,14 +197,14 @@ export const CashuProvider: React.FC<{ children: React.ReactNode }> = ({ childre const applyColors = () => { if (activeUnit === Currency.USD) { + changeStatusBarColor('#004B49'); + changeDrawerItemBgColor('#004B49'); + changeDrawerColor('#00373D'); + // changePrimaryButtonColor('#26a69a'); + } else { changeStatusBarColor('#0f3470'); changeDrawerItemBgColor('#0f3470'); changeDrawerColor('#0f1f41ff'); - // changePrimaryButtonColor('#26a69a'); - } else { - changeStatusBarColor('#342070'); - changeDrawerItemBgColor('#342070'); - changeDrawerColor(' #1f0f41'); // changePrimaryButtonColor('#6a26a6 '); } }; From faaa5b1a5e6f091ccbcfdb05f37afa3c879b40d5 Mon Sep 17 00:00:00 2001 From: gudnuf Date: Mon, 28 Oct 2024 09:01:41 -0700 Subject: [PATCH 4/4] change bitcoin color --- public/manifest.json | 2 +- src/components/ToggleCurrencyDropdown.tsx | 2 +- src/components/notifications/NotificationItemContainer.tsx | 2 +- src/hooks/contexts/cashuContext.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/manifest.json b/public/manifest.json index 14b5eb8b..989237d9 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -16,5 +16,5 @@ "start_url": "/wallet", "display": "standalone", "theme_color": "#000000", - "background_color": "#0f3470" + "background_color": "#004B49" } diff --git a/src/components/ToggleCurrencyDropdown.tsx b/src/components/ToggleCurrencyDropdown.tsx index 44d6ff94..8cd451f8 100644 --- a/src/components/ToggleCurrencyDropdown.tsx +++ b/src/components/ToggleCurrencyDropdown.tsx @@ -29,7 +29,7 @@ const ToggleCurrencyDrawer = () => { position='bottom' onClose={() => setIsOpen(false)} open={isOpen} - className='h-2/5' + className='h-2/5 drawer' >
diff --git a/src/components/notifications/NotificationItemContainer.tsx b/src/components/notifications/NotificationItemContainer.tsx index 929a5255..2eb3d39b 100644 --- a/src/components/notifications/NotificationItemContainer.tsx +++ b/src/components/notifications/NotificationItemContainer.tsx @@ -56,7 +56,7 @@ const NotificationItemContainer = ({ return (
{icon}
{children}
diff --git a/src/hooks/contexts/cashuContext.tsx b/src/hooks/contexts/cashuContext.tsx index 9f6038ae..596f4333 100644 --- a/src/hooks/contexts/cashuContext.tsx +++ b/src/hooks/contexts/cashuContext.tsx @@ -202,8 +202,8 @@ export const CashuProvider: React.FC<{ children: React.ReactNode }> = ({ childre changeDrawerColor('#00373D'); // changePrimaryButtonColor('#26a69a'); } else { - changeStatusBarColor('#0f3470'); - changeDrawerItemBgColor('#0f3470'); + changeStatusBarColor('#1D4D98'); + changeDrawerItemBgColor('#1D4D98'); changeDrawerColor('#0f1f41ff'); // changePrimaryButtonColor('#6a26a6 '); }