[FEAT] Dark theme configure

src/app/globals.css

@@ -74,6 +74,13 @@ input::-webkit-inner-spin-button {
 }
 
 /* Firefox */
-input[type=number] {
+input[type='number'] {
   -moz-appearance: textfield;
-}
+}
+
+.dark .fill-current {
+  fill: #ffffff;
+}
+.fill-current {
+  fill: #000000;
+}

src/app/wallet-adapter/page.tsx

@@ -79,15 +79,17 @@ const page = () => {
       <TopBar />
 
       <section className="w-full py-12 md:py-24 lg:py-32 xl:py-30">
-        <div className="container px-4 md:px-6">
+        <div className="container mx-auto px-4 md:px-6">
           <div className="flex flex-col items-center space-y-4 text-center">
             <div className="space-y-2">
               <span className="inline-block bg-blue-100 text-gray-600 py-1 px-3 rounded-full text-sm font-semibold mb-4">
                 TipLink Wallet Adapter
               </span>
               <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
                 Making Solana apps
-                <span className="text-black/70">consumer ready</span>
+                <span className="text-black/70 dark:text-white/70">
+                  consumer ready
+                </span>
               </h1>
               <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
                 Let your users login with just a Google account and start
@@ -104,14 +106,14 @@ const page = () => {
         </div>
       </section>
 
-      <section className="py-20 px-4 bg-gray-200">
+      <section className="py-20 px-4 bg-gray-200 dark:bg-zinc-600">
         <div className="max-w-6xl mx-auto">
           <h2 className="text-3xl font-bold mb-12 text-center">Key Features</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {features.map((feature, index) => (
               <div
                 key={index}
-                className="flex flex-col bg-white items-center text-center p-6 bg-background rounded-lg shadow-lg hover:shadow-xl duration-300 hover:scale-110 transition-transform animate-fade-in-up"
+                className="flex flex-col dark:bg-[#1c1b22] bg-white items-center text-center p-6 bg-background rounded-lg shadow-lg hover:shadow-xl duration-300 hover:scale-110 transition-transform animate-fade-in-up"
                 style={{ animationDelay: `${index * 100}ms` }}
               >
                 <div className="bg-primary text-primary-foreground rounded-full p-4 mb-4">

src/app/wallet/page.tsx

@@ -18,13 +18,12 @@ const Wallet = async () => {
       },
     })
     if (user) {
-      wallet = user?.publicKey ? user.publicKey :  await createWallet(user) 
+      wallet = user?.publicKey ? user.publicKey : await createWallet(user)
       balance = await fetchUserBalance(wallet)
       console.log(balance)
     }
   }
 
-
   return (
     <div className="h-full flex flex-col items-center">
       <TopBar />
@@ -33,7 +32,11 @@ const Wallet = async () => {
           <LeftSideBar />
         </div>
         <div>
-          <WalletDetail wallet={wallet} usdbalance={Number(balance?.usdBalance)} solbalance={Number(balance?.solBalance)}/>
+          <WalletDetail
+            wallet={wallet}
+            usdbalance={Number(balance?.usdBalance)}
+            solbalance={Number(balance?.solBalance)}
+          />
         </div>
         <div className=" hidden md:block">{/* <RightSideBar /> */}</div>
       </div>

src/components/WalletPage/LeftSideBar.tsx

@@ -76,8 +76,10 @@ const LeftSideBar = () => {
           <button
             key={index}
             className={cn(
-              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white rounded-lg',
-              pathName === option?.href ? 'sm:bg-black text-white' : 'text-black',
+              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white rounded-lg dark:text-white',
+              pathName === option?.href
+                ? 'sm:bg-black text-white'
+                : 'text-black',
             )}
           >
             {option.svg}
@@ -91,7 +93,7 @@ const LeftSideBar = () => {
           <button
             key={index}
             className={cn(
-              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white text-nowrap rounded-lg',
+              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black dark:text-white hover:text-white text-nowrap rounded-lg',
               pathName === option?.href ? 'bg-black text-white' : 'text-black',
             )}
           >

src/components/WalletPage/Send/LinkTransfer.tsx

@@ -1,24 +1,30 @@
-"use client"
+'use client'
 
-import { useState, useEffect } from "react"
-import { ArrowLeft, RefreshCw } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { useState, useEffect } from 'react'
+import { ArrowLeft, RefreshCw } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import Image from "next/image"
-import solIcon from "@/components/icons/solana.png"
-import { IoMdArrowBack } from "react-icons/io"
+} from '@/components/ui/select'
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import Image from 'next/image'
+import solIcon from '@/components/icons/solana.png'
+import { IoMdArrowBack } from 'react-icons/io'
 
 export default function LinkTransfer({ setType }: { setType: () => void }) {
-  const [amount, setAmount] = useState("0")
-  const [asset, setAsset] = useState("SOL")
+  const [amount, setAmount] = useState('0')
+  const [asset, setAsset] = useState('SOL')
   const [isUSD, setIsUSD] = useState(true)
   const [solPrice, setSolPrice] = useState(0)
   const [isLoading, setIsLoading] = useState(true)
@@ -27,7 +33,9 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
   useEffect(() => {
     const fetchSolPrice = async () => {
       try {
-        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd')
+        const response = await fetch(
+          'https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd',
+        )
         if (!response.ok) {
           throw new Error('Failed to fetch SOL price')
         }
@@ -48,10 +56,9 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
   }
 
   const toggleCurrency = () => {
-
     if (!amount) {
-      setAmount('0');
-      return;
+      setAmount('0')
+      return
     }
 
     setIsUSD(!isUSD)
@@ -63,7 +70,6 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
   }
 
   const getEquivalentAmount = () => {
-
     if (!amount) {
       return `~$0.00`
     }
@@ -75,7 +81,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
     }
   }
 
-  const quickSelectAmounts = isUSD ? ["1", "2", "5"] : ["0.01", "0.02", "0.05"]
+  const quickSelectAmounts = isUSD ? ['1', '2', '5'] : ['0.01', '0.02', '0.05']
 
   if (isLoading) {
     return <div>Loading...</div>
@@ -89,7 +95,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
     <Card className="w-full mx-auto border-none shadow-none ">
       <CardHeader>
         <span
-          className="cursor-pointer text-gray-600 flex gap-x-2 items-center"
+          className="cursor-pointer text-gray-600 dark:text-gray-200 flex gap-x-2 items-center"
           onClick={setType}
         >
           <IoMdArrowBack />
@@ -106,7 +112,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
             <SelectTrigger className="w-full">
               <SelectValue placeholder="Select asset" />
             </SelectTrigger>
-            <SelectContent className="bg-white">
+            <SelectContent className="bg-white dark:bg-[#121212]">
               <SelectItem value="SOL" className="">
                 <div className="flex items-center gap-x-2">
                   <Image src={solIcon} height={30} width={30} alt="sol" />
@@ -132,10 +138,10 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
               className="text-3xl font-semibold pl-8 pr-12 py-6"
             />
             <span className="absolute left-3 top-1/2 -translate-y-1/2 text-3xl font-semibold text-muted-foreground">
-              {isUSD ? "$" : ""}
+              {isUSD ? '$' : ''}
             </span>
             <span className="absolute right-3 top-1/2 -translate-y-1/2 text-lg text-muted-foreground">
-              {isUSD ? "USD" : asset}
+              {isUSD ? 'USD' : asset}
             </span>
             <Button
               variant="ghost"
@@ -146,20 +152,30 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
               <RefreshCw className="h-4 w-4" />
             </Button>
           </div>
-          <p className="text-sm text-right text-muted-foreground mt-1">{getEquivalentAmount()}</p>
+          <p className="text-sm text-right text-muted-foreground mt-1">
+            {getEquivalentAmount()}
+          </p>
         </div>
         <div className="flex justify-between gap-2">
           {quickSelectAmounts.map((quickAmount) => (
-            <Button key={quickAmount} variant="outline" onClick={() => setAmount(quickAmount)} className="flex-1">
-              {isUSD ? "$" : ""}{quickAmount}
+            <Button
+              key={quickAmount}
+              variant="outline"
+              onClick={() => setAmount(quickAmount)}
+              className="flex-1"
+            >
+              {isUSD ? '$' : ''}
+              {quickAmount}
             </Button>
           ))}
         </div>
       </CardContent>
       <CardFooter className="flex justify-between">
-        <Button variant="ghost" onClick={setType}>Cancel</Button>
+        <Button variant="ghost" onClick={setType}>
+          Cancel
+        </Button>
         <Button onClick={handleCreateLink}>Create new TipLink</Button>
       </CardFooter>
     </Card>
   )
-}
+}