mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-12 01:17:04 +02:00
chore: improve demo auth screen (#9780)
https://linear.app/unleash/issue/2-2575/adjust-text-login-screen Adjusts the text for the demo auth screen. Also took some liberties to improve the visual design of this page (at least, IMO). ### Before  ### After 
This commit is contained in:
parent
f3a1da9d7e
commit
176e9d3187
@ -1,5 +1,11 @@
|
|||||||
.container {
|
.container {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > h2 {
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
@ -24,9 +30,15 @@
|
|||||||
.button {
|
.button {
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
|
margin-top: 0.5rem;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.terms {
|
||||||
|
margin-top: 32px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -49,7 +49,11 @@ const DemoAuth: VFC<IDemoAuthProps> = ({ authDetails, redirect }) => {
|
|||||||
<Logo className={styles.logo} aria-label='Unleash logo' />
|
<Logo className={styles.logo} aria-label='Unleash logo' />
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<h2>Access the Unleash demo instance</h2>
|
<h2>Access the Unleash demo instance</h2>
|
||||||
<p>No further data or Credit Card required</p>
|
<p>
|
||||||
|
Use your email to test out the demo
|
||||||
|
<br />
|
||||||
|
No further data or credit card required
|
||||||
|
</p>
|
||||||
<div className={styles.form}>
|
<div className={styles.form}>
|
||||||
<TextField
|
<TextField
|
||||||
value={email}
|
value={email}
|
||||||
@ -73,10 +77,10 @@ const DemoAuth: VFC<IDemoAuthProps> = ({ authDetails, redirect }) => {
|
|||||||
className={styles.button}
|
className={styles.button}
|
||||||
data-testid={LOGIN_BUTTON}
|
data-testid={LOGIN_BUTTON}
|
||||||
>
|
>
|
||||||
Sign in
|
Test Unleash demo
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p className={styles.terms}>
|
||||||
By accessing our demo instance, you agree to the
|
By accessing our demo instance, you agree to the
|
||||||
Unleash
|
Unleash
|
||||||
<a
|
<a
|
||||||
|
Loading…
Reference in New Issue
Block a user