title screen update

moonstream-to · Mar 28, 2024 · ad902b4 · ad902b4
1 parent c0810c8
commit ad902b4
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 87 deletions.
diff --git a/web/src/components/TitleScreen.module.css b/web/src/components/TitleScreen.module.css
@@ -17,18 +17,24 @@
 
 .content {
     display: flex;
-    padding: 20px;
+    padding-bottom: 20px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 10px;
-    flex-grow: 1;
+    gap: 20px;
+    flex-grow: 0;
     width: 100%;
+    max-width: 400px;
+    border: 1px solid #262019;
+    height: fit-content;
+    background: #FCECD9;
+
 }
 
 .footer{
   display: flex;
   gap: 5px;
+  margin-top: -10px;
 }
 
 .footerText{
@@ -93,18 +99,26 @@
 
 .loginContainer {
   display: flex;
-  padding-top: 20px;
+  padding: 34px 35px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: #FCECD9;
   min-height: 100vh;
   width: 100%;
+  background-image: url('https://static.fullcount.xyz/web/landing/Bl-banner-background-tinted.jpeg');
+  background-size: cover;
+  background-position: center;
 }
 
 .logo {
   height: 84px;
   width: 158px;
 }
 
+.banner {
+  border-bottom: 1px solid #262019;
+}
+
+
+
 
diff --git a/web/src/components/TitleScreen.tsx b/web/src/components/TitleScreen.tsx
@@ -7,11 +7,11 @@ import Playing from "./Playing";
 import SignUpForm from "./account/SignUpForm";
 import LoginForm from "./account/LoginForm";
 
-import { FULLCOUNT_ASSETS_PATH } from "../constants";
+import { FULLCOUNT_ASSETS, FULLCOUNT_ASSETS_PATH } from "../constants";
 import LoadingView from "./HomePage/LoadingView";
 const TitleScreen = () => {
   const { user, isLoading } = useUser();
-  const [isLogging, setIsLogging] = useState(true); // login or signUp
+  const [isLogging, setIsLogging] = useState(false); // login or signUp
   const [isSuccess, setIsSuccess] = useState(false);
   const [isFirstSeconds, setIsFirstSeconds] = useState(true);
 
@@ -29,15 +29,21 @@ const TitleScreen = () => {
             <LoadingView />
           ) : (
             <div className={styles.loginContainer}>
-              <Image
-                alt={""}
-                className={styles.logo}
-                height={"84"}
-                width={"158"}
-                priority
-                src={`${FULLCOUNT_ASSETS_PATH}/logo-4-no-stroke.png`}
-              />
+              {/*<Image*/}
+              {/*  alt={""}*/}
+              {/*  className={styles.logo}*/}
+              {/*  height={"84"}*/}
+              {/*  width={"158"}*/}
+              {/*  priority*/}
+              {/*  src={`${FULLCOUNT_ASSETS_PATH}/logo-4-no-stroke.png`}*/}
+              {/*/>*/}
               <div className={styles.content}>
+                <img
+                  className={styles.banner}
+                  src={`${FULLCOUNT_ASSETS}/landing/banner.png`}
+                  alt={""}
+                />
+
                 {!isLogging ? (
                   <SignUpForm setIsSuccess={(value) => setIsSuccess(value)} />
                 ) : (

diff --git a/web/src/components/account/Account.module.css b/web/src/components/account/Account.module.css
@@ -5,7 +5,8 @@
     align-items: center;
     gap: 0;
     width: 100%;
-    max-width: 350px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .header {

diff --git a/web/src/components/account/LoginForm.tsx b/web/src/components/account/LoginForm.tsx
@@ -29,37 +29,37 @@ const LoginForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => voi
 
   return (
     <form onSubmit={handleSubmit} className={styles.container}>
-      <div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>
-        <div className={`${styles.header} ${isSuccess ? styles.fadeOut : ""}`}>Welcome back!</div>
-        <label className={styles.label}>Username</label>
-        <input
-          type="text"
-          placeholder="Enter your username"
-          name="username"
-          value={username}
-          className={showInvalid && !isUsernameValid ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          spellCheck={false}
-          onChange={(event) => {
-            setShowInvalid(false);
-            setUsername(event.target.value);
-          }}
-        />
-        <div className={styles.label}>Password</div>
-        <input
-          type="password"
-          placeholder="Enter your password"
-          value={password}
-          name="password"
-          className={showInvalid && !isPasswordValid ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          spellCheck={false}
-          onChange={(event) => {
-            setShowInvalid(false);
-            setPassword(event.target.value);
-          }}
-        />
-      </div>
+      {/*<div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>*/}
+      <div className={`${styles.header} ${isSuccess ? styles.fadeOut : ""}`}>Welcome back!</div>
+      <label className={styles.label}>Username</label>
+      <input
+        type="text"
+        placeholder="Enter your username"
+        name="username"
+        value={username}
+        className={showInvalid && !isUsernameValid ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        spellCheck={false}
+        onChange={(event) => {
+          setShowInvalid(false);
+          setUsername(event.target.value);
+        }}
+      />
+      <div className={styles.label}>Password</div>
+      <input
+        type="password"
+        placeholder="Enter your password"
+        value={password}
+        name="password"
+        className={showInvalid && !isPasswordValid ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        spellCheck={false}
+        onChange={(event) => {
+          setShowInvalid(false);
+          setPassword(event.target.value);
+        }}
+      />
+      {/*</div>*/}
       <button className={styles.button}>
         {isLoading ? <Spinner /> : isSuccess ? <div>Success</div> : <div>Login</div>}
       </button>

diff --git a/web/src/components/account/SignUpForm.tsx b/web/src/components/account/SignUpForm.tsx
@@ -31,44 +31,44 @@ const SignUpForm = ({ setIsSuccess }: { setIsSuccess: (isSuccess: boolean) => vo
 
   return (
     <form onSubmit={handleSubmit} className={styles.container}>
-      <div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>
-        <div className={styles.header}>Welcome!</div>
-        <label className={styles.label}>Username</label>
-        <input
-          type="text"
-          placeholder="Enter your username"
-          name="username"
-          value={username}
-          className={showErrors && !username ? "inputError" : ""}
-          onChange={(event) => setUsername(event.target.value)}
-          style={{ marginBottom: "10px" }}
-          spellCheck={false}
-        />
+      {/*<div className={`${styles.container} ${isSuccess ? styles.fadeOut : ""}`}>*/}
+      <div className={styles.header}>Welcome!</div>
+      <label className={styles.label}>Username</label>
+      <input
+        type="text"
+        placeholder="Enter your username"
+        name="username"
+        value={username}
+        className={showErrors && !username ? "inputError" : ""}
+        onChange={(event) => setUsername(event.target.value)}
+        style={{ marginBottom: "10px" }}
+        spellCheck={false}
+      />
 
-        <div className={styles.label}>Email</div>
-        <input
-          type="text"
-          placeholder="Enter your email"
-          name="email"
-          value={email}
-          className={showErrors && !email ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          onChange={(event) => setEmail(event.target.value)}
-          spellCheck={false}
-        />
+      <div className={styles.label}>Email</div>
+      <input
+        type="text"
+        placeholder="Enter your email"
+        name="email"
+        value={email}
+        className={showErrors && !email ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        onChange={(event) => setEmail(event.target.value)}
+        spellCheck={false}
+      />
 
-        <div className={styles.label}>Password</div>
-        <input
-          type="password"
-          placeholder="Enter your password"
-          value={password}
-          name="password"
-          className={showErrors && !password ? "inputError" : ""}
-          style={{ marginBottom: "10px" }}
-          onChange={(event) => setPassword(event.target.value)}
-          spellCheck={false}
-        />
-      </div>
+      <div className={styles.label}>Password</div>
+      <input
+        type="password"
+        placeholder="Enter your password"
+        value={password}
+        name="password"
+        className={showErrors && !password ? "inputError" : ""}
+        style={{ marginBottom: "10px" }}
+        onChange={(event) => setPassword(event.target.value)}
+        spellCheck={false}
+      />
+      {/*</div>*/}
       <button className={styles.button}>
         {isLoading ? <Spinner /> : isSuccess ? <div>Success</div> : <div>Create account</div>}
       </button>

diff --git a/web/src/components/layout/layout.tsx b/web/src/components/layout/layout.tsx
@@ -25,10 +25,7 @@ export default function Layout({
         <title>{title ?? "Fullcount"}</title>
         <meta name="description" content="Baseball game" />
         <meta name="og:title" content={siteTitle} />
-        <meta
-          name="keywords"
-          content="NFT gaming, smart contracts, web3, smart contract, ethereum, polygon, matic, transactions, defi, decentralized, mempool, NFT, NFTs, DAO, DAOs, cryptocurrency, cryptocurrencies, bitcoin, blockchain economy, blockchain game, marketplace, blockchain security, loyalty program, Ethereum bridge, Ethereum bridges, NFT game, NFT games"
-        />
+        <meta name="keywords" content="baseball, games, fullcount, home run" />
         <meta name="og:image" content={`${assetsPath}/fullcount-og-image.png`} />
       </Head>
       <Flex

diff --git a/web/src/constants.ts b/web/src/constants.ts
@@ -28,6 +28,7 @@ export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 export const AWS_STATIC_ASSETS_PATH = "https://static.simiotics.com/moonstream/assets";
 
 export const FULLCOUNT_ASSETS_PATH = "https://static.simiotics.com/fullcount";
+export const FULLCOUNT_ASSETS = "https://static.fullcount.xyz/web";
 export const TOKEN_IMAGE_FALLBACK = `${FULLCOUNT_ASSETS_PATH}/question.png`;
 
 export const DISCORD_LINK = "https://discord.gg/K56VNUQGvA";