change: colors

berzanorg · Oct 17, 2023 · e4274f2 · e4274f2
1 parent 3c277aa
commit e4274f2
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 38 deletions.
diff --git a/app/components/Bottombar.tsx b/app/components/Bottombar.tsx
@@ -7,11 +7,11 @@ export const Bottombar = () => {
     const { pathname } = useRouter()
 
     return (
-        <footer className="sticky bottom-0 z-30 flex items-center justify-between h-16 px-4 border-t md:hidden xl:px-12 bg-slate-900 border-slate-700">
-            <Link href="/" className={`flex flex-col w-full items-center justify-center gap-0.5 px-4 font-medium leading-none duration-200 ${pathname === '/' ? 'text-white fill-white' : 'text-slate-400 fill-slate-400'} active:scale-90`}>
+        <footer className="sticky bottom-0 z-30 flex items-center justify-between h-16 px-4 border-t md:hidden xl:px-12 bg-gradient-to-tl from-slate-900 to-indigo-950 border-slate-700">
+            <Link href="/" className={`flex flex-col w-full items-center justify-center gap-0.5 px-4 font-medium leading-none duration-200 ${pathname === '/' ? 'text-white fill-white' : 'text-indigo-300/50 fill-indigo-300/50'} active:scale-90`}>
                 <IconShop /> Pawn Shop
             </Link>
-            <Link href="/user-profile" className={`flex flex-col w-full items-center justify-center gap-0.5 px-4 font-medium leading-none duration-200 ${pathname === '/user-profile' ? 'text-white fill-white' : 'text-slate-400 fill-slate-400'} active:scale-90`}>
+            <Link href="/user-profile" className={`flex flex-col w-full items-center justify-center gap-0.5 px-4 font-medium leading-none duration-200 ${pathname === '/user-profile' ? 'text-white fill-white' : 'text-indigo-300/50 fill-indigo-300/50'} active:scale-90`}>
                 <IconProfile /> User Profile
             </Link>
 

diff --git a/app/components/LoadingScreen.tsx b/app/components/LoadingScreen.tsx
@@ -1,9 +1,9 @@
 export const LoadingScreen = () => (
-    <div className="flex-1 flex items-center justify-center">
+    <div className="flex items-center justify-center flex-1">
         <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 -960 960 960"
-            className="animate-spin w-44 h-44 fill-slate-700">
+            className="animate-spin w-44 h-44 fill-indigo-700">
             <path
                 d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z"
             />

diff --git a/app/components/NFTCard.tsx b/app/components/NFTCard.tsx
@@ -30,38 +30,38 @@ export const NFTCard = ({ order, debt, lend }: Props) => {
 
 
     return (
-        <div className='flex flex-col self-center w-full gap-3 rounded-2xl bg--800 max-w-7xl bg-slate-800 p-2.5'>
+        <div className='flex font-medium flex-col self-center w-full gap-3 rounded-2xl max-w-7xl bg-[#2d3765] p-2.5'>
             <Image alt="NFT Art" src={nftImage} className="rounded-2xl" />
             {order?.account && userPda && order.account.equals(userPda) ? (
                 <>
-                    <p className="leading-none text-slate-400">Will Pay: <span className="text-slate-300">${order.debtAmount}</span></p>
-                    <p className="leading-none text-slate-400">Duration: <span className="text-slate-300">{format(order.duration.toNumber())}</span></p>
-                    <button onClick={cancelOrder ? () => cancelOrder(order.index) : undefined} className="h-8 font-medium duration-200 rounded-xl bg-rose-500 hover:bg-rose-400 hover:scale-95 active:scale-100">Cancel Order</button>
+                    <p className="leading-none text-indigo-300">Will Pay: <span className="text-indigo-100">${order.debtAmount}</span></p>
+                    <p className="leading-none text-indigo-300">Duration: <span className="text-indigo-100">{format(order.duration.toNumber())}</span></p>
+                    <button onClick={cancelOrder ? () => cancelOrder(order.index) : undefined} className="h-8 font-semibold duration-200 bg-pink-500 rounded-xl hover:bg-pink-400 hover:scale-95 active:scale-100">Cancel Order</button>
                 </>
             ) : order ? (
                 <>
-                    <p className="leading-none text-slate-400">Will Pay: <span className="text-slate-300">${order.debtAmount}</span></p>
-                    <p className="leading-none text-slate-400">Duration: <span className="text-slate-300">{format(order.duration.toNumber())}</span></p>
-                    <button onClick={executeOrder ? () => executeOrder(order.index, order.account) : undefined} className="h-8 font-medium duration-200 rounded-xl bg-sky-500 hover:bg-sky-400 hover:scale-95 active:scale-100">Lend ${order.borrowAmount}</button>
+                    <p className="leading-none text-indigo-300">Will Pay: <span className="text-indigo-100">${order.debtAmount}</span></p>
+                    <p className="leading-none text-indigo-300">Duration: <span className="text-indigo-100">{format(order.duration.toNumber())}</span></p>
+                    <button onClick={executeOrder ? () => executeOrder(order.index, order.account) : undefined} className="h-8 font-semibold duration-200 bg-indigo-500 rounded-xl hover:bg-indigo-400 hover:scale-95 active:scale-100">Lend ${order.borrowAmount}</button>
                 </>
 
             ) : debt ? (
                 <>
-                    <p className="leading-none text-slate-400">Your Debt: <span className="text-slate-300">${debt.amount}</span></p>
-                    <p className="leading-none text-slate-400">Deadline: <span className="text-slate-300">{deadline || 'done'}</span></p>
-                    <button disabled={!deadline} onClick={payDebt ? () => payDebt(debt.index, debt.lenderPda) : undefined} className="disabled:bg-slate-400 disabled:hover:bg-slate-300 disabled:hover:scale-100 disabled:cursor-not-allowed h-8 font-medium duration-200 rounded-xl bg-sky-500 hover:bg-sky-400 hover:scale-95 active:scale-100">Pay Debt</button>
+                    <p className="leading-none text-indigo-300">Your Debt: <span className="text-indigo-100">${debt.amount}</span></p>
+                    <p className="leading-none text-indigo-300">Deadline: <span className="text-indigo-100">{deadline || 'done'}</span></p>
+                    <button disabled={!deadline} onClick={payDebt ? () => payDebt(debt.index, debt.lenderPda) : undefined} className="h-8 font-semibold duration-200 bg-indigo-500 disabled:bg-slate-500 disabled:hover:bg-slate-400 disabled:hover:scale-100 disabled:cursor-not-allowed rounded-xl hover:bg-indigo-400 hover:scale-95 active:scale-100">Pay Debt</button>
                 </>
 
             ) : lend ? (
                 <>
-                    <p className="leading-none text-slate-400">Will Pay: <span className="text-slate-300">${lend.amount}</span></p>
-                    <p className="leading-none text-slate-400">Deadline: <span className="text-slate-300">{deadline || 'done'}</span></p>
-                    <button disabled={Boolean(deadline)} onClick={seize ? () => seize(lend.index, lend.borrowerPda) : undefined} className="disabled:bg-slate-400 disabled:hover:bg-slate-300 disabled:hover:scale-100 disabled:cursor-not-allowed h-8 font-medium duration-200 rounded-xl bg-sky-500 hover:bg-sky-400 hover:scale-95 active:scale-100">Seize NFT</button>
+                    <p className="leading-none text-indigo-300">Will Pay: <span className="text-indigo-100">${lend.amount}</span></p>
+                    <p className="leading-none text-indigo-300">Deadline: <span className="text-indigo-100">{deadline || 'done'}</span></p>
+                    <button disabled={Boolean(deadline)} onClick={seize ? () => seize(lend.index, lend.borrowerPda) : undefined} className="h-8 font-semibold duration-200 bg-indigo-500 disabled:bg-slate-500 disabled:hover:bg-slate-400 disabled:hover:scale-100 disabled:cursor-not-allowed rounded-xl hover:bg-indigo-400 hover:scale-95 active:scale-100">Seize NFT</button>
                 </>
             ) : (
                 <>
-                    <p className="leading-none text-slate-400">It can be pawned.</p>
-                    <button onClick={popupPawn} className="h-8 font-medium duration-200 rounded-xl bg-sky-500 hover:bg-sky-400 hover:scale-95 active:scale-100">Pawn</button>
+                    <p className="leading-none text-indigo-300">It can be pawned.</p>
+                    <button onClick={popupPawn} className="h-8 font-semibold duration-200 bg-indigo-500 rounded-xl hover:bg-indigo-400 hover:scale-95 active:scale-100">Pawn</button>
                 </>
             )}
         </div>

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -14,15 +14,15 @@ export const Navbar = () => {
     const { demoTokensBalance } = useDapp()
 
     return (
-        <header className="sticky top-0 z-30 flex items-center justify-between h-16 px-4 border-b xl:px-12 bg-slate-900 border-slate-700">
+        <header className="sticky top-0 z-30 flex items-center justify-between h-16 px-4 border-b xl:px-12 bg-gradient-to-bl from-slate-900 to-indigo-950 border-slate-700">
 
             <Link href="/" className="text-xl font-bold md:w-40">
                 NFT Pawn Shop
             </Link>
 
             <nav className="hidden h-full gap-2 md:flex">
-                <Link href="/" className={`flex flex-col items-center justify-center gap-0.5 px-4 font-bold leading-none duration-200 ${pathname === '/' ? 'text-white fill-white' : 'text-slate-400 fill-slate-400'} hover:scale-95`}> <IconShop /> Pawn Shop </Link>
-                <Link href="/user-profile" className={`flex flex-col items-center justify-center gap-0.5 px-4 font-bold leading-none duration-200 ${pathname === '/user-profile' ? 'text-white fill-white' : 'text-slate-400 fill-slate-400'} hover:scale-95`}> <IconProfile /> User Profile </Link>
+                <Link href="/" className={`flex flex-col items-center justify-center gap-0.5 px-4 font-bold leading-none duration-200 ${pathname === '/' ? 'text-white fill-white' : 'text-indigo-300/50 fill-indigo-300/50'} hover:scale-95`}> <IconShop /> Pawn Shop </Link>
+                <Link href="/user-profile" className={`flex flex-col items-center justify-center gap-0.5 px-4 font-bold leading-none duration-200 ${pathname === '/user-profile' ? 'text-white fill-white' : 'text-indigo-300/50 fill-indigo-300/50'} hover:scale-95`}> <IconProfile /> User Profile </Link>
             </nav>
 
             <div className="flex justify-end md:w-40">

diff --git a/app/components/PopupRequestDemoAssets.tsx b/app/components/PopupRequestDemoAssets.tsx
@@ -10,9 +10,9 @@ export const PopupRequestDemoAssets = () => {
     return (
         <>
             {!isHidden && connected && isLoaded && demoNFTsCount === 0 && demoTokensBalance === 0 && (
-                <div className="fixed flex flex-col w-full gap-2.5 p-4 -translate-x-1/2 -translate-y-1/2 border max-w-max bg-slate-800 border-slate-600 rounded-2xl top-1/2 left-1/2">
+                <div className="fixed z-40 flex flex-col w-full gap-8 p-4 -translate-x-1/2 -translate-y-1/2 bg-indigo-900 border border-indigo-600 max-w-max rounded-2xl top-1/2 left-1/2">
                     <p className="font-semibold sm:text-lg">You can request demo assets for testing.</p>
-                    <button onClick={() => { setHidden(true); getDemoAssets() }} type="button" className="font-semibold duration-200 sm:text-lg h-9 rounded-xl bg-sky-500 hover:bg-sky-400 hover:scale-95 active:scale-100">Request Demo Assets</button>
+                    <button onClick={() => { setHidden(true); getDemoAssets() }} type="button" className="font-semibold duration-200 bg-indigo-500 sm:text-lg h-9 rounded-xl hover:bg-indigo-400 hover:scale-95 active:scale-100">Request Demo Assets</button>
                 </div>
             )}
         </>

diff --git a/app/contexts/PopupProvider.tsx b/app/contexts/PopupProvider.tsx
@@ -54,11 +54,11 @@ export const PopupProvider = ({ children }: { children: ReactNode }) => {
         <Context.Provider value={{ popupPawn }}>
             {popup && (
                 popup.kind === 'pawn' ? (
-                    <div className="z-50 fixed flex flex-col w-full gap-2.5 p-4 -translate-x-1/2 -translate-y-1/2 border max-w-max bg-slate-800 border-slate-600 rounded-2xl top-1/2 left-1/2">
-                        <p className="font-bold text-lg">Pawn your NFT!</p>
+                    <div className="z-50 fixed flex flex-col w-full gap-2.5 p-4 -translate-x-1/2 -translate-y-1/2 border max-w-max bg-indigo-900 border-indigo-600 rounded-2xl top-1/2 left-1/2">
+                        <p className="text-lg font-bold">Pawn your NFT!</p>
                         <div className="flex flex-col gap-0.5">
                             <p className="font-semibold">Duration:</p>
-                            <select id='duration' className="bg-slate-900 outline-none px-2 h-9 border border-slate-600 rounded-lg">
+                            <select id='duration' className="px-2 border rounded-lg outline-none bg-indigo-950 h-9 border-slate-600">
                                 <option>Select</option>
                                 <option>2 Mins</option>
                                 <option>1 Day</option>
@@ -70,13 +70,13 @@ export const PopupProvider = ({ children }: { children: ReactNode }) => {
                         </div>
                         <div className="flex flex-col gap-0.5">
                             <p className="font-semibold">Amount You Want:</p>
-                            <input id="borrow" type="number" placeholder="10" className="font-medium placeholder:text-slate-600 bg-slate-900 outline-none px-2 h-9 border border-slate-600 rounded-lg"></input>
+                            <input id="borrow" type="number" placeholder="10" className="px-2 font-medium border rounded-lg outline-none placeholder:text-indigo-300/30 bg-indigo-950 h-9 border-slate-600"></input>
                         </div>
                         <div className="flex flex-col gap-0.5">
                             <p className="font-semibold">Amount You Will Pay:</p>
-                            <input id="debt" type="number" placeholder="11" className="font-medium placeholder:text-slate-600 bg-slate-900 outline-none px-2 h-9 border border-slate-600 rounded-lg"></input>
+                            <input id="debt" type="number" placeholder="11" className="px-2 font-medium border rounded-lg outline-none placeholder:text-indigo-300/30 bg-indigo-950 h-9 border-slate-600"></input>
                         </div>
-                        <button onClick={pawnNFT} className="font-semibold duration-200 text-lg h-9 rounded-xl bg-sky-500 px-4 w-72 hover:bg-sky-400 hover:scale-95 active:scale-100">Pawn Your NFT</button>
+                        <button onClick={pawnNFT} className="px-4 text-lg font-semibold duration-200 bg-indigo-500 h-9 rounded-xl w-72 hover:bg-indigo-400 hover:scale-95 active:scale-100">Pawn Your NFT</button>
                     </div>
                 ) : <></>
             )}

diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-    @apply font-['Onest',sans-serif] bg-slate-900 text-white;
+    @apply font-['Onest',sans-serif] bg-gradient-to-tl from-slate-900 to-indigo-950 text-white;
 
     -webkit-tap-highlight-color: transparent;
 }

diff --git a/app/styles/wallet-adapter.css b/app/styles/wallet-adapter.css
@@ -1,17 +1,17 @@
 .wallet-adapter-button.wallet-adapter-button-trigger {
-    @apply px-5 text-lg font-semibold duration-200 h-10 bg-sky-500 hover:bg-sky-400 rounded-2xl hover:scale-95 active:scale-90
+    @apply px-5 text-lg font-semibold duration-200 h-10 bg-indigo-500 hover:bg-indigo-400 rounded-2xl hover:scale-95 active:scale-90
 }
 
 .wallet-adapter-modal {   
     @apply fixed w-full max-w-md sm:max-w-max px-4 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 
 }
 
 .wallet-adapter-modal-wrapper {
-    @apply flex flex-col py-4 gap-2 bg-slate-800 border-slate-600 border rounded-2xl
+    @apply flex flex-col py-4 gap-2 bg-indigo-900 border-indigo-600 border rounded-2xl
 }
 
 .wallet-adapter-modal-button-close {
-    @apply self-end fill-slate-400 p-3 mr-4 duration-200  rounded-full hover:bg-slate-700 border border-slate-600
+    @apply self-end fill-indigo-400 p-3 mr-4 duration-200  rounded-full bg-indigo-800 hover:bg-indigo-700 border border-indigo-600
 }
 
 .wallet-adapter-modal-title {
@@ -23,19 +23,19 @@
 }
 
 li .wallet-adapter-button  {
-    @apply flex items-center gap-4 text-lg h-14 hover:bg-slate-700 w-full px-5 font-semibold duration-200 min-w-fit
+    @apply flex items-center gap-4 text-lg h-14 hover:bg-indigo-800 w-full px-5 font-semibold duration-200 min-w-fit
 }
 
 .wallet-adapter-button-start-icon img {
     @apply h-10 w-10 min-w-[2.5rem]
 }
 
 .wallet-adapter-button  span {
-    @apply w-full text-end text-base font-medium text-slate-500
+    @apply w-full text-end text-base font-medium text-indigo-400
 }
 
 .wallet-adapter-modal-list-more {
-    @apply flex items-center justify-center gap-2 font-medium fill-white
+    @apply flex items-center justify-center gap-2 font-medium fill-indigo-400 text-indigo-400
 }
 
 .wallet-adapter-modal-list-more-icon-rotate {