UI Fixes: Update Demo

Web3Auth · Mar 1, 2024 · 4983438 · 4983438
1 parent 67256b4
commit 4983438
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 55 deletions.
diff --git a/demo/auth0-redirect-flow-example/package-lock.json b/demo/auth0-redirect-flow-example/package-lock.json
diff --git a/demo/auth0-redirect-flow-example/src/App.tsx b/demo/auth0-redirect-flow-example/src/App.tsx
@@ -508,7 +508,7 @@ function App() {
   return (
     <div className="container">
       <h1 className="title">
-        <a target="_blank" href="https://web3auth.io/docs/guides/mpc" rel="noreferrer">
+        <a target="_blank" href="https://web3auth.io/docs/sdk/core-kit/mpc-core-kit" rel="noreferrer">
           Web3Auth MPC Core Kit 
         </a> {" "}
         Auth0 Redirect Flow Example
@@ -520,9 +520,10 @@ function App() {
       </div>
 
       <footer className="footer">
-        <a href="https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/tkey/tkey-mpc-beta-react-popup-example" target="_blank" rel="noopener noreferrer">
+        <a href="https://github.com/Web3Auth/mpc-core-kit/tree/master/demo/auth0-redirect-flow-example" target="_blank" rel="noopener noreferrer">
           Source code
         </a>
+        <a href="https://web3auth.io/community/c/help-core-kit/mpc-core-kit/33" target="_blank" rel="noopener noreferrer">Facing issue? Search/Post your issue on Community Forum!</a>
       </footer>
     </div>
   );

diff --git a/demo/redirect-flow-example/package-lock.json b/demo/redirect-flow-example/package-lock.json
diff --git a/demo/redirect-flow-example/src/App.css b/demo/redirect-flow-example/src/App.css
@@ -19,20 +19,92 @@
 	font-size: 3rem;
 	text-align: center;
 	margin: 50px;
+	margin-bottom: 0;
 }
 
 .subtitle {
 	line-height: 1.15;
-	font-size: 1.5rem;
+	font-size: 2.5rem;
 	text-align: center;
-	margin: 10px;
+	margin: 20px;
 }
 
 .title a {
-	color: #0070f3;
 	text-decoration: none;
 }
 
+.title .first{
+	color: #0364ff;
+}
+
+.title .second{
+	color: #bb65ff;
+}
+
+.input {
+	width: 50%;
+	padding: 8px 12px;
+	font-size: 16px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	outline: none;
+}
+
+.input:focus {
+	border-color: #0364ff;
+}
+
+.input:valid {
+	border-color: #0364ff; /* Green border for valid input */
+}
+
+.input:invalid {
+	border-color: #dc3545; /* Red border for invalid input */
+}
+
+.input-wrapper {
+	display: flex;
+	align-items: center;
+}
+
+.inputMock {
+	flex: 1;
+	padding: 8px 12px;
+	font-size: 16px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	outline: none;
+	min-width: 300px;
+}
+
+.mockLoginBtn {
+	padding: 8px 12px;
+	font-size: 16px;
+	border: 1px solid #0364ff;
+	border-radius: 4px;
+	background-color: #ffffff;
+	color: #0364ff;
+	cursor: pointer;
+	margin-left: 10px;
+}
+
+.mockLoginBtn:hover {
+	background-color: #0364ff;
+	color: #ffffff;
+}
+
+.deleteSecurityQuestion{
+	border-color: #dc3545 !important;
+	color: #dc3545 !important;
+}
+
+.deleteSecurityQuestion:hover{
+	background-color: #dd4554 !important;
+	color: #ffffff !important;
+	border-color: #dc3545 !important;
+}
+
+
 .grid {
 	display: flex;
 	align-items: center;
@@ -56,7 +128,8 @@
 .card:focus,
 .card:active {
 	cursor: pointer;
-	background-color: #f1f1f1;
+	background-color: #0070f3;
+	color: #ffffff;
 }
 
 .footer {