Merge pull request #58 from MindVault-Inc/feat/impl-test-results-page

feat: add tests page and fix to nav bar
MindVault-Inc · Jan 16, 2025 · e52c618 · e52c618
2 parents 0cdfbd9 + a47a44a
commit e52c618
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 12 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -4,8 +4,6 @@ import dynamic from "next/dynamic";
 import MiniKitProvider from "@/providers/MiniKitProvider";
 import NextAuthProvider from "@/providers/next-auth-provider";
 import MobileBottomNav from "@/components/BottomNav";
-import { getServerSession } from "next-auth";
-import { headers } from 'next/headers';
 import "./globals.css";
 
 const spaceGrotesk = Space_Grotesk({
@@ -31,11 +29,6 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const session = await getServerSession();
-  const headersList = headers();
-  const pathname = headersList.get("x-pathname") || "";
-  const isSignInPage = pathname === "/sign-in";
-
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -45,10 +38,10 @@ export default async function RootLayout({
         <NextAuthProvider>
           <ErudaProvider>
             <MiniKitProvider>
-              <main className={`min-h-screen w-full ${session && !isSignInPage ? 'pb-16' : ''}`}>
+              <main className="min-h-screen w-full pb-16">
                 {children}
               </main>
-              {session && !isSignInPage && <MobileBottomNav />}
+              <MobileBottomNav />
             </MiniKitProvider>
           </ErudaProvider>
         </NextAuthProvider>

diff --git a/frontend/src/app/results/page.tsx b/frontend/src/app/results/page.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { ActionCard } from "@/components/ui/ActionCard"
+import { ArrowUpRight } from "lucide-react"
+
+export default function ResultsPage() {
+  const testResults = [
+    {
+      title: "Ideology Test",
+      backgroundColor: "#42888D",
+      iconBgColor: "#2C5154",
+      Icon: ArrowUpRight,
+      isEnabled: true
+    },
+    {
+      title: "Personality Test",
+      backgroundColor: "#E36C59",
+      iconBgColor: "#2C5154",
+      Icon: ArrowUpRight,
+      isEnabled: false
+    },
+    {
+      title: "Emotional Int Test",
+      backgroundColor: "#778BAD",
+      iconBgColor: "#2C5154",
+      Icon: ArrowUpRight,
+      isEnabled: false
+    },
+    {
+      title: "Values Test",
+      backgroundColor: "#DA9540",
+      iconBgColor: "#2C5154",
+      Icon: ArrowUpRight,
+      isEnabled: false
+    },
+    {
+      title: " ",
+      backgroundColor: "#D9D9D9",
+      iconBgColor: "#2C5154",
+      Icon: ArrowUpRight,
+      isEnabled: false
+    },
+    {
+      title: " ",
+      backgroundColor: "#D9D9D9",
+      iconBgColor: "#2C5154",
+      Icon: ArrowUpRight,
+      isEnabled: false
+    }
+  ]
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      <div className="w-full bg-brand-tertiary rounded-b-[50px] shadow-lg pb-8 sm:pb-14 mb-6 sm:mb-8">
+        <div className="w-full max-w-2xl mx-auto px-4 pt-16 sm:pt-20">
+          <h1 className="text-center text-white text-3xl sm:text-4xl md:text-5xl font-bold font-spaceGrotesk leading-tight sm:leading-[50px] mb-3 sm:mb-4">
+            Tests Results
+          </h1>
+          <p className="text-center text-[#C9CDCE] text-lg font-normal font-spaceGrotesk leading-[25px]">
+            Insights based on <span className="font-bold">your results</span>
+          </p>
+        </div>
+      </div>
+
+      <div className="w-full max-w-7xl mx-auto px-4 pb-20">
+        <div className="grid grid-cols-2 gap-6 justify-items-center max-w-[400px] mx-auto">
+          {testResults.map((test, index) => (
+            <ActionCard
+              key={index}
+              title={test.isEnabled ? test.title : `${test.title} (Coming Soon)`}
+              backgroundColor={test.backgroundColor}
+              iconBgColor={test.iconBgColor}
+              Icon={test.Icon}
+              className={`transform transition-all duration-300 hover:scale-105 hover:-translate-y-1 ${
+                !test.isEnabled && "opacity-30 cursor-not-allowed"
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+} 
diff --git a/frontend/src/components/ui/AchievementButton.tsx b/frontend/src/components/ui/AchievementButton.tsx
@@ -4,7 +4,7 @@ export function AchievementButton({ hasNewAchievement = true }) {
   return (
     <button
       className={cn(
-        "w-[320px] h-[50px] relative bg-brand-secondary rounded-[20px]",
+        "w-[320px] h-[50px] relative bg-brand-secondary hover:bg-brand-secondary/90 rounded-[20px]",
         "sm:w-[365px]",
         "shadow-[0px_4px_4px_rgba(0,0,0,0.25)]",
         "flex items-center justify-center",
@@ -16,7 +16,7 @@ export function AchievementButton({ hasNewAchievement = true }) {
           <div className="w-3 h-3 rounded-full bg-accent-red" />
         )}
       </div>
-      <span className="text-neutral-black text-base sm:text-lg font-medium font-spaceGrotesk">
+      <span className="text-white text-base sm:text-lg font-medium font-spaceGrotesk">
         Latest Achievement
       </span>
     </button>

diff --git a/frontend/src/components/ui/styles/buttonStyles.ts b/frontend/src/components/ui/styles/buttonStyles.ts
@@ -6,7 +6,7 @@ export const buttonSizes = {
 
 export const buttonVariants = {
   default: 'bg-accent-red hover:bg-accent-redSoft',
-  success: 'bg-brand-primary hover:bg-brand-secondary',
+  secondary: 'bg-brand-secondary hover:bg-brand-secondary/90',
   warning: 'bg-accent-orange hover:bg-accent-orange/90'
 } as const