feat(login): login page styles update (#299)

## Description

This PR implements the styles like it is in the designs. There is a
connect wallet button now which will trigger the Leo Wallet
 
## Related Issues

closes #298 

## Changes Made

- [FE] Login page changes 
- [FE] Moved the links constant to separate file

src/assets/text/about.ts

@@ -10,9 +10,3 @@ export const about = {
     `Happy hunting, recruit.`,
   ],
 };
-export const wordsToLinkAbout: Record<string, string> = {
-  "Kryha Labs": "https://kryha.io",
-  Aleo: "https://aleo.org",
-  zPass: "https://zpass.aleo.org/",
-  Obscura: "htpps://https://obscura.build/",
-};

src/assets/text/auth.ts

@@ -8,4 +8,6 @@ export const auth = {
   weUseYourWallet: "We use your Leo Wallet to verify you are a human.",
   weTransferToYourWallet:
     "We also use it to transfer your won Aleo credits to.",
+  connectWallet: "Connecting wallet",
+  loginDescription: "We use Leo Wallet to verify you are a human.",
 };

src/assets/text/index.ts

@@ -1,11 +1,12 @@
-import { about, wordsToLinkAbout } from "./about.js";
+import { about } from "./about.js";
 import { achievements } from "./achievements.js";
 import { auth } from "./auth.js";
 import { chat } from "./chat.js";
 import { general } from "./general.js";
 import { homepage } from "./homepage.js";
 import { howToPlay } from "./how-to-play.js";
 import { leaderboard } from "./leaderboard.js";
+import { wordsToLink } from "./links.js";
 import { lobby } from "./lobby.js";
 import { matchPrompts } from "./match-prompts.js";
 import { match } from "./match.js";
@@ -19,7 +20,7 @@ export const text = {
   about,
   general,
   navigation,
-  wordsToLinkAbout,
+  wordsToLink,
   lobby,
   termsAndConditions,
   match,

src/assets/text/links.ts

@@ -0,0 +1,7 @@
+export const wordsToLink: Record<string, string> = {
+  "Kryha Labs": "https://kryha.io",
+  Aleo: "https://aleo.org",
+  zPass: "https://zpass.aleo.org/",
+  Obscura: "htpps://https://obscura.build/",
+  "Leo Wallet": "https://www.leo.app/",
+};

src/components/authentication/login-loading.tsx

@@ -1,29 +1,31 @@
 import { Stack, Typography } from "@mui/material";
 import Image from "next/image";
-
-import { text } from "~/assets/text/index.js";
 import { default as spinner } from "~/assets/images/spinner.gif";
-
+import { text } from "~/assets/text/index.js";
+import { PageLayout } from "~/containers/page-layout/index.js";
+import { processTextToLink } from "~/utils/links.jsx";
 import { styles } from "./styles.js";
 
 const SPINNER_SIZE = 34;
+export const LoginLoading = () => {
+  return (
+    <PageLayout title={text.auth.connectWallet}>
+      <Stack alignItems="center" gap={4}>
+        <Stack alignItems="center" gap={2}>
+          <Typography variant="body1">
+            {processTextToLink(text.auth.loginDescription, text.wordsToLink)}
+          </Typography>
+        </Stack>
 
-// TODO: update styles
-export const LoginLoading = () => (
-  <Stack sx={styles.wrapper}>
-    <Stack sx={styles.container}>
-      <Stack sx={styles.progress}>
-        <Image
-          src={spinner}
-          alt="spinner"
-          width={SPINNER_SIZE}
-          height={SPINNER_SIZE}
-        />
-      </Stack>
-      <Stack sx={styles.text}>
-        <Typography variant="h5">{text.auth.weUseYourWallet}</Typography>
-        <Typography variant="h5">{text.auth.weTransferToYourWallet}</Typography>
+        <Stack sx={styles.progress}>
+          <Image
+            src={spinner}
+            alt="spinner"
+            width={SPINNER_SIZE}
+            height={SPINNER_SIZE}
+          />
+        </Stack>
       </Stack>
-    </Stack>
-  </Stack>
-);
+    </PageLayout>
+  );
+};

src/pages/about.tsx

@@ -14,7 +14,7 @@ const About = () => (
         pt={key === 0 ? 0 : 5}
         sx={styles.body}
       >
-        {processTextToLink(content, text.wordsToLinkAbout)}
+        {processTextToLink(content, text.wordsToLink)}
       </Typography>
     ))}
     <Stack pt="100px" />

src/pages/terms-and-conditions.tsx

@@ -14,7 +14,7 @@ const TermsAndConditions = () => (
         pt={key === 0 ? 0 : 5}
         sx={styles.body}
       >
-        {processTextToLink(content, text.wordsToLinkAbout)}
+        {processTextToLink(content, text.wordsToLink)}
       </Typography>
     ))}
     <Stack pt="100px" />