styling changes

Uniswap · Dec 5, 2024 · 4349b87 · 4349b87
1 parent 3f0eda5
commit 4349b87
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 81 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><text y='32' font-size='32'>🤏</text></svg>" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Smallocator</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -40,3 +40,8 @@
 .read-the-docs {
   color: #888;
 }
+
+button.connect-wallet {
+  background-color: #00ff00 !important;
+  color: #0a0a0a !important;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { getDefaultConfig, RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
 import { mainnet } from 'viem/chains';
 import { WagmiProvider } from 'wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -19,6 +19,14 @@ const config = getDefaultConfig({
   },
 });
 
+const customTheme = darkTheme({
+  accentColor: '#00ff00',
+  accentColorForeground: '#0a0a0a',
+  borderRadius: 'small',
+  fontStack: 'system',
+  overlayBlur: 'small',
+});
+
 function App() {
   const [sessionToken, setSessionToken] = useState<string | null>(null);
 
@@ -34,15 +42,40 @@ function App() {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider>
-          <div className="min-h-screen p-4 max-w-4xl mx-auto">
-            <header className="mb-8">
+        <RainbowKitProvider theme={customTheme}>
+          <div className="min-h-screen w-full">
+            <header className="mb-8 w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
               <div className="flex justify-between items-center">
-                <h1 className="text-3xl font-bold">Smallocator</h1>
-                <WalletConnect hasSession={!!sessionToken} />
+                <h1 className="text-3xl font-bold font-monaco">
+                  <span className="underlined-text">
+                    <span className="text-white">Sm</span><span className="text-[#00ff00]">all</span>
+                  </span><span className="text-[#00ff00]">ocator</span><span className="text-white"> 🤏</span>
+                </h1>
+                <div className="flex items-center gap-4">
+                  <a
+                    href="https://github.com/Uniswap/smallocator"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-gray-400 hover:text-[#00ff00] transition-colors"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      width="24"
+                      height="24"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+                    </svg>
+                  </a>
+                  <WalletConnect hasSession={!!sessionToken} />
+                </div>
               </div>
             </header>
-            <main>
+            <main className="flex flex-col justify-center items-center w-full px-4 sm:px-6 lg:px-8">
               <SessionManager 
                 sessionToken={sessionToken}
                 onSessionUpdate={setSessionToken}

diff --git a/frontend/src/components/BalanceDisplay.tsx b/frontend/src/components/BalanceDisplay.tsx
@@ -1,4 +1,3 @@
-import { useAccount } from 'wagmi';
 import { useState, useEffect } from 'react';
 
 interface Balance {
@@ -11,29 +10,17 @@ interface Balance {
 }
 
 export function BalanceDisplay() {
-  const { isConnected } = useAccount();
   const [balances, setBalances] = useState<Balance[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     async function fetchBalances() {
-      if (!isConnected) return;
-
       setLoading(true);
       setError(null);
 
       try {
-        const sessionId = localStorage.getItem('sessionId');
-        if (!sessionId) {
-          throw new Error('No session ID found');
-        }
-
-        const response = await fetch('/balances', {
-          headers: {
-            'x-session-id': sessionId
-          }
-        });
+        const response = await fetch('/balances');
         if (!response.ok) throw new Error('Failed to fetch balances');
 
         const data = await response.json();
@@ -46,59 +33,20 @@ export function BalanceDisplay() {
     }
 
     fetchBalances();
-  }, [isConnected]);
-
-  if (!isConnected) return null;
-
-  if (loading) {
-    return (
-      <div className="p-6 bg-white rounded-lg shadow-sm">
-        <p className="text-gray-600">Loading balances...</p>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="p-6 bg-white rounded-lg shadow-sm">
-        <p className="text-red-600">Error: {error}</p>
-      </div>
-    );
-  }
-
-  if (balances.length === 0) {
-    return (
-      <div className="p-6 bg-white rounded-lg shadow-sm">
-        <p className="text-gray-600">No balances found</p>
-      </div>
-    );
-  }
+  }, []);
 
   return (
-    <div className="space-y-6">
+    <div>
+      {loading && <p>Loading balances...</p>}
+      {error && <p>Error: {error}</p>}
+      {balances.length === 0 && !loading && <p>No balances found</p>}
       {balances.map((balance) => (
-        <div key={`${balance.chainId}-${balance.lockId}`} className="p-6 bg-white rounded-lg shadow-sm">
-          <h2 className="text-xl font-semibold mb-4">
-            Chain {balance.chainId} - Lock {balance.lockId}
-          </h2>
-          <div className="space-y-4">
-            <div>
-              <p className="text-sm text-gray-600">Allocatable Balance</p>
-              <p className="text-lg font-medium">{balance.allocatableBalance}</p>
-            </div>
-            <div>
-              <p className="text-sm text-gray-600">Allocated Balance</p>
-              <p className="text-lg font-medium">{balance.allocatedBalance}</p>
-            </div>
-            <div>
-              <p className="text-sm text-gray-600">Available to Allocate</p>
-              <p className="text-lg font-medium">{balance.balanceAvailableToAllocate}</p>
-            </div>
-            <div>
-              <p className="text-sm text-gray-600">Withdrawal Status</p>
-              <p className="text-lg font-medium">{balance.withdrawalStatus}</p>
-            </div>
-          </div>
+        <div key={`${balance.chainId}-${balance.lockId}`}>
+          <h2>Chain {balance.chainId} - Lock {balance.lockId}</h2>
+          <p>Allocatable Balance: {balance.allocatableBalance}</p>
+          <p>Allocated Balance: {balance.allocatedBalance}</p>
+          <p>Available to Allocate: {balance.balanceAvailableToAllocate}</p>
+          <p>Withdrawal Status: {balance.withdrawalStatus}</p>
         </div>
       ))}
     </div>

diff --git a/frontend/src/components/WalletConnect.tsx b/frontend/src/components/WalletConnect.tsx
@@ -6,8 +6,13 @@ interface WalletConnectProps {
 
 export function WalletConnect({ hasSession }: WalletConnectProps) {
   return (
-    <div className="flex justify-end mb-4">
-      <ConnectButton showBalance={hasSession} />
+    <div className="flex items-center justify-end h-full">
+      <ConnectButton
+        showBalance={hasSession}
+        accountStatus={{ smallScreen: 'avatar', largeScreen: 'full' }}
+        chainStatus={{ smallScreen: 'icon', largeScreen: 'full' }}
+        label="Connect Wallet"
+      />
     </div>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -4,7 +4,7 @@
 
 @layer base {
   body {
-    @apply bg-gray-50 text-gray-900;
+    @apply bg-[#0a0a0a] text-[#00ff00];
   }
 }
 
@@ -15,7 +15,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #0a0a0a;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -35,12 +35,15 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: #0a0a0a;
 }
 
 h1 {
+  font-family: Monaco, 'Courier New', monospace;
   font-size: 3.2em;
   line-height: 1.1;
 }
@@ -64,6 +67,29 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+button.connect-wallet {
+  background-color: #00ff00;
+  color: #0a0a0a;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+}
+button.connect-wallet:hover {
+  background-color: #00cc00;
+}
+
+.connect-wallet-message {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+  button.connect-wallet {
+    background-color: #00ff00;
+    color: #0a0a0a;
+  }
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -76,3 +102,21 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+#root {
+  width: 100%;
+  max-width: none;
+}
+
+.underlined-text {
+  position: relative;
+}
+.underlined-text::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background-color: white;
+}