Merge pull request #109 from magiclabs/staging

Template UI Redesign
magiclabs · Sep 27, 2023 · 1b886df · 1b886df
2 parents 1b44cf5 + a967c7b
commit 1b886df
Show file tree

Hide file tree

Showing 69 changed files with 1,645 additions and 1,978 deletions.
diff --git a/core/create-app.tsx b/core/create-app.tsx
@@ -96,7 +96,7 @@ export async function createApp(config: CreateMagicAppConfig) {
       name: 'configuration',
       message: 'Select a configuration to start with:',
       choices: [
-        { name: 'quickstart', message: 'Quickstart (Nextjs, Dedicated Wallet, Polygon Testnet, Email OTP)' },
+        { name: 'quickstart', message: 'Quickstart (Nextjs, Polygon Testnet, Email OTP)' },
         { name: 'custom', message: 'Custom Setup (Choose product, network, etc.)' },
       ],
     }).run();

diff --git a/scaffolds/nextjs-dedicated-wallet/scaffold.tsx b/scaffolds/nextjs-dedicated-wallet/scaffold.tsx
@@ -26,9 +26,12 @@ export default createScaffold<NextDedicatedWalletData>(
     >
       {(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" />

diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/background.svg b/scaffolds/nextjs-dedicated-wallet/template/public/background.svg
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/info.svg b/scaffolds/nextjs-dedicated-wallet/template/public/info.svg
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/link_white.svg b/scaffolds/nextjs-dedicated-wallet/template/public/link_white.svg
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/login_bg.png b/scaffolds/nextjs-dedicated-wallet/template/public/login_bg.png
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/logo.svg b/scaffolds/nextjs-dedicated-wallet/template/public/logo.svg
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/magic_color_white.svg b/scaffolds/nextjs-dedicated-wallet/template/public/magic_color_white.svg
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/redirect_bg.png b/scaffolds/nextjs-dedicated-wallet/template/public/redirect_bg.png
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Dashboard.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Dashboard.tsx
@@ -11,13 +11,11 @@ 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} />
+        <SendTransaction />
+        <Spacer size={10} />
         <WalletMethods token={token} setToken={setToken} />
         <Spacer size={15} />
       </div>

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Header.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Header.tsx
@@ -1,11 +1,17 @@
 import Image from 'next/image';
-import MagicColorWhite from 'public/magic_color_white.svg';
+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" />
+      <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>
   );

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Login.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Login.tsx
@@ -8,7 +8,7 @@ const Login = ({ token, setToken }: LoginProps) => {
   return (
     <div className="login-page">
       <Header />
-      <div className="login-method-grid">
+      <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} />`-%>

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
-import Spacer from '../ui/Spacer';
 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(() => {
@@ -9,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-[296px]" 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 />

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
@@ -55,18 +55,16 @@ const Discord = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={discord} alt="Discord" height={24} width={24} />
-            <div className="text-xs font-semibold">Discord</div>
-          </div>
+            <Image src={discord} alt="Discord" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Discord</div>
+          </button>
         </div>
       )}
     </Card>

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
@@ -68,7 +68,7 @@ const EmailOTP = ({ token, setToken }: LoginProps) => {
           disabled={isLoginInProgress || (token.length > 0 ? false : email.length == 0)}
           onClick={() => handleLogin()}
         >
-          {isLoginInProgress ? <Spinner /> : 'Login'}
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
         </button>
       </div>
     </Card>

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
@@ -55,18 +55,16 @@ const Facebook = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={facebook} alt="Facebook" height={24} width={24} />
-            <div className="text-xs font-semibold">Facebook</div>
-          </div>
+            <Image src={facebook} alt="Facebook" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Facebook</div>
+          </button>
         </div>
       )}
     </Card>

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx
@@ -55,18 +55,16 @@ const Github = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={github} alt="Github" height={24} width={24} />
-            <div className="text-xs font-semibold">Github</div>
-          </div>
+            <Image src={github} alt="Github" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Github</div>
+          </button>
         </div>
       )}
     </Card>

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx
@@ -55,18 +55,16 @@ const Google = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={google} alt="Google" height={24} width={24} />
-            <div className="text-xs font-semibold">Google</div>
-          </div>
+            <Image src={google} alt="Google" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Google</div>
+          </button>
         </div>
       )}
     </Card>

diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
@@ -74,7 +74,7 @@ const SMSOTP = ({ token, setToken }: LoginProps) => {
           disabled={isLoginInProgress || (token.length > 0 ? false : phone.length == 0)}
           onClick={() => handleLogin()}
         >
-          {isLoginInProgress ? <Spinner /> : 'Login'}
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
         </button>
       </div>
     </Card>