From 176e9d318712297a03494e3b641a0f661fe7dce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 16 Apr 2025 15:07:22 +0100
Subject: [PATCH] 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


![image](https://github.com/user-attachments/assets/c17a4378-a940-4e5f-ad79-00ae4514cba6)

### After


![image](https://github.com/user-attachments/assets/c77d7d43-648f-40ab-9eb6-07156af22a7f)
---
 .../src/component/user/DemoAuth/DemoAuth.module.scss | 12 ++++++++++++
 frontend/src/component/user/DemoAuth/DemoAuth.tsx    | 10 +++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.module.scss b/frontend/src/component/user/DemoAuth/DemoAuth.module.scss
index 84a14ca80c..ed36fd76fd 100644
--- a/frontend/src/component/user/DemoAuth/DemoAuth.module.scss
+++ b/frontend/src/component/user/DemoAuth/DemoAuth.module.scss
@@ -1,5 +1,11 @@
 .container {
     width: 350px;
+    text-align: center;
+}
+
+.container > h2 {
+    margin-top: 16px;
+    margin-bottom: 16px;
 }
 
 .container > * {
@@ -24,9 +30,15 @@
 .button {
     min-width: 150px;
     margin: 1rem auto;
+    margin-top: 0.5rem;
     display: block;
 }
 
+.terms {
+    margin-top: 32px;
+    font-size: 12px;
+}
+
 @media (max-width: 500px) {
     .container {
         width: 100%;
diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.tsx b/frontend/src/component/user/DemoAuth/DemoAuth.tsx
index de29cfc970..602a17c744 100644
--- a/frontend/src/component/user/DemoAuth/DemoAuth.tsx
+++ b/frontend/src/component/user/DemoAuth/DemoAuth.tsx
@@ -49,7 +49,11 @@ const DemoAuth: VFC<IDemoAuthProps> = ({ authDetails, redirect }) => {
             <Logo className={styles.logo} aria-label='Unleash logo' />
             <div className={styles.container}>
                 <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}>
                     <TextField
                         value={email}
@@ -73,10 +77,10 @@ const DemoAuth: VFC<IDemoAuthProps> = ({ authDetails, redirect }) => {
                         className={styles.button}
                         data-testid={LOGIN_BUTTON}
                     >
-                        Sign in
+                        Test Unleash demo
                     </Button>
                 </div>
-                <p>
+                <p className={styles.terms}>
                     By accessing our demo instance, you agree to the
                     Unleash&nbsp;
                     <a