Skip to content

First iteration cool UI (clear news and alerts hover) #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alvaromanoso merged 1 commit into from
Jun 3, 2025
Merged

First iteration cool UI (clear news and alerts hover) #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 15 additions & 9 deletions src/pages/webapp/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand Down
85 changes: 47 additions & 38 deletions src/pages/webapp/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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"}
Expand Down
32 changes: 17 additions & 15 deletions src/pages/webapp/WebAppLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
Loading