Chore: Add trade related modal color changes matching of earn (#1862)

* added trade related modal color changes matching of earn

* adjust rounding to have similar

* change radius of network switchprompt as well

* fix lint

* fix deposits formatting issue

* fix formatting issue deposits in mobile too

* add zinc-800 for disabled tradebtn

* morenav color

* no styles

Author: surewht

src/app/earn-old/components/earn-widget/styles.css

@@ -1,6 +1,7 @@
 .earn-widget {
   border: 1px solid #ebf2f2;
-  background: linear-gradient(
+  background:
+    linear-gradient(
       33deg,
       rgba(0, 189, 192, 0.02) -9.23%,
       rgba(0, 249, 228, 0.01) 48.82%,

src/app/earn/components/balance-card.tsx

@@ -115,8 +115,8 @@ export const BalanceCard = ({ products, balances }: BalanceCardProps) => {
   )
 
   return (
-    <motion.div className='flex w-full flex-wrap gap-6 rounded-3xl border border-gray-600 border-opacity-[0.8] bg-zinc-900 p-6 sm:flex-nowrap'>
-      <div className='w-full'>
+    <motion.div className='flex w-full flex-wrap gap-6 rounded-3xl border border-gray-600 border-opacity-[0.8] bg-zinc-900 p-6 md:flex-nowrap'>
+      <div className='min-w-0 flex-1'>
         <h3 className='text-lg font-medium text-neutral-50'>My Earn</h3>
         <div className='mt-6'>
           <h4 className='ml-4 text-xs font-medium text-neutral-400'>
@@ -137,10 +137,10 @@ export const BalanceCard = ({ products, balances }: BalanceCardProps) => {
           </div>
         </div>
       </div>
-      <div className='flex w-full min-w-52 flex-col justify-between gap-6 md:w-52'>
+      <div className='flex w-full min-w-[200px] flex-col justify-between gap-6 md:w-auto'>
         <div className='space-y-4 text-right'>
           <p className='text-xs font-medium text-neutral-200'>Total Deposits</p>
-          <p className='text-5xl font-bold text-neutral-50'>
+          <p className='break-all text-5xl font-bold text-neutral-50'>
             ${formatAmount(deposits)}
           </p>
         </div>

src/app/earn/components/earn-widget/components/trade-button.tsx

@@ -44,7 +44,7 @@ export const TradeButton = ({
     <Tooltip>
       <TooltipTrigger
         className={cn(
-          'w-full rounded-full bg-neutral-100 px-6 py-4 font-bold text-neutral-900 transition duration-300 ease-in-out hover:bg-neutral-300',
+          'w-full rounded-3xl bg-neutral-100 px-6 py-4 font-semibold text-zinc-800 transition duration-300 ease-in-out hover:bg-neutral-300',
           disabled && 'pointer-events-none bg-zinc-800 text-neutral-400',
         )}
         disabled={disabled}

src/app/earn/components/earn-widget/index.tsx

@@ -23,7 +23,6 @@ import { getMaxBalance } from '@/lib/utils/max-balance'
 
 import { useFormattedEarnData } from '../../use-formatted-data'
 
-
 import { DepositWithdraw } from './components/deposit-withdraw'
 import { Projection } from './components/projection'
 import { SmartTradeButton } from './components/smart-trade-button'

src/app/legacy/components/redeem-widget/styles.css

@@ -1,6 +1,7 @@
 .widget {
   border: 1px solid var(--Coop-Brand-Colors-IC-Gray-1, #ebf2f2);
-  background: linear-gradient(
+  background:
+    linear-gradient(
       33deg,
       rgba(0, 189, 192, 0.05) -9.23%,
       rgba(0, 249, 228, 0.05) 48.82%,

src/app/leverage/components/leverage-widget/styles.css

@@ -0,0 +1,9 @@
+.leverage-widget {
+  background:
+    radial-gradient(
+      78.46% 76.27% at 41.41% 30.41%,
+      rgba(243, 255, 239, 0.08) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    linear-gradient(199deg, #1c2929 -20.98%, #143438 222.11%);
+}

src/components/header/index.tsx

@@ -65,7 +65,7 @@ export function Header() {
         onClose={setMobileMenuOpen}
       >
         <div className='fixed inset-0 z-10' />
-        <Dialog.Panel className='bg-ic-white dark:bg-ic-black fixed inset-y-0 right-0 z-10 w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:sm:ring-gray-100/10'>
+        <Dialog.Panel className='bg-ic-white fixed inset-y-0 right-0 z-10 w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-zinc-900 dark:sm:ring-gray-100/10'>
           <div className='flex items-center justify-between'>
             <Logo />
             <button

src/components/header/more-nav.tsx

@@ -15,13 +15,13 @@ type Props = {
 export function MoreNav({ navigation }: Props) {
   return (
     <Popover className='flex'>
-      <PopoverButton className='data-[active]:text-ic-gray-950 data-[active]:dark:text-ic-white data-[hover]:text-ic-gray-700 data-[hover]:dark:text-ic-gray-100 text-ic-gray-500 dark:text-ic-gray-300 focus:outline-none data-[focus]:outline-1'>
+      <PopoverButton className='data-[active]:text-ic-gray-950 data-[hover]:text-ic-gray-700 data-[hover]:dark:text-netural-50 text-ic-gray-500 dark:text-ic-gray-300 focus:outline-none data-[focus]:outline-1 data-[active]:dark:text-neutral-400'>
         <EllipsisHorizontalIcon aria-hidden='true' className='h-5 w-5' />
       </PopoverButton>
       <PopoverPanel
         transition
         anchor='bottom'
-        className='bg-ic-white dark:bg-ic-black ring-ic-gray-950/10 dark:ring-ic-gray-50/10 z-10 mt-4 rounded-lg shadow-md ring-1 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0'
+        className='bg-ic-white ring-ic-gray-950/10 dark:ring-ic-gray-50/10 z-10 mt-4 rounded-lg shadow-md ring-1 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0 dark:bg-zinc-900'
       >
         <div className='flex flex-col gap-6 p-6'>
           {navigation

src/components/header/network-select.tsx

@@ -69,7 +69,7 @@ export const NetworkSelect = () => {
   return (
     <Popover as='div' className='relative'>
       <PopoverButton
-        className='bg-ic-gray-900 text-ic-white flex items-center gap-2 rounded-md border-none px-4 py-1 text-sm transition-all duration-300 hover:scale-[1.04]'
+        className='text-ic-white flex items-center gap-2 rounded-md border-none bg-zinc-900 px-4 py-1 text-sm transition-all duration-300 hover:scale-[1.04]'
         onClick={() => open({ view: 'Networks' })}
       >
         {imageSrc && (
@@ -93,7 +93,7 @@ export const NetworkSelect = () => {
             anchor='bottom'
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1, transition: { delay: 1 } }}
-            className='dark:bg-ic-black dark:border-ic-gray-800 dark:text-ic-white text-ic-black z-50 mt-8 w-80 !overflow-visible rounded-md border border-gray-300 bg-white p-4 shadow-md'
+            className='text-ic-black z-50 mt-8 w-80 !overflow-visible rounded-md border border-gray-300 bg-white p-4 shadow-md dark:border-neutral-600 dark:bg-zinc-900 dark:text-neutral-50'
             exit={{ opacity: 0, scale: 0.95 }}
           >
             {!pathname.startsWith(Path.EARN) && (
@@ -116,22 +116,20 @@ export const NetworkSelect = () => {
                 <XMarkIcon className='dark:fill-ic-white group-hover:fill-ic-white' />
               </Button>
             )}
-            <div className='border-b-ic-gray-300 dark:border-b-ic-gray-800 absolute -top-[18px] left-1/2 h-0 w-0 -translate-x-1/2 border-b-[18px] border-l-[13px] border-r-[13px] border-l-transparent border-r-transparent'></div>
-            <div className='border-b-ic-white dark:border-b-ic-black absolute -top-4 left-1/2 h-0 w-0 -translate-x-1/2 border-b-[16px] border-l-[12px] border-r-[12px] border-l-transparent border-r-transparent'></div>
+            <div className='border-b-ic-gray-300 absolute -top-[18px] left-1/2 h-0 w-0 -translate-x-1/2 border-b-[18px] border-l-[13px] border-r-[13px] border-l-transparent border-r-transparent dark:border-b-neutral-600'></div>
+            <div className='border-b-ic-white absolute -top-4 left-1/2 h-0 w-0 -translate-x-1/2 border-b-[16px] border-l-[12px] border-r-[12px] border-l-transparent border-r-transparent dark:border-b-zinc-900'></div>
 
-            <p className='text-md mb-6 mt-2 font-bold'>
+            <p className='text-md mb-6 mt-2 text-neutral-400'>
               You have followed a link that requires your wallet to switch to{' '}
-              <b className='text-ic-blue-500'>{getNetworkName(chainId)}</b>.
+              <b className='text-neutral-50'>{getNetworkName(chainId)}</b>.
             </p>
-            <p className='text-sm'>
+            <p className='text-sm text-neutral-400'>
               Your wallet is currently connected to{' '}
-              <b className='text-ic-blue-500'>
-                {getNetworkName(walletChainId)}
-              </b>
+              <b className='text-neutral-50'>{getNetworkName(walletChainId)}</b>
               .
             </p>
             <Button
-              className='bg-ic-blue-500 hover:bg-ic-blue-500/90 active:bg-ic-blue-500/80 mt-4 w-full rounded-md p-2 font-bold text-white'
+              className='mt-4 w-full rounded-3xl bg-neutral-50 p-2 font-bold text-neutral-900 hover:bg-neutral-100 active:bg-neutral-200'
               onClick={() => chainId && switchChain({ chainId })}
             >
               Switch to {getNetworkName(chainId)}

src/components/swap/components/transaction-review/components/bottom-message.tsx

@@ -1,6 +1,6 @@
 export function BottomMessage() {
   return (
-    <div className='text-ic-gray-600 dark:text-ic-gray-300 mb-4 mt-2 text-center text-sm font-medium'>
+    <div className='text-ic-gray-600 mb-4 mt-2 text-center text-sm font-medium dark:text-neutral-400'>
       Submitting will open your currently connected wallet to confirm and sign
       the transaction.
     </div>