Feature/ik/UI improvements (#146)

* add styles for logo, x and car * add logo image to main page * add logo to main title * fix padding on game page
t0lia · May 12, 2024 · cf39b64 · cf39b64
1 parent 056e7ef
commit cf39b64
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 10 deletions.
diff --git a/frontend/src/app/components/logo/logo.tsx b/frontend/src/app/components/logo/logo.tsx
@@ -1,14 +1,23 @@
 import { ReactNode } from "react";
 import Link from "next/link";
+import Image from "next/image";
+import logo from "../../public/assets/logo.webp";
 
 export default function Logo(): ReactNode {
   return (
     <Link href="/">
-      <div className="ml-8 text-[36px] font-semibold group relative">
-        <div className="absolute -z-10 w-40 h-10 top-9 -left-4 bg-gradient-to-br from-pink-400 via-pink-500 to-purple-800 rounded-full p-4 filter blur-sm rotate-[-1.5deg]"></div>
-        <div className="absolute -z-10 font-semibold text-secondary text-sm top-11 left-2 rotate-[-1.5deg]">
+      <div className="flex ml-8 text-[36px] font-semibold group relative">
+        <div className="absolute -z-10 w-40 h-10 top-9 left-10 bg-gradient-to-br from-pink-400 via-pink-500 to-purple-800 rounded-full p-4 filter blur-sm rotate-[-1.5deg]"></div>
+        <div className="absolute -z-10 font-semibold text-secondary text-sm top-11 left-16 rotate-[-2.4deg]">
           We're on Testnet
         </div>
+        <Image
+          className="scale-[0.8]"
+          width={50}
+          height={50}
+          alt="retypeme logo"
+          src={logo}
+        />
         Retype<span className="group-hover:text-primary">Me</span>
       </div>
     </Link>

diff --git a/frontend/src/app/game/[id]/page.tsx b/frontend/src/app/game/[id]/page.tsx
@@ -376,7 +376,7 @@ const GamePage = () => {
         isGameEnded={isGameEnded}
         isButtonDisabled={isButtonDisabled}
       />
-      <main className="flex flex-col items-center min-[h-screen-h-16] py-2">
+      <main className="flex flex-col items-center min-[h-screen-h-16] pt-6 pb-2">
         <ProgressBar
           ingameUserId={ingameUserId}
           sessionStat={sessionStat}
@@ -386,7 +386,6 @@ const GamePage = () => {
         <StartDepositButton
           txSuccessful={txSuccessful}
           sessionStat={sessionStat}
-          // handleUserDeposit={handleUserDeposit}
           isButtonDisabled={isButtonDisabled}
           handleStartGame={handleStartGame}
           startBtnText={startBtnText}

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -27,17 +27,17 @@ export default function RootLayout({
       className={`${inter.className} h-screen`}
       suppressHydrationWarning
     >
-      <body className="flex flex-col h-full">
+      <body className="flex flex-col h-full overflow-hidden">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
           <div className="max-w-[1440px] self-center w-full flex flex-col h-screen">
-              <Web3Provider walletConnectProjectId={walletConnectProjectId}>
-                {children}
-              </Web3Provider>
+            <Web3Provider walletConnectProjectId={walletConnectProjectId}>
+              {children}
+            </Web3Provider>
           </div>
         </ThemeProvider>
       </body>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -18,6 +18,8 @@ import { Button } from "./components/ui/button";
 import ModeToggle from "./components/ui/toggle-theme-changer";
 import { useConfigStore } from "@/app/store/configStore";
 import Logo from "./components/logo/logo";
+import Image from "next/image";
+import keyboard from "./public/assets/keyboard.webp";
 
 export default function Home() {
   const [streamingText, setStreamingText] = useState("");
@@ -132,7 +134,7 @@ export default function Home() {
           </div>
         </div>
       </header>
-      <main className="h-screen flex flex-col">
+      <main className="h-screen flex flex-col relative">
         <div className="flex flex-col flex-1 justify-center items-center gap-20">
           <Button
             className="transform active:translate-y-0.5"
@@ -142,6 +144,13 @@ export default function Home() {
           </Button>
           <div className="self-start pl-40 h-8">{streamingText}</div>
         </div>
+        <Image
+          width={888}
+          height={600}
+          alt="keyboard"
+          src={keyboard}
+          className="absolute -bottom-48 -right-48 -z-10 "
+        />
       </main>
       <Footer />
     </div>

diff --git a/frontend/src/app/public/assets/keyboard.webp b/frontend/src/app/public/assets/keyboard.webp
diff --git a/frontend/src/app/public/assets/logo.webp b/frontend/src/app/public/assets/logo.webp