feat: update onboarding screens

frontend/src/App.tsx

@@ -22,7 +22,7 @@ import { SetupRedirect } from "src/components/redirects/SetupRedirect";
 
 function App() {
   return (
-    <div className="bg:white min-h-full dark:bg-black">
+    <div className="bg-zinc-50 min-h-full flex flex-col justify-center dark:bg-zinc-950">
       <Toaster />
       <HashRouter>
         <Routes>
@@ -54,8 +54,8 @@ function App() {
           </Route>
           <Route path="/*" element={<NotFound />} />
         </Routes>
-        <Footer />
       </HashRouter>
+      <Footer />
     </div>
   );
 }

frontend/src/components/ConnectButton.tsx

@@ -2,9 +2,15 @@ import Loading from "src/components/Loading";
 
 type ConnectButtonProps = {
   isConnecting: boolean;
+  loadingText?: string;
+  submitText?: string;
 };
 
-export default function ConnectButton({ isConnecting }: ConnectButtonProps) {
+export default function ConnectButton({
+  isConnecting,
+  loadingText,
+  submitText,
+}: ConnectButtonProps) {
   return (
     <button
       type="submit"
@@ -15,10 +21,10 @@ export default function ConnectButton({ isConnecting }: ConnectButtonProps) {
     >
       {isConnecting ? (
         <>
-          <Loading /> Connecting...
+          <Loading /> {loadingText || "Connecting..."}
         </>
       ) : (
-        <>Connect</>
+        <>{submitText || "Connect"}</>
       )}
     </button>
   );

frontend/src/components/Container.tsx

@@ -0,0 +1,14 @@
+import nwcComboMark from "src/assets/images/nwc-combomark.svg";
+
+export default function Container({ children }: React.PropsWithChildren) {
+  return (
+    <div className="flex flex-col items-center w-full">
+      <div className="w-96 flex flex-col items-center">
+        <div className="mb-14">
+          <img alt="NWC Logo" className="h-12 inline" src={nwcComboMark} />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

frontend/src/components/Footer.tsx

@@ -5,17 +5,19 @@ import albyLogoWithTextDark from "src/assets/images/alby-logo-with-text-dark.svg
 function Footer() {
   const isDarkMode = useDarkMode();
   return (
-    <footer className="mt-20 mb-4 flex justify-center items-center gap-2">
-      <span className="text-gray-500 dark:text-neutral-300 text-xs">
-        Made with 💜 by
-      </span>
-      <a href="https://getalby.com?utm_source=nwc" rel="noreferrer noopener">
-        <img
-          id="alby-logo"
-          src={isDarkMode ? albyLogoWithTextDark : albyLogoWithText}
-          className="w-16 inline"
-        />
-      </a>
+    <footer className="flex-1 mt-20 mb-4 flex flex-col items-center justify-end">
+      <div className="flex justify-center items-center gap-2">
+        <span className="text-gray-500 dark:text-neutral-300 text-xs">
+          Made with 💜 by
+        </span>
+        <a href="https://getalby.com?utm_source=nwc" rel="noreferrer noopener">
+          <img
+            id="alby-logo"
+            src={isDarkMode ? albyLogoWithTextDark : albyLogoWithText}
+            className="w-16 inline"
+          />
+        </a>
+      </div>
     </footer>
   );
 }

frontend/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Link, Outlet, useLocation } from "react-router-dom";
 
-import nwcLogo from "src/assets/images/nwc-logo.svg";
+import nwcComboMark from "src/assets/images/nwc-combomark.svg";
 
 function Navbar() {
   const location = useLocation();
@@ -14,59 +14,46 @@ function Navbar() {
     <>
       <div className="bg-gray-50 dark:bg-surface-00dp">
         <div className="bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700 mb-6">
-          <nav className="container max-w-screen-lg mx-auto px-4 2xl:px-0 py-3">
-            <div className="flex justify-between items-center">
-              <div className="flex items-center space-x-12">
+          <nav className="container relative max-w-screen-lg mx-auto px-4 2xl:px-0 py-3">
+            <Link
+              to="/"
+              className="z-10 absolute font-headline dark:text-white"
+            >
+              <img alt="NWC Logo" className="h-8 inline" src={nwcComboMark} />
+            </Link>
+            <div className="flex justify-center items-center relative h-8">
+              <div className="flex space-x-4">
                 <Link
-                  to="/"
-                  className="font-headline text-[20px] dark:text-white flex gap-2 justify-center items-center"
+                  className={`${linkStyles} ${
+                    location.pathname.startsWith("/apps") && selectedLinkStyles
+                  }`}
+                  to="/apps"
                 >
-                  <img
-                    alt="NWC Logo"
-                    className="w-8 inline"
-                    width="128"
-                    height="120"
-                    src={nwcLogo}
-                  />
-                  <span className="dark:text-white text-lg font-semibold hidden sm:inline">
-                    Nostr Wallet Connect
-                  </span>
+                  Apps
+                </Link>
+                <Link
+                  className={`${linkStyles} ${
+                    location.pathname === "/setup" && selectedLinkStyles
+                  }`}
+                  to="/setup"
+                >
+                  Setup
+                </Link>
+                <Link
+                  className={`${linkStyles} ${
+                    location.pathname === "/about" && selectedLinkStyles
+                  }`}
+                  to="/about"
+                >
+                  About
                 </Link>
-
-                <div className="flex space-x-4">
-                  <Link
-                    className={`${linkStyles} ${
-                      location.pathname.startsWith("/apps") &&
-                      selectedLinkStyles
-                    }`}
-                    to="/apps"
-                  >
-                    Connections
-                  </Link>
-                  <Link
-                    className={`${linkStyles} ${
-                      location.pathname === "/setup" && selectedLinkStyles
-                    }`}
-                    to="/setup"
-                  >
-                    Setup
-                  </Link>
-                  <Link
-                    className={`${linkStyles} ${
-                      location.pathname === "/about" && selectedLinkStyles
-                    }`}
-                    to="/about"
-                  >
-                    About
-                  </Link>
-                </div>
               </div>
             </div>
           </nav>
         </div>
       </div>
       <div className="flex justify-center">
-        <div className="container max-w-screen-lg px-2">
+        <div className="container max-w-screen-lg px-2 pt-6">
           <Outlet />
         </div>
       </div>

frontend/src/screens/Start.tsx

@@ -5,6 +5,7 @@ import { request } from "src/utils/request";
 import ConnectButton from "src/components/ConnectButton";
 import { handleRequestError } from "src/utils/handleRequestError";
 import { useInfo } from "src/hooks/useInfo";
+import Container from "src/components/Container";
 
 export default function Start() {
   const [unlockPassword, setUnlockPassword] = React.useState("");
@@ -43,32 +44,27 @@ export default function Start() {
 
   return (
     <>
-      <h1 className="text-lg">Start NWC</h1>
-      <p className="text-lg mb-10">
-        To start, please enter your unlock password
-      </p>
-      <form onSubmit={onSubmit} className="mb-10">
-        <>
-          <label
-            htmlFor="greenlight-invite-code"
-            className="block font-medium text-gray-900 dark:text-white"
-          >
-            Unlock password
-          </label>
-          <input
-            name="unlock"
-            onChange={(e) => setUnlockPassword(e.target.value)}
-            value={unlockPassword}
-            type="password"
-            className="dark:bg-surface-00dp block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:ring-2 focus:ring-purple-700 dark:border-gray-700 dark:text-white dark:placeholder-gray-400 dark:ring-offset-gray-800 dark:focus:ring-purple-600"
-          />
-          <ConnectButton isConnecting={loading} />
-        </>
-      </form>
-
-      <Link to="/setup" className=" text-red-500">
-        Forgot password?
-      </Link>
+      <Container>
+        <p className="text-center text-md leading-relaxed dark:text-neutral-400 mb-14">
+          Use your password to unlock NWC
+        </p>
+        <form onSubmit={onSubmit} className="w-full mb-10">
+          <>
+            <input
+              name="unlock"
+              onChange={(e) => setUnlockPassword(e.target.value)}
+              value={unlockPassword}
+              type="password"
+              placeholder="Password"
+              className="dark:bg-surface-00dp block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:ring-2 focus:ring-purple-700 dark:border-gray-700 dark:text-white dark:placeholder-gray-400 dark:ring-offset-gray-800 dark:focus:ring-purple-600"
+            />
+            <ConnectButton isConnecting={loading} />
+          </>
+        </form>
+        <Link to="/setup" className=" text-red-500">
+          Forgot password?
+        </Link>
+      </Container>
     </>
   );
 }