UI updates for Solana dedicated wallet

scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx

@@ -10,9 +10,12 @@ export default createScaffold<NextDedicatedWalletData>(
     <Zombi {...props} prompts={mergePrompts(AuthTypePrompt.questions, PublishableApiKeyPrompt.questions)}>
       {(data) => (
         <>
-          <Template source="./public/background.svg" />
+          <Template source="./public/info.svg" />
+          <Template source="./public/link_white.svg" />
+          <Template source="./public/login_bg.png" />
+          <Template source="./public/logo.svg" />
+          <Template source="./public/redirect_bg.png" />
           <Template source="./public/favicon.ico" />
-          <Template source="./public/magic_color_white.svg" />
           <Template source="./public/link.svg" />
           <Template source="./.env.example" />
           <Template source="./.eslintrc.json" />

scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Dashboard.tsx

@@ -1,27 +1,25 @@
-import React from 'react'
-import WalletMethods from './cards/WalletMethodsCard'
-import SendTransaction from './cards/SendTransactionCard'
-import Spacer from '@/components/ui/Spacer'
-import {LoginProps} from '@/utils/types'
-import UserInfo from './cards/UserInfoCard'
-import DevLinks from './DevLinks'
-import Header from './Header'
+import React from 'react';
+import WalletMethods from './cards/WalletMethodsCard';
+import SendTransaction from './cards/SendTransactionCard';
+import Spacer from '@/components/ui/Spacer';
+import { LoginProps } from '@/utils/types';
+import UserInfo from './cards/UserInfoCard';
+import DevLinks from './DevLinks';
+import Header from './Header';
 
-export default function Dashboard({token, setToken}: LoginProps) {
-	return (
-		<div className='home-page'>
-			<Header />
-			<Spacer size={32} />
-			<Spacer size={120} />
-			<div className='cards-container'>
-				<SendTransaction />
-				<Spacer size={10} />
-				<UserInfo token={token} setToken={setToken} />
-				<Spacer size={10} />
-				<WalletMethods token={token} setToken={setToken} />
-				<Spacer size={15} />
-			</div>
-			<DevLinks primary />
-		</div>
-	)
+export default function Dashboard({ token, setToken }: LoginProps) {
+  return (
+    <div className="home-page">
+      <Header />
+      <div className="cards-container">
+        <UserInfo token={token} setToken={setToken} />
+        <Spacer size={10} />
+        <SendTransaction />
+        <Spacer size={10} />
+        <WalletMethods token={token} setToken={setToken} />
+        <Spacer size={15} />
+      </div>
+      <DevLinks primary />
+    </div>
+  );
 }

scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Header.tsx

@@ -1,19 +1,20 @@
-import Image from 'next/image'
-import MagicColorWhite from 'public/magic_color_white.svg'
-import {Dispatch, SetStateAction} from 'react'
-import DevLinks from './DevLinks'
+import Image from 'next/image';
+import Logo from 'public/logo.svg';
+import DevLinks from './DevLinks';
 
 const Header = () => {
-	return (
-		<div className='app-header-container'>
-			<Image
-				className='h-[180] w-[120px] m-2'
-				src={MagicColorWhite}
-				alt='logo'
-			/>
-			<DevLinks />
-		</div>
-	)
-}
+  return (
+    <div className="app-header-container">
+      <div className="flex flex-col gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
+      </div>
+      <DevLinks />
+    </div>
+  );
+};
 
-export default Header
+export default Header;

scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Login.tsx

@@ -1,22 +1,22 @@
-import {LoginProps} from '@/utils/types'
+import { LoginProps } from '@/utils/types'
 import Header from './Header'
 <% loginMethods.forEach(authType => { %>
 <%-`import ${authType.replaceAll(' ', '')} from './auth/${authType.replaceAll(' ', '')}';`-%>
 <% }) %>
 
-const Login = ({token, setToken}: LoginProps) => {
-	return (
-		<div className='login-page'>
-			<Header />
-			<div className='login-method-grid'>
-				<% loginMethods.forEach(authType => { %>
-				<% if (authType !== "Social Logins") { %>
-					<%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>
-				<% } %>
-				<% }) %>
-			</div>
-		</div>
-	)
+const Login = ({ token, setToken }: LoginProps) => {
+  return (
+    <div className="login-page">
+      <Header />
+      <div className={`max-w-[100%] grid grid-cols-<%= Math.min(loginMethods.length, 3) %> grid-flow-row auto-rows-fr gap-5 p-4 mt-8`}>
+      <% loginMethods.forEach(authType => { %>
+      <% if (authType !== "Social Logins") { %>
+        <%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>
+      <% } %>
+  		<% }) %>
+      </div>
+    </div>
+  )
 }
 
 export default Login

scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback } from 'react';
-import Spacer from '../ui/Spacer';
-import Header from './Header';
 import DevLinks from './DevLinks';
+import Image from 'next/image';
+import Info from 'public/info.svg';
+import Link from 'public/link_white.svg';
+import Logo from 'public/logo.svg';
 
 const MagicDashboardRedirect = () => {
   const onClick = useCallback(() => {
@@ -10,18 +12,27 @@ const MagicDashboardRedirect = () => {
 
   return (
     <div className="redirect-container">
-      <Spacer size={32} />
-      <Spacer size={20} />
-      <div className="text-center">
-        <h3 className="max-w-[500px] text-center text-[#ffffffcc] text-xl font-normal m-0">
-          Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can get
-          your Magic API key from the Magic Dashboard.
-        </h3>
+      <div className="flex flex-col mt-10 gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
       </div>
-      <Spacer size={32} />
-      <div className="text-center">
-        <button className="login-button min-w-[300px]" onClick={onClick}>
-          Go to Dashboard
+      <div className="flex flex-col items-center flex-1">
+        <div className="redirect-card">
+          <div className="flex gap-2 mx-4 my-2 ">
+            <Image src={Info} alt="logo" />
+            <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal">
+              Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can
+              get your Magic API key from the Magic Dashboard.
+            </h3>
+          </div>
+        </div>
+
+        <button className="api-button" onClick={onClick} disabled={false}>
+          Get API keys
+          <Image src={Link} alt="link-icon" className="ml-[6px] my-auto" />
         </button>
       </div>
       <DevLinks />