Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

title screen update #183

Merged
merged 1 commit into from
Mar 28, 2024
Merged

title screen update #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions web/src/components/TitleScreen.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down Expand Up @@ -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;
}




26 changes: 16 additions & 10 deletions web/src/components/TitleScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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)} />
) : (
Expand Down
3 changes: 2 additions & 1 deletion web/src/components/account/Account.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
align-items: center;
gap: 0;
width: 100%;
max-width: 350px;
padding-left: 20px;
padding-right: 20px;
}

.header {
Expand Down
62 changes: 31 additions & 31 deletions web/src/components/account/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
72 changes: 36 additions & 36 deletions web/src/components/account/SignUpForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 1 addition & 4 deletions web/src/components/layout/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions web/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Loading