Snowfork · claravanstaden · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
diff --git a/app/history/page.tsx b/app/history/page.tsx
@@ -7,7 +7,6 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -484,7 +483,7 @@ export default function History() {
               </div>
             </Button>
             <Toggle
-              className="flex gap-2"
+              className="flex gap-2 outline-button"
               defaultPressed={false}
               pressed={showGlobal}
               onPressedChange={(p) => setShowGlobal(p)}
@@ -499,7 +498,7 @@ export default function History() {
           <hr />
           <Accordion
             type="single"
-            className="w-full"
+            className="w-full accordian"
             value={selectedItem ?? undefined}
             onValueChange={(v) => {
               setSelectedItem(v);

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,18 +1,14 @@
 import { Analytics } from "@vercel/analytics/react";
-import { BridgeStatus } from "@/components/BridgeStatus";
 import { Footer } from "@/components/Footer";
 import { Menu } from "@/components/Menu";
 import { TermsOfUse } from "@/components/TermsOfUse";
 import { Toaster } from "@/components/ui/sonner";
-import { cn } from "@/lib/utils";
 import "@/styles/globals.css";
+import "@/styles/overrides.css";
 import { Provider } from "jotai";
-import { Inter } from "next/font/google";
 import Image from "next/image";
 import { Metadata } from "next";
 
-const inter = Inter({ subsets: ["latin"] });
-
 import { metadata as meta } from "@/lib/metadata";
 
 export const metadata: Metadata = {
@@ -32,45 +28,45 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={cn(inter.className)}>
-        <Provider>
-          <main>
-            <div className="flex min-h-screen flex-col items-center justify-between p-4 lg:p-24">
-              <div className="w-full max-w-5xl md:gap-4 flex flex-col">
-                <div className="w-full place-items-center justify-between flex flex-col md:flex-row">
-                  <div className="flex mb-4 lg:mb-0">
-                    <Image
-                      className="mb-2"
-                      src="/icon.svg"
-                      width={32}
-                      height={32}
-                      alt="Smiling bridge"
-                    />
-                    <h1 className="text-3xl font-semibold lg:text-4xl px-2">
-                      Snowbridge
-                    </h1>
-                  </div>
-                  <Menu />
-                </div>
-                <div className="flex-col py-2 gap-2">
-                  <div className="flex justify-center">
-                    <BridgeStatus />
-                  </div>
-                </div>
-              </div>
-              <div className="w-full max-w-5xl flex place-content-center">
-                {children}
-              </div>
-              <div className="w-full max-w-5xl flex flex-col place-items-center text-sm">
-                <Footer />
+    <head>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" />
+      <link href="https://fonts.googleapis.com/css2?family=Funnel+Display&display=swap" rel="stylesheet" />
+      <title>Snowbridge</title>
+    </head>
+    <body>
+    <Provider>
+      <main>
+        <div className="flex min-h-screen flex-col items-center justify-between p-4 lg:p-24">
+          <div className="w-full max-w-5xl md:gap-4 flex flex-col">
+            <div className="w-full place-items-center justify-between flex flex-col md:flex-row">
+              <div className="flex mb-4 lg:mb-0">
+                <Image
+                  src="/images/logo-blue.png"
+                  width={58}
+                  height={58}
+                  alt="Snowbridge"
+                />
+                <h1 className="text-3xl font-semibold lg:text-4xl px-2 main-heading ml-2">
+                  Snowbridge
+                </h1>
               </div>
-              <Toaster />
-              <TermsOfUse />
+              <Menu />
             </div>
-          </main>
-        </Provider>
-        <Analytics />
-      </body>
+          </div>
+          <div className="w-full max-w-5xl flex place-content-center mt-6">
+            {children}
+          </div>
+          <div className="w-full max-w-5xl flex flex-col place-items-center text-sm mt-6">
+            <Footer />
+          </div>
+          <Toaster />
+          <TermsOfUse />
+        </div>
+      </main>
+    </Provider>
+    <Analytics />
+    </body>
     </html>
   );
 }
diff --git a/app/txcomplete/page.tsx b/app/txcomplete/page.tsx
@@ -83,7 +83,7 @@ function TxCard(props: TxCardProps) {
               See in History
             </Link>
           </div>
-          <div className="flex justify-evenly">
+          <div className="flex justify-end">
             <RefreshButton
               onClick={refresh}
               className={cn(
@@ -93,7 +93,7 @@ function TxCard(props: TxCardProps) {
               )}
             />
             <Link href="/">
-              <Button>Done</Button>
+              <Button variant="link">Done</Button>
             </Link>
           </div>
         </div>

diff --git a/components/BalanceDisplay.tsx b/components/BalanceDisplay.tsx
@@ -5,6 +5,9 @@ import { useAtomValue } from "jotai";
 import { polkadotAccountAtom } from "@/store/polkadot";
 import { ethereumAccountAtom } from "@/store/ethereum";
 import { useTokenBalance } from "@/hooks/useTokenBalance";
+import {
+  FormLabel,
+} from "./ui/form";
 
 interface BalanceDisplayProps {
   source: environment.TransferLocation;
@@ -38,26 +41,26 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
   }, [error]);
   if (error && !balanceInfo) {
     return (
-      <div
+      <FormLabel
         className={
           "text-sm text-right text-muted-foreground px-1 " +
           (sourceAccount ? " visible" : " hidden")
         }
       >
         Balances: Error...
-      </div>
+      </FormLabel>
     );
   }
   if (balanceInfo === undefined || tokenMetadata === null) {
     return (
-      <div
+      <FormLabel
         className={
           "text-sm text-right text-muted-foreground px-1 " +
           (sourceAccount ? " visible" : " hidden")
         }
       >
         Balances: Fetching...
-      </div>
+      </FormLabel>
     );
   }
 
@@ -79,13 +82,13 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
   })} ${balanceInfo.nativeSymbol}`;
 
   return (
-    <div
+    <FormLabel
       className={
         "text-sm text-right text-muted-foreground px-1 " +
         (sourceAccount ? " visible" : " hidden")
       }
     >
       Balances: {nativeBalance} ; {tokenBalance} {allowance}
-    </div>
+    </FormLabel>
   );
 };
diff --git a/components/ConnectEthereumWalletButton.tsx b/components/ConnectEthereumWalletButton.tsx
@@ -39,7 +39,7 @@ export function ConnectEthereumWalletButton({
         <Button
           className={cn("w-full", className)}
           type="button"
-          variant="destructive"
+          variant="default"
           onClick={async (_) => {
             await switchNetwork(env.ethChainId);
             track("Switch Network");
@@ -52,9 +52,9 @@ export function ConnectEthereumWalletButton({
   }
 
   return (
-    <>
+    <div className="flex flex-col items-center">
       <Button
-        className="w-full"
+        className="w-1/3 action-button"
         type="button"
         variant={variant ?? "link"}
         onClick={async (e) => {
@@ -72,6 +72,6 @@ export function ConnectEthereumWalletButton({
         title="Ethereum Wallet Error"
         description={(windowEthereumError ?? "Unknown Error").toString()}
       />
-    </>
+    </div>
   );
 }
diff --git a/components/ConnectPolkadotWalletButton.tsx b/components/ConnectPolkadotWalletButton.tsx
@@ -21,7 +21,7 @@ export function ConnectPolkadotWalletButton({
   const [, setPolkadotWalletModalOpen] = useAtom(polkadotWalletModalOpenAtom);
   return (
     <Button
-      className={cn("w-full", className)}
+      className={cn("w-full action-button", className)}
       variant={variant ?? "link"}
       onClick={(e) => {
         e.preventDefault();

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -9,14 +9,17 @@ export function Footer() {
   const setAccepted = useSetAtom(acceptedTermsOfUseAtom);
   return (
     <>
-      <p
-        className="text-xs py-2 underline font-semibold cursor-pointer"
-        onClick={() => setAccepted(false)}
-      >
-        Terms of Use
-      </p>
+      <div className="text-xs mb-2">
+        <a className="footer-item" onClick={() => setAccepted(false)}>Terms of Use</a>
+        <a className="footer-item" href="https://github.com/Snowfork/snowbridge" target="_blank">GitHub</a>
+        <a className="footer-item" href="https://github.com/Snowfork/snowbridge-app/issues/new/choose" target="_blank">Report
+          an issue</a>
+        <a className="footer-item" href="https://docs.snowbridge.network/" target="_blank">Docs</a>
+        <a className="footer-item" href="https://dune.com/substrate/snowbridgee" target="_blank">Dune Dashboard</a>
+      </div>
       <div className="text-xs py-2">
-        Copyright © Snowfork 2024 (env: {envName})
+        Copyright © Snowfork 2024
+        {envName !== 'polkadot_mainnet' && ` (env: ${envName})`}
       </div>
     </>
   );

diff --git a/components/Menu.tsx b/components/Menu.tsx
@@ -84,15 +84,15 @@ export const Menu: FC = () => {
             Wallet:{" "}
             <Button
               className="w-full"
-              variant="outline"
+              variant="link"
               onClick={() => setPolkadotWalletModalOpen(true)}
             >
               {wallet?.title}
             </Button>{" "}
           </p>
           <p>Account:</p>
         </div>
-        <SelectedPolkadotAccount />
+        <SelectedPolkadotAccount source="polkadot"/>
       </>
     );
   };
@@ -109,15 +109,15 @@ export const Menu: FC = () => {
             Wallet:{" "}
             <Button
               className="w-full"
-              variant="outline"
+              variant="link"
               onClick={async () => await open({ view: "Connect" })}
             >
               {walletType ?? "Unknown"}
             </Button>{" "}
           </p>
           <p className="text-xs">Account:</p>
         </div>
-        <SelectedEthereumWallet className="text-sm" walletChars={24} />
+        <SelectedEthereumWallet />
       </>
     );
   };
@@ -164,70 +164,14 @@ export const Menu: FC = () => {
             <LucideWallet />
             <p className="pl-2 hidden md:flex">Wallets</p>
           </MenubarTrigger>
-          <MenubarContent align="center">
-            <div className="w-60">
+          <MenubarContent align="center" className="walletModal shadow-sm p-5">
+            <div className="w-90">
               <EthereumWallet />
               <MenubarSeparator></MenubarSeparator>
               <PolkadotWallet />
             </div>
           </MenubarContent>
         </MenubarMenu>
-        <MenubarMenu>
-          <MenubarContent align="center">
-            <Button
-              className="flex items-center justify-start w-auto h-auto gap-2"
-              variant="link"
-              onClick={() =>
-                window.open("https://github.com/Snowfork/snowbridge")
-              }
-            >
-              <Github className="w-[40px] h-[40px]" />
-              <p>GitHub</p>
-            </Button>
-            <Button
-              className="flex items-center justify-start w-auto h-auto gap-2"
-              variant="link"
-              onClick={() =>
-                window.open(
-                  "https://github.com/Snowfork/snowbridge-app/issues/new/choose",
-                )
-              }
-            >
-              <LucideBug className="w-[40px] h-[40px]" />
-              <p>Report an issue</p>
-            </Button>
-            <Button
-              className="flex items-center justify-start w-auto h-auto gap-2"
-              variant="link"
-              onClick={() => window.open("https://docs.snowbridge.network/")}
-            >
-              <LucideBookText className="w-[40px] h-[40px]" />
-              <p>Docs</p>
-            </Button>
-            <Button
-              className={cn(
-                "flex items-center justify-start w-auto h-auto gap-2",
-                envName === "polkadot_mainnet" ? "" : "hidden",
-              )}
-              variant="link"
-              onClick={() =>
-                window.open("https://dune.com/substrate/snowbridge")
-              }
-            >
-              <Image
-                src="https://dune.com/assets/DuneLogoCircle.svg"
-                width={40}
-                height={40}
-                alt="Dune Logo"
-              />
-              <p>Snowbridge Dune Dashboard</p>
-            </Button>
-          </MenubarContent>
-          <MenubarTrigger>
-            <LucideMenu />
-            <p className="pl-2 hidden md:flex">More</p>
-          </MenubarTrigger>
-        </MenubarMenu>
       </Menubar>
       <PolkadotWalletDialog />
     </div>

diff --git a/components/RefreshButton.tsx b/components/RefreshButton.tsx
@@ -21,7 +21,6 @@ export function RefreshButton({
   return (
     <Button
       variant="link"
-      size="sm"
       disabled={isDisabled}
       className={className}
       onClick={async () => {