From 9e6f481f8f75ba9e0beefa82dac7ba4ce6e2a5f3 Mon Sep 17 00:00:00 2001
From: jonty007 <vivek.singh2994@gmail.com>
Date: Wed, 16 Oct 2024 11:30:41 +0530
Subject: [PATCH] Dark mode fix in wallet, explorer, nft, vite-template,
 cra-template

---
 .../built/common/SmartCallExecutionResult.js  |   2 +-
 .../src/common/SmartCallExecutionResult.tsx   |   2 +-
 packages/cra-template/src/App.tsx             |  24 ++--
 packages/cra-template/src/components/Mint.tsx |   4 +-
 packages/explorer/src/App.tsx                 |  26 +++--
 .../components/playground/DeployModule.tsx    |   1 -
 packages/ft2/src/App.tsx                      |  26 +++--
 packages/ft2/src/components/Mint.tsx          | 109 +++++++++---------
 packages/nft/src/App.tsx                      |  24 ++--
 packages/nft/src/components/Gallery.tsx       |   2 +-
 packages/nft/src/components/Mint.tsx          |   4 +-
 packages/nft/src/components/Nft.tsx           |   4 +-
 packages/vite-template/src/App.tsx            |  25 ++--
 .../vite-template/src/components/Mint.tsx     |   4 +-
 packages/wallet/src/App.tsx                   |   6 +-
 15 files changed, 137 insertions(+), 126 deletions(-)

diff --git a/packages/components/built/common/SmartCallExecutionResult.js b/packages/components/built/common/SmartCallExecutionResult.js
index 01efb3999..1d92d2035 100644
--- a/packages/components/built/common/SmartCallExecutionResult.js
+++ b/packages/components/built/common/SmartCallExecutionResult.js
@@ -15,7 +15,7 @@ export function FunctionResultModalContent(_a) {
     var functionResult = _a.functionResult;
     var navigate = useNavigate();
     if (functionResult && typeof functionResult === "object" && !Array.isArray(functionResult))
-        return (_jsx(_Fragment, { children: _jsxs("div", __assign({ className: "p-4 md:p-5" }, { children: ["You created a\u00A0", _jsx(Link, __assign({ to: "/objects/".concat(functionResult._rev), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", onClick: function () {
+        return (_jsx(_Fragment, { children: _jsxs("div", __assign({ className: "p-4 md:p-5 dark:text-gray-400" }, { children: ["You created a\u00A0", _jsx(Link, __assign({ to: "/objects/".concat(functionResult._rev), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", onClick: function () {
                             navigate("/objects/".concat(functionResult._rev));
                             window.location.reload();
                         } }, { children: "smart object" })), "."] })) }));
diff --git a/packages/components/src/common/SmartCallExecutionResult.tsx b/packages/components/src/common/SmartCallExecutionResult.tsx
index f207917a1..bac638713 100644
--- a/packages/components/src/common/SmartCallExecutionResult.tsx
+++ b/packages/components/src/common/SmartCallExecutionResult.tsx
@@ -6,7 +6,7 @@ export function FunctionResultModalContent({ functionResult }: any) {
   if (functionResult && typeof functionResult === "object" && !Array.isArray(functionResult))
     return (
       <>
-        <div className="p-4 md:p-5">
+        <div className="p-4 md:p-5 dark:text-gray-400">
           You created a&nbsp;
           <Link
             to={`/objects/${functionResult._rev}`}
diff --git a/packages/cra-template/src/App.tsx b/packages/cra-template/src/App.tsx
index f7cc56763..4ab7318d6 100644
--- a/packages/cra-template/src/App.tsx
+++ b/packages/cra-template/src/App.tsx
@@ -29,17 +29,19 @@ export default function App() {
         <ComputerContext.Provider value={computer}>
           <Auth.LoginModal />
           <Wallet />
-          <Navbar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-            <Routes>
-              <Route path="/" element={<AllAssets />} />
-              <Route path="/mine" element={<MyAssets />} />
-              <Route path="/mint" element={<Mint />} />
-              <Route path="/objects/:rev" element={<SmartObject.Component />} />
-              <Route path="/transactions/:txn" element={<Transaction.Component />} />
-              <Route path="*" element={<Navigate to="/" replace={true} />} />
-              <Route path="*" element={<Error404 />} />
-            </Routes>
+          <div className="dark:bg-gray-800 min-h-screen">
+            <Navbar />
+            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+              <Routes>
+                <Route path="/" element={<AllAssets />} />
+                <Route path="/mine" element={<MyAssets />} />
+                <Route path="/mint" element={<Mint />} />
+                <Route path="/objects/:rev" element={<SmartObject.Component />} />
+                <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                <Route path="*" element={<Navigate to="/" replace={true} />} />
+                <Route path="*" element={<Error404 />} />
+              </Routes>
+            </div>
           </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
diff --git a/packages/cra-template/src/components/Mint.tsx b/packages/cra-template/src/components/Mint.tsx
index 8a8d1bd53..c5ff743be 100644
--- a/packages/cra-template/src/components/Mint.tsx
+++ b/packages/cra-template/src/components/Mint.tsx
@@ -6,7 +6,7 @@ import { Counter } from "../contracts/counter"
 function SuccessContent(rev: string) {
   return (
     <>
-      <div className="p-4 md:p-5">
+      <div className="p-4 md:p-5 dark:text-gray-400">
         <div>
           You created a{" "}
           <Link
@@ -35,7 +35,7 @@ function SuccessContent(rev: string) {
 function ErrorContent(msg: string) {
   return (
     <>
-      <div className="p-4 md:p-5">
+      <div className="p-4 md:p-5 dark:text-gray-400">
         <div>
           Something went wrong.
           <br />
diff --git a/packages/explorer/src/App.tsx b/packages/explorer/src/App.tsx
index 4c63cb491..ac8565ed7 100644
--- a/packages/explorer/src/App.tsx
+++ b/packages/explorer/src/App.tsx
@@ -32,18 +32,20 @@ export default function App() {
         <ComputerContext.Provider value={computer}>
           <Auth.LoginModal />
           <Wallet />
-          <NavBar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-            <Routes>
-              <Route path="/" element={<Gallery.WithPagination />} />
-              <Route path="/blocks" element={<Blocks />} />
-              <Route path="/playground" element={<Playground />} />
-              <Route path="/transactions/:txn" element={<Transaction.Component />} />
-              <Route path="/blocks/:block" element={<Block />} />
-              <Route path="/objects/:rev" element={<SmartObject.Component />} />
-              <Route path="/modules/:rev" element={<Module />} />
-              <Route path="*" element={<Error404 />} />
-            </Routes>
+          <div className="dark:bg-gray-800 min-h-screen">
+            <NavBar />
+            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+              <Routes>
+                <Route path="/" element={<Gallery.WithPagination />} />
+                <Route path="/blocks" element={<Blocks />} />
+                <Route path="/playground" element={<Playground />} />
+                <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                <Route path="/blocks/:block" element={<Block />} />
+                <Route path="/objects/:rev" element={<SmartObject.Component />} />
+                <Route path="/modules/:rev" element={<Module />} />
+                <Route path="*" element={<Error404 />} />
+              </Routes>
+            </div>
           </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
diff --git a/packages/explorer/src/components/playground/DeployModule.tsx b/packages/explorer/src/components/playground/DeployModule.tsx
index 9a1a14b28..f33195ce7 100644
--- a/packages/explorer/src/components/playground/DeployModule.tsx
+++ b/packages/explorer/src/components/playground/DeployModule.tsx
@@ -57,7 +57,6 @@ const DeployModule = (props: {
       >
         Deploy Module
       </button>
-      <div className="bg-white h-64"></div>
     </>
   )
 }
diff --git a/packages/ft2/src/App.tsx b/packages/ft2/src/App.tsx
index f1c3a4d9b..04c800446 100644
--- a/packages/ft2/src/App.tsx
+++ b/packages/ft2/src/App.tsx
@@ -30,18 +30,20 @@ export default function App() {
         <ComputerContext.Provider value={computer}>
           <Auth.LoginModal />
           <Wallet />
-          <Navbar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-            <Routes>
-              <Route path="/" element={<AllAssets />} />
-              <Route path="/mine" element={<MyAssets />} />
-              <Route path="/mint" element={<Mint />} />
-              <Route path="/orders" element={<Orders />} />
-              <Route path="/objects/:rev" element={<SmartObject.Component />} />
-              <Route path="/transactions/:txn" element={<Transaction.Component />} />
-              <Route path="*" element={<Navigate to="/" replace={true} />} />
-              <Route path="*" element={<Error404 />} />
-            </Routes>
+          <div className="dark:bg-gray-800 min-h-screen">
+            <Navbar />
+            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+              <Routes>
+                <Route path="/" element={<AllAssets />} />
+                <Route path="/mine" element={<MyAssets />} />
+                <Route path="/mint" element={<Mint />} />
+                <Route path="/orders" element={<Orders />} />
+                <Route path="/objects/:rev" element={<SmartObject.Component />} />
+                <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                <Route path="*" element={<Navigate to="/" replace={true} />} />
+                <Route path="*" element={<Error404 />} />
+              </Routes>
+            </div>
           </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
diff --git a/packages/ft2/src/components/Mint.tsx b/packages/ft2/src/components/Mint.tsx
index d0f14f6bc..c1c20b081 100644
--- a/packages/ft2/src/components/Mint.tsx
+++ b/packages/ft2/src/components/Mint.tsx
@@ -2,12 +2,12 @@ import { useContext, useState } from "react"
 import { ComputerContext, Modal, UtilsContext } from "@bitcoin-computer/components"
 import { TBC20 } from "@bitcoin-computer/TBC20"
 import { Link } from "react-router-dom"
-import { REACT_APP_TOKEN_MOD_SPEC } from '../constants/modSpecs'
+import { REACT_APP_TOKEN_MOD_SPEC } from "../constants/modSpecs"
 
 function SuccessContent(rev: string) {
   return (
     <>
-      <div className="p-4 md:p-5">
+      <div className="p-4 md:p-5 dark:text-gray-400">
         <div>
           You created a{" "}
           <Link
@@ -36,7 +36,7 @@ function SuccessContent(rev: string) {
 function ErrorContent(msg: string) {
   return (
     <>
-      <div className="p-4 md:p-5">
+      <div className="p-4 md:p-5 dark:text-gray-400">
         <div>
           Something went wrong.
           <br />
@@ -67,17 +67,16 @@ export default function Mint() {
   const [symbol, setSymbol] = useState("AAA")
   const { showLoader } = UtilsContext.useUtilsComponents()
 
-
   const onSubmit = async (e: React.SyntheticEvent) => {
     e.preventDefault()
     try {
       showLoader(true)
       const tbc20 = new TBC20(computer, REACT_APP_TOKEN_MOD_SPEC)
       const mintId = await tbc20.mint(computer.getPublicKey(), parseInt(amount, 10), name, symbol)
-      setSuccessRev(mintId || '')
+      setSuccessRev(mintId || "")
       showLoader(false)
       Modal.showModal("success-modal")
-    } catch (err) { 
+    } catch (err) {
       showLoader(false)
       if (err instanceof Error) {
         setErrorMsg(err.message)
@@ -88,54 +87,56 @@ export default function Mint() {
 
   return (
     <>
-    <form onSubmit={onSubmit} className="w-full lg:w-1/2">
-      <div className="grid gap-6 mb-6">
-        <h2 className="text-2xl font-bold dark:text-white">Mint NFT</h2>
-        <div>
-          <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-            Name
-          </label>
-          <input
-            type="text"
-            id="name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          />
-        </div>
-        <div>
-          <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-            Symbol
-          </label>
-          <input
-            type="text"
-            id="symbol"
-            value={symbol}
-            onChange={(e) => setSymbol(e.target.value)}
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          />
-        </div>
-        <div>
-          <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-            Supply
-          </label>
-          <input
-            type="text"
-            id="imageUrl"
-            value={amount}
-            onChange={(e) => { setAmount(e.target.value) }}
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          />
+      <form onSubmit={onSubmit} className="w-full lg:w-1/2">
+        <div className="grid gap-6 mb-6">
+          <h2 className="text-2xl font-bold dark:text-white">Mint NFT</h2>
+          <div>
+            <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            />
+          </div>
+          <div>
+            <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+              Symbol
+            </label>
+            <input
+              type="text"
+              id="symbol"
+              value={symbol}
+              onChange={(e) => setSymbol(e.target.value)}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            />
+          </div>
+          <div>
+            <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+              Supply
+            </label>
+            <input
+              type="text"
+              id="imageUrl"
+              value={amount}
+              onChange={(e) => {
+                setAmount(e.target.value)
+              }}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            />
+          </div>
         </div>
-      </div>
-      <button
-        type="submit"
-        className="mt-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      >
-        Mint NFT
-      </button>
-    </form>
-    <Modal.Component
+        <button
+          type="submit"
+          className="mt-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Mint NFT
+        </button>
+      </form>
+      <Modal.Component
         title={"Success"}
         content={SuccessContent}
         contentData={successRev}
@@ -147,6 +148,6 @@ export default function Mint() {
         contentData={errorMsg}
         id={"error-modal"}
       />
-  </>
+    </>
   )
 }
diff --git a/packages/nft/src/App.tsx b/packages/nft/src/App.tsx
index 990957162..75efa8dc2 100644
--- a/packages/nft/src/App.tsx
+++ b/packages/nft/src/App.tsx
@@ -30,17 +30,19 @@ export default function App() {
         <ComputerContext.Provider value={computer}>
           <Auth.LoginModal />
           <Wallet paymentModSpec={VITE_PAYMENT_MOD_SPEC} />
-          <Navbar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-            <Routes>
-              <Route path="/" element={<AllAssets />} />
-              <Route path="/mine" element={<MyAssets />} />
-              <Route path="/mint" element={<Mint />} />
-              <Route path="/objects/:id" element={<NftView />} />
-              <Route path="/transactions/:txn" element={<Transaction.Component />} />
-              <Route path="*" element={<Navigate to="/" replace={true} />} />
-              <Route path="*" element={<Error404 />} />
-            </Routes>
+          <div className="dark:bg-gray-800 min-h-screen">
+            <Navbar />
+            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto ">
+              <Routes>
+                <Route path="/" element={<AllAssets />} />
+                <Route path="/mine" element={<MyAssets />} />
+                <Route path="/mint" element={<Mint />} />
+                <Route path="/objects/:id" element={<NftView />} />
+                <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                <Route path="*" element={<Navigate to="/" replace={true} />} />
+                <Route path="*" element={<Error404 />} />
+              </Routes>
+            </div>
           </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
diff --git a/packages/nft/src/components/Gallery.tsx b/packages/nft/src/components/Gallery.tsx
index fac900cc4..bafc7b24f 100644
--- a/packages/nft/src/components/Gallery.tsx
+++ b/packages/nft/src/components/Gallery.tsx
@@ -25,7 +25,7 @@ function NFTCard({ nft }: { nft: NFT }) {
     <>
       <div className="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mb-4">
         <img className="h-auto rounded-t-lg max-w-full w-full" src={nft.url} alt="" />
-        <div className="p-4 border-t">
+        <div className="p-4">
           <h5
             className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white break-words"
             title={nft.name}
diff --git a/packages/nft/src/components/Mint.tsx b/packages/nft/src/components/Mint.tsx
index d2b3b54df..3b142fdf6 100644
--- a/packages/nft/src/components/Mint.tsx
+++ b/packages/nft/src/components/Mint.tsx
@@ -9,7 +9,7 @@ function SuccessContent(id: string) {
   return (
     <>
       <div className="p-4 md:p-5">
-        <div>
+        <div className="dark:text-gray-400">
           Congratiolations! You minted an nft. Click{" "}
           <Link
             to={`/objects/${id}`}
@@ -133,7 +133,7 @@ function MintForm(props: {
             />
             {url && (
               <div className="w-full h-64 flex items-center justify-center">
-                <div className="w-4/5 md:w-1/2 lg:w-1/2 h-full bg-gray-200 flex items-center justify-center mt-8">
+                <div className="w-4/5 md:w-1/2 lg:w-1/2 h-full bg-gray-200 flex items-center justify-center mt-8 dark:bg-gray-700">
                   <img className="max-h-full max-w-full object-contain" src={url} alt="" />
                 </div>
               </div>
diff --git a/packages/nft/src/components/Nft.tsx b/packages/nft/src/components/Nft.tsx
index 748be765d..f5e69a696 100644
--- a/packages/nft/src/components/Nft.tsx
+++ b/packages/nft/src/components/Nft.tsx
@@ -107,7 +107,7 @@ const SmartObjectValues = ({ smartObject }: any) => {
       )}
       {smartObject.url && (
         <div className="w-full h-80 flex items-center justify-center my-4">
-          <div className="w-full h-full bg-gray-200 flex items-center justify-center">
+          <div className="w-full h-full bg-gray-200 flex items-center justify-center dark:bg-gray-700">
             <img
               className="max-h-full max-w-full object-contain"
               src={smartObject.url}
@@ -293,7 +293,7 @@ function SuccessContent(id: string) {
   return (
     <>
       <div className="p-4 md:p-5">
-        <div>
+        <div className="dark:text-gray-400">
           You bought this NFT{" "}
           <Link
             to={`/objects/${id}`}
diff --git a/packages/vite-template/src/App.tsx b/packages/vite-template/src/App.tsx
index f7cc56763..8ad5c8fbf 100644
--- a/packages/vite-template/src/App.tsx
+++ b/packages/vite-template/src/App.tsx
@@ -29,17 +29,20 @@ export default function App() {
         <ComputerContext.Provider value={computer}>
           <Auth.LoginModal />
           <Wallet />
-          <Navbar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-            <Routes>
-              <Route path="/" element={<AllAssets />} />
-              <Route path="/mine" element={<MyAssets />} />
-              <Route path="/mint" element={<Mint />} />
-              <Route path="/objects/:rev" element={<SmartObject.Component />} />
-              <Route path="/transactions/:txn" element={<Transaction.Component />} />
-              <Route path="*" element={<Navigate to="/" replace={true} />} />
-              <Route path="*" element={<Error404 />} />
-            </Routes>
+          <div className="dark:bg-gray-800 min-h-screen">
+            {" "}
+            <Navbar />
+            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+              <Routes>
+                <Route path="/" element={<AllAssets />} />
+                <Route path="/mine" element={<MyAssets />} />
+                <Route path="/mint" element={<Mint />} />
+                <Route path="/objects/:rev" element={<SmartObject.Component />} />
+                <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                <Route path="*" element={<Navigate to="/" replace={true} />} />
+                <Route path="*" element={<Error404 />} />
+              </Routes>
+            </div>
           </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
diff --git a/packages/vite-template/src/components/Mint.tsx b/packages/vite-template/src/components/Mint.tsx
index 81335f0ae..0ab130933 100644
--- a/packages/vite-template/src/components/Mint.tsx
+++ b/packages/vite-template/src/components/Mint.tsx
@@ -6,7 +6,7 @@ import { Counter } from "../contracts/counter"
 function SuccessContent(rev: string) {
   return (
     <>
-      <div className="p-4 md:p-5">
+      <div className="p-4 md:p-5 dark:text-gray-400">
         <div>
           You created a{" "}
           <Link
@@ -35,7 +35,7 @@ function SuccessContent(rev: string) {
 function ErrorContent(msg: string) {
   return (
     <>
-      <div className="p-4 md:p-5">
+      <div className="p-4 md:p-5 dark:text-gray-400">
         <div>
           Something went wrong.
           <br />
diff --git a/packages/wallet/src/App.tsx b/packages/wallet/src/App.tsx
index 88993864a..3c151ebbb 100644
--- a/packages/wallet/src/App.tsx
+++ b/packages/wallet/src/App.tsx
@@ -22,7 +22,7 @@ export default function App() {
     if (!Auth.isLoggedIn())
       return (
         <UtilsContext.UtilsProvider>
-          <div className="p-8 mt-16 max-w-screen-md mx-auto">
+          <div className="p-8 mx-auto max-w-screen w-screen dark:bg-gray-800 min-h-screen h-screen">
             <h2 className="text-4xl mb-24 text-center font-bold dark:text-white">
               Bitcoin Computer Wallet
             </h2>
@@ -36,8 +36,8 @@ export default function App() {
         <UtilsContext.UtilsProvider>
           <ComputerContext.Provider value={computer}>
             <SideBar />
-            <div className="p-4 sm:ml-64">
-              <div className="p-8 max-w-screen-xl">
+            <div className="p-4 sm:ml-64 dark:bg-gray-800">
+              <div className="p-8 max-w-screen-xl min-h-screen">
                 <Routes>
                   <Route path="/" element={<Send />} />
                   <Route path="/send" element={<Send />} />