From 13464d173b669a288d912ebed08261d065507c69 Mon Sep 17 00:00:00 2001
From: alvaromaoc <alvaromaoc@gmail.com>
Date: Tue, 3 Jun 2025 19:24:41 +0200
Subject: [PATCH] First iteration cool UI (clear news and alerts hover)

---
 src/pages/webapp/Dashboard.tsx    | 24 +++++----
 src/pages/webapp/Profile.tsx      | 85 +++++++++++++++++--------------
 src/pages/webapp/WebAppLayout.tsx | 32 ++++++------
 3 files changed, 79 insertions(+), 62 deletions(-)

diff --git a/src/pages/webapp/Dashboard.tsx b/src/pages/webapp/Dashboard.tsx
index c3d21ef..9e7a14d 100644
--- a/src/pages/webapp/Dashboard.tsx
+++ b/src/pages/webapp/Dashboard.tsx
@@ -6,7 +6,7 @@ import {AssetsHttpService} from "@/services/assets-http-service.ts";
 import {Asset} from "@/model/Asset.ts";
 import {useNavigate} from 'react-router-dom';
 
-import {ExclamationTriangleIcon, NewspaperIcon, PencilIcon,} from "@heroicons/react/16/solid";
+import {ChevronRightIcon, ExclamationTriangleIcon, NewspaperIcon, PencilIcon,} from "@heroicons/react/16/solid";
 
 import {
     Drawer,
@@ -102,10 +102,13 @@ function Summary() {
     return (
         <div className={"flex flex-col gap-5"}>
             <Card onClick={() => navigate("/news")}
-                  className={"md:flex-1 bg-neutral-100 shadow-none hover:inset-ring-1 hover:inset-ring-neutral-200 border-none cursor-pointer"}>
+                  className={"group md:flex-1 shadow-none cursor-pointer"}>
                 <CardHeader>
-                    <div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
-                        <NewspaperIcon className={"size-6"}/>
+                    <div className="flex items-center pt-3 gap-2">
+                        <div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
+                            <NewspaperIcon className={"size-6"}/>
+                        </div>
+                        <ChevronRightIcon className={"size-6 inline-block opacity-0 translate-x-[-0.5rem] group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-in-out"} />
                     </div>
                     <CardTitle className={"pt-3"}>Market news</CardTitle>
                     <CardDescription>
@@ -115,10 +118,13 @@ function Summary() {
                 </CardHeader>
             </Card>
             <Card onClick={() => navigate("/alerts")}
-                  className={"md:flex-1 bg-neutral-100 shadow-none hover:inset-ring-1 hover:inset-ring-neutral-200 border-none cursor-pointer"}>
+                  className={"group md:flex-1 shadow-none cursor-pointer"}>
                 <CardHeader>
-                    <div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
-                        <ExclamationTriangleIcon className={"size-6"}/>
+                    <div className="flex items-center pt-3 gap-2">
+                        <div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
+                            <ExclamationTriangleIcon className={"size-6"}/>
+                        </div>
+                        <ChevronRightIcon className={"size-6 inline-block opacity-0 translate-x-[-0.5rem] group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-in-out"} />
                     </div>
                     <CardTitle className={"pt-3"}>Title</CardTitle>
                     <CardDescription>
@@ -150,7 +156,7 @@ const chartConfig = {
     },
 } satisfies ChartConfig
 
-function ChartLineDots({ chartData }: { chartData: ChartData[] }) {
+function ChartLineDots({chartData}: { chartData: ChartData[] }) {
     const calculatePerformance: <T, K extends keyof T = keyof T>(arr: T[], key: K extends keyof T ? (T[K] extends number ? K : never) : never) => number = (arr, key) => {
         const first = arr.length > 0 ? arr[0] : undefined;
         const last = arr.length > 0 ? arr[arr.length - 1] : undefined;
@@ -200,7 +206,7 @@ function ChartLineDots({ chartData }: { chartData: ChartData[] }) {
                             axisLine={false}
                             tickMargin={8}
                             domain={([dataMin, dataMax]) => {
-                                const margin = (dataMax - dataMin)/10;
+                                const margin = (dataMax - dataMin) / 10;
                                 return [Math.max(0, dataMin - margin), dataMax + margin]
                             }}
                             tickFormatter={(value) => {
diff --git a/src/pages/webapp/Profile.tsx b/src/pages/webapp/Profile.tsx
index 3bb6eb6..510a915 100644
--- a/src/pages/webapp/Profile.tsx
+++ b/src/pages/webapp/Profile.tsx
@@ -5,6 +5,7 @@ import {ToggleGroup, ToggleGroupItem} from "@/components/ui/toggle-group.tsx";
 import {Button} from "@/components/ui/button.tsx";
 import {Input} from "@/components/ui/input.tsx";
 import {Badge} from "@/components/ui/badge.tsx";
+import {Card, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
 
 const usersHttpService = new UsersHttpService();
 
@@ -20,45 +21,53 @@ export default function Profile() {
     return (
         <>
             <h1 className={"text-4xl font-bold"}>Profile</h1>
-            <div className={"flex flex-row gap-5"}>
-                <div className={"flex-1"}>
-                    <h2 className={"text-2xl font-medium py-6"}>Personal information</h2>
-                    <Input type="email" disabled={true} value={user.email}/>
-                    <div className={"flex flex-row gap-4 mt-4"}>
-                        <Input type="firstName" disabled={true} value={user.firstName}/>
-                        <Input type="lastName" disabled={true} value={user.lastName}/>
-                    </div>
-                </div>
-                <div className={"flex-1"}>
-                    <h2 className={"text-2xl font-medium py-6"}>Risk profile</h2>
-                    <ToggleGroup
-                        size="lg"
-                        type="single"
-                        variant="outline" value={user.riskLevel.toString()}
-                        onValueChange={newValue => {
-                            if (newValue) {
-                                setUser(user => ({...user, riskLevel: parseInt(newValue)} as User))
-                            }
-                        }}
-                    >
-                        {/* TODO: Fetch risk levels from back */}
-                        {[1, 2, 3, 4].map((riskLevelItem, index) => (
-                            <ToggleGroupItem
-                                key={index}
-                                value={riskLevelItem.toString()}
-                                aria-label={`Toggle risk level ${riskLevelItem}`}
+            <div className={"flex flex-row mt-5 gap-5"}>
+                <Card className={"shadow-none flex-1"}>
+                    <CardHeader>
+                        <CardTitle className={"pb-3"}>Personal information</CardTitle>
+                        <CardDescription>
+                            <Input type="email" disabled={true} value={user.email}/>
+                            <div className={"flex flex-row gap-4 mt-4"}>
+                                <Input type="firstName" disabled={true} value={user.firstName}/>
+                                <Input type="lastName" disabled={true} value={user.lastName}/>
+                            </div>
+                        </CardDescription>
+                    </CardHeader>
+                </Card>
+                <Card className={"shadow-none flex-1"}>
+                    <CardHeader>
+                        <CardTitle className={"pb-3"}>Risk profile</CardTitle>
+                        <CardDescription>
+                            <ToggleGroup
+                                size="lg"
+                                type="single"
+                                variant="outline" value={user.riskLevel.toString()}
+                                onValueChange={newValue => {
+                                    if (newValue) {
+                                        setUser(user => ({...user, riskLevel: parseInt(newValue)} as User))
+                                    }
+                                }}
                             >
-                                {riskLevelItem}
-                            </ToggleGroupItem>
-                        ))}
-                    </ToggleGroup>
-                    <Badge className={"mt-2"} variant="secondary">
-                        {user.riskLevel === 1 && "Conservative"}
-                        {user.riskLevel === 2 && "Moderate"}
-                        {user.riskLevel === 3 && "Aggressive"}
-                        {user.riskLevel === 4 && "Very aggressive"}
-                    </Badge>
-                </div>
+                                {/* TODO: Fetch risk levels from back */}
+                                {[1, 2, 3, 4].map((riskLevelItem, index) => (
+                                    <ToggleGroupItem
+                                        key={index}
+                                        value={riskLevelItem.toString()}
+                                        aria-label={`Toggle risk level ${riskLevelItem}`}
+                                    >
+                                        {riskLevelItem}
+                                    </ToggleGroupItem>
+                                ))}
+                            </ToggleGroup>
+                            <Badge className={"mt-2"} variant="secondary">
+                                {user.riskLevel === 1 && "Conservative"}
+                                {user.riskLevel === 2 && "Moderate"}
+                                {user.riskLevel === 3 && "Aggressive"}
+                                {user.riskLevel === 4 && "Very aggressive"}
+                            </Badge>
+                        </CardDescription>
+                    </CardHeader>
+                </Card>
             </div>
             <hr className={"my-5"}/>
             <Button className={"block cursor-pointer"}
diff --git a/src/pages/webapp/WebAppLayout.tsx b/src/pages/webapp/WebAppLayout.tsx
index 7c1f737..b20a04c 100644
--- a/src/pages/webapp/WebAppLayout.tsx
+++ b/src/pages/webapp/WebAppLayout.tsx
@@ -8,24 +8,26 @@ function WebAppLayout() {
     const location = useLocation();
 
     return (
-        <div className={"w-[80%] max-w-[1200px] min-w-[200px] mx-auto"}>
-            <div className={"flex justify-between flex-col gap-5 sm:flex-row sm:gap-0 my-6"}>
-                <Link className={"flex flex-row items-center gap-2 text-xl font-medium text-neutral-600"} to={"/dashboard"}>
-                    {location.pathname !== "/dashboard" && <ChevronLeftIcon className={"size-6"} />}
-                    AutoInvestor
-                </Link>
-                <div className={"flex flex-row gap-4"}>
-                    <Button className={"cursor-pointer"} onClick={() => navigate("/simulation")}>
-                        <PlayIcon className={"size-4"}></PlayIcon>
-                        <span className={"ms-2"}>Simulate</span>
-                    </Button>
-                    <Link className={"flex text-lg font-medium items-center"} to={"/profile"}>
-                        <UserIcon className={"size-4"}></UserIcon>
-                        <span className={"ms-2"}>Profile</span>
+        <div className={"w-full min-h-screen bg-neutral-100"}>
+            <div className={"w-[80%] max-w-[1200px] min-w-[200px] mx-auto"}>
+                <div className={"flex justify-between flex-col gap-5 sm:flex-row sm:gap-0 py-6"}>
+                    <Link className={"flex flex-row items-center gap-2 text-xl font-medium text-neutral-600"} to={location.pathname === "/dashboard" ? "/" : "/dashboard"}>
+                        {location.pathname !== "/dashboard" && <ChevronLeftIcon className={"size-6"} />}
+                        AutoInvestor
                     </Link>
+                    <div className={"flex flex-row gap-4"}>
+                        <Button className={"cursor-pointer"} onClick={() => navigate("/simulation")}>
+                            <PlayIcon className={"size-4"}></PlayIcon>
+                            <span className={"ms-2"}>Simulate</span>
+                        </Button>
+                        <Link className={"flex text-lg font-medium items-center"} to={"/profile"}>
+                            <UserIcon className={"size-4"}></UserIcon>
+                            <span className={"ms-2"}>Profile</span>
+                        </Link>
+                    </div>
                 </div>
+                <Outlet></Outlet>
             </div>
-            <Outlet></Outlet>
         </div>
     )
 }