Change USD bg color (#115)

* try making bg color more noticable * fix type error * new colors * change bitcoin color
MakePrisms · Oct 28, 2024 · 2a5a1c4 · 2a5a1c4
1 parent dece0b9
commit 2a5a1c4
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 55 deletions.
diff --git 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
@@ -29,7 +29,7 @@ const ToggleCurrencyDrawer = () => {
             position='bottom'
             onClose={() => setIsOpen(false)}
             open={isOpen}
-            className='h-2/5'
+            className='h-2/5 drawer'
          >
             <Drawer.Items>
                <div className='p-4 space-y-4 flex flex-col items-center'>

diff --git 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}
          >
             <Drawer.Header

diff --git a/src/components/notifications/NotificationDrawer.tsx b/src/components/notifications/NotificationDrawer.tsx
@@ -83,7 +83,7 @@ const NotificationDrawer = () => {
             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}
          >
             <Drawer.Header

diff --git a/src/components/notifications/NotificationItemContainer.tsx b/src/components/notifications/NotificationItemContainer.tsx
@@ -1,9 +1,10 @@
-import { NotificationType } from '@/types';
+import { Currency, NotificationType } from '@/types';
 import { UserCircleIcon, WalletIcon } from '@heroicons/react/20/solid';
 import { useMemo } from 'react';
 import { BanknoteIcon } from '@/components/buttons/EcashTapButton';
 import GiftIcon from '../icons/GiftIcon';
 import VaultIcon from '../icons/VaultIcon';
+import { useCashuContext } from '@/hooks/contexts/cashuContext';
 
 interface NotificationItemContainerProps {
    children: React.ReactNode;
@@ -14,6 +15,7 @@ const NotificationItemContainer = ({
    children,
    notificationType,
 }: NotificationItemContainerProps) => {
+   const { activeUnit } = useCashuContext();
    const icon = useMemo(() => {
       switch (notificationType) {
          case NotificationType.NewContact:
@@ -53,7 +55,9 @@ const NotificationItemContainer = ({
    }, [notificationType]);
 
    return (
-      <div className='flex flex-row items-center justify-start space-x-4 bg-[var(--background-end-rgb)] rounded-sm w-full px-4 py-4 mb-2'>
+      <div
+         className={`flex flex-row items-center justify-start space-x-4 rounded-sm w-full px-4 py-4 mb-2  ${activeUnit === Currency.SAT ? 'bg-[#1D4D98]' : 'bg-[#004B49]'}`}
+      >
          <div className='w-6 h-6 text-gray-500'>{icon}</div>
          <div className='flex flex-col justify-between w-full space-y-1'>{children}</div>
       </div>

diff --git a/src/components/sidebar/SettingsSidebar.tsx b/src/components/sidebar/SettingsSidebar.tsx
@@ -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 = () => (
    <svg
@@ -34,7 +35,6 @@ 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 = () => {
             </button>
          </div>
          {/* makes it so all drawers close when hidden */}
-         {!hidden && (
-            <Drawer
-               open={!hidden}
-               onClose={handleClose}
-               edge={false}
-               position='right'
-               className='md:min-w-fit  min-w-full bg-[#0f1f41ff] text-white flex flex-col'
-               theme={customDrawerTheme}
-            >
-               <Drawer.Header
-                  title='Settings'
-                  titleIcon={() => null}
-                  className='drawer-header'
-                  closeIcon={() => <XMarkIcon className='h-8 w-8' />}
-               />
-               <Drawer.Items className='md:w-96 max-w-screen-sm'>
-                  <div className='flex align-middle items-center justify-around '></div>
+         <Drawer
+            open={!hidden}
+            onClose={handleClose}
+            edge={false}
+            position='right'
+            id='settings-drawer'
+            className={`md:min-w-fit  min-w-full text-white flex flex-col drawer`}
+            theme={customDrawerTheme}
+         >
+            <Drawer.Header
+               title='Settings'
+               titleIcon={() => null}
+               className='drawer-header'
+               closeIcon={() => <XMarkIcon className='h-8 w-8' />}
+            />
+            <Drawer.Items className='md:w-96 max-w-screen-sm'>
+               <div className='flex align-middle items-center justify-around '></div>
 
-                  <div className='  space-y-2 border-b pt-4 first:mt-0 first:border-b-0 first:pt-0 border-gray-300'>
-                     <DrawerCollapse
-                        label='Accounts'
-                        icon={<BuildingLibraryIcon className='size-4' />}
-                     >
-                        <MintSettings />
-                     </DrawerCollapse>
-                  </div>
-                  {/* <div className='mt-1 space-y-3 border-b pt-4 first:mt-0 first:border-b-0 first:pt-0 border-gray-300'>
+               <div className='  space-y-2 border-b pt-4 first:mt-0 first:border-b-0 first:pt-0 border-gray-300'>
+                  <DrawerCollapse
+                     label='Accounts'
+                     icon={<BuildingLibraryIcon className='size-4' />}
+                  >
+                     <MintSettings />
+                  </DrawerCollapse>
+               </div>
+               {/* <div className='mt-1 space-y-3 border-b pt-4 first:mt-0 first:border-b-0 first:pt-0 border-gray-300'>
                   <DrawerCollapse label='Connections' icon={<LinkIcon className='size-4' />}>
                      {nwcState.allPubkeys.map((pubkey, idx) => (
                         <NwcSidebarItem connection={nwcState.connections[pubkey]} key={idx} />
@@ -95,27 +95,26 @@ export const SettingsSidebar = () => {
                      </div>
                   </DrawerCollapse>
                </div> */}
-                  <div className='mb-12 mt-1 space-y-3  pt-4 first:mt-0 first:pt-0 '>
-                     <DrawerCollapse label={'Profile'} icon={<UserIcon className='size-4' />}>
-                        <ProfileSettings />
-                     </DrawerCollapse>
-                  </div>
-                  {/* <div className='mt-1 space-y-3 border-b pt-4 first:mt-0 first:border-b-0 first:pt-0 border-gray-300'>
+               <div className='mb-12 mt-1 space-y-3  pt-4 first:mt-0 first:pt-0 '>
+                  <DrawerCollapse label={'Profile'} icon={<UserIcon className='size-4' />}>
+                     <ProfileSettings />
+                  </DrawerCollapse>
+               </div>
+               {/* <div className='mt-1 space-y-3 border-b pt-4 first:mt-0 first:border-b-0 first:pt-0 border-gray-300'>
                      <DrawerCollapse
                         label='Cash Taps'
                         icon={<EcashIcon type='solid' className='size-4' />}
                      >
                         <EcashTapsSettings />
                      </DrawerCollapse>
                   </div> */}
-                  {/* <div className='mb-12 mt-1 space-y-3  pt-4 first:mt-0 first:pt-0 '>
+               {/* <div className='mb-12 mt-1 space-y-3  pt-4 first:mt-0 first:pt-0 '>
                      <DrawerCollapse label='Leaderboard' icon={<FlameIcon className='size-4' />}>
                         <LeaderboardSettings onOpenModal={handleOpenLeaderboard} />
                      </DrawerCollapse>
                   </div> */}
-               </Drawer.Items>
-            </Drawer>
-         )}
+            </Drawer.Items>
+         </Drawer>
          <Modal show={nwcUri ? true : false} onClose={() => setNwcUri('')} className='text-black'>
             <Modal.Header>New Wallet Connection</Modal.Header>
             <Modal.Body className='flex flex-col space-y-3'>

diff --git a/src/components/transactionHistory/HistoryTable.tsx b/src/components/transactionHistory/HistoryTable.tsx
@@ -68,7 +68,7 @@ const HistoryTable: React.FC<{
 
    return (
       <>
-         <Table theme={txHistoryTableTheme} className='text-white'>
+         <Table theme={txHistoryTableTheme} className='text-white' id='tx-history-table'>
             <Table.Body>
                {history.map((tx: Transaction, i) => (
                   <HistoryTableRow

diff --git a/src/components/transactionHistory/TransactionHistoryDrawer.tsx b/src/components/transactionHistory/TransactionHistoryDrawer.tsx
@@ -118,7 +118,7 @@ const TransactionHistoryDrawer = () => {
             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}
          >
             <Drawer.Header

diff --git a/src/components/utility/Balance.tsx b/src/components/utility/Balance.tsx
@@ -1,21 +1,33 @@
 import React from 'react';
 import { useBalance } from '@/hooks/boardwalk/useBalance';
+import { useCashuContext } from '@/hooks/contexts/cashuContext';
+import { Currency } from '@/types';
 
 const Balance = () => {
    const { displayBalance, unitSymbol, toggleFxValue, showFxValue, activeUnit } = useBalance();
+   const { activeUnit: contextActiveUnit } = useCashuContext();
+
+   // const unitSymbolColor = contextActiveUnit === Currency.USD ? '#26a69a' : '#6a26a6';
+   const unitSymbolColor = '#26a69a';
 
    return (
       <div className='flex flex-col items-center justify-center w-full'>
          <div className='cursor-pointer' onClick={toggleFxValue}>
             {activeUnit === 'usd' && !showFxValue && (
-               <span className='text-[3.45rem] text-cyan-teal font-bold'>{unitSymbol}</span>
+               <span className='text-[3.45rem] font-bold' style={{ color: unitSymbolColor }}>
+                  {unitSymbol}
+               </span>
             )}
             {activeUnit === 'sat' && showFxValue && (
-               <span className='text-[3.45rem] text-cyan-teal font-bold'>{unitSymbol}</span>
+               <span className='text-[3.45rem] font-bold' style={{ color: unitSymbolColor }}>
+                  {unitSymbol}
+               </span>
             )}
             <span className={`font-teko text-6xl font-bold`}>{displayBalance}</span>
             {(activeUnit === 'sat' && !showFxValue) || (activeUnit === 'usd' && showFxValue) ? (
-               <span className='text-[3.45em] text-cyan-teal font-bold'>{unitSymbol}</span>
+               <span className='text-[3.45em] font-bold' style={{ color: unitSymbolColor }}>
+                  {unitSymbol}
+               </span>
             ) : null}
          </div>
       </div>

diff --git 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('#004B49');
+            changeDrawerItemBgColor('#004B49');
+            changeDrawerColor('#00373D');
+            // changePrimaryButtonColor('#26a69a');
+         } else {
+            changeStatusBarColor('#1D4D98');
+            changeDrawerItemBgColor('#1D4D98');
+            changeDrawerColor('#0f1f41ff');
+            // 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
@@ -8,7 +8,7 @@ type DeepPartial<T> = T extends object
 
 export const customDrawerTheme: DeepPartial<FlowbiteDrawerTheme> = {
    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
@@ -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',
    },