From 552e7288ea72a91759a90046faa8db1fcc23ad2b Mon Sep 17 00:00:00 2001
From: alvaromaoc <alvaromaoc@gmail.com>
Date: Tue, 3 Jun 2025 11:25:58 +0200
Subject: [PATCH] First iteration cool UI (responsive)

---
 src/pages/Landing.tsx             |  6 +--
 src/pages/webapp/Alerts.tsx       |  2 +-
 src/pages/webapp/Dashboard.tsx    |  6 +--
 src/pages/webapp/News.tsx         | 63 +++++++++++++++----------------
 src/pages/webapp/WebAppLayout.tsx |  2 +-
 5 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 45496c7..ad44550 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -16,9 +16,9 @@ import {TrendingUp} from "lucide-react";
 
 function Landing() {
     return (
-        <div className={"w-screen h-screen bg-neutral-100"}>
+        <div className={"w-screen min-h-screen bg-neutral-100"}>
             <div
-                className={"w-[80%] max-w-[1200px] min-w-[200px] mx-auto h-screen flex flex-row items-center justify-center gap-5"}>
+                className={"w-[80%] max-w-[1200px] min-w-[200px] mx-auto min-h-screen flex flex-col py-24 lg:py-0 lg:flex-row lg:items-center lg:justify-center gap-5"}>
                 <div className={"flex-1"}>
                     <Jumbotron/>
                 </div>
@@ -66,7 +66,7 @@ function KeyFeatures() {
 
     return (
         <>
-            <div className={"grid grid-cols-2 gap-5"}>
+            <div className={"grid grid-cols-1 sm:grid-cols-2 gap-5"}>
                 {cards.map((card) => (
                     <Card className={"bg-white shadow-none"}>
                         <CardHeader>
diff --git a/src/pages/webapp/Alerts.tsx b/src/pages/webapp/Alerts.tsx
index 21e409b..3daf478 100644
--- a/src/pages/webapp/Alerts.tsx
+++ b/src/pages/webapp/Alerts.tsx
@@ -50,7 +50,7 @@ function RecentAlerts() {
                 const asset = getAsset(alert.assetId);
                 return (
                     <Card className={"shadow-none"}>
-                        <div className={"flex flex-row gap-4 items-center px-5"}>
+                        <div className={"flex flex-row gap-4 items-center px-5 flex-wrap"}>
                             <div className={`rounded-xl ${
                                 alert.type === "BUY"
                                     ? "text-green-700 border-green-700/20"
diff --git a/src/pages/webapp/Dashboard.tsx b/src/pages/webapp/Dashboard.tsx
index 3589fa9..edaadc8 100644
--- a/src/pages/webapp/Dashboard.tsx
+++ b/src/pages/webapp/Dashboard.tsx
@@ -52,11 +52,11 @@ const decisionHttpService = new DecisionHttpService();
 
 function Dashboard() {
     return (
-        <div className={"flex flex-row gap-5"}>
-            <div className={"flex-2"}>
+        <div className={"flex flex-col lg:flex-row gap-5"}>
+            <div className={"lg:flex-2"}>
                 <Portfolio/>
             </div>
-            <div className={"flex-1"}>
+            <div className={"lg:flex-1"}>
                 <Summary/>
             </div>
         </div>
diff --git a/src/pages/webapp/News.tsx b/src/pages/webapp/News.tsx
index 6a44d91..cf65708 100644
--- a/src/pages/webapp/News.tsx
+++ b/src/pages/webapp/News.tsx
@@ -1,5 +1,5 @@
 import {useEffect, useState} from "react";
-import {ArrowTopRightOnSquareIcon, NewspaperIcon} from "@heroicons/react/16/solid";
+import {NewspaperIcon} from "@heroicons/react/16/solid";
 import {NewsHttpService} from "@/services/news-http-service.ts";
 import {NewsItem} from "@/model/NewsItem.ts";
 import {AssetsHttpService} from "@/services/assets-http-service.ts";
@@ -63,38 +63,37 @@ function RecentNews() {
                 const assets = newsItems.map(item => getAsset(item.assetId));
                 const uniqueAssets = Array.from(new Map(assets.map(item => [item.assetId, item])).values());
                 return (
-                    <Card className={"shadow-none"}>
-                        <div className={"flex flex-row gap-4 items-center px-5"}>
-                            <div className={"rounded-xl bg-neutral-100 w-fit box-border p-3 border"}>
-                                <NewspaperIcon className={"size-6"}/>
+                    <a href={url} target={"_blank"}>
+                        <Card className={"shadow-none hover:bg-neutral-50"}>
+                            <div className={"flex flex-row gap-4 items-center px-5 flex-wrap"}>
+                                <div className={"rounded-xl bg-neutral-100 w-fit box-border p-3 border"}>
+                                    <NewspaperIcon className={"size-6"}/>
+                                </div>
+                                <div className={"flex-1"}>
+                                    <p>
+                                        {uniqueAssets.map(asset => (
+                                            <Badge variant="outline" className={"mr-1"} key={asset.assetId}>
+                                                <span className={'text-neutral-400'}>{asset.mic}</span>
+                                                <span className="ps-0.5 font-medium">{asset.ticker}</span>
+                                            </Badge>
+                                        ))}
+                                    </p>
+                                    <p className={"font-light-500 pt-1"}>{newsItems[0].title}</p>
+                                </div>
+                                <div className={"text-neutral-500"}>
+                                    <small>{newsItems[0].date.toLocaleString('en-US', {
+                                        year: 'numeric',
+                                        month: 'long',
+                                        day: 'numeric',
+                                        hour: 'numeric',
+                                        minute: '2-digit',
+                                        second: '2-digit',
+                                        hour12: true,
+                                    })}</small>
+                                </div>
                             </div>
-                            <div className={"flex-1"}>
-                                <p>
-                                    {uniqueAssets.map(asset => (
-                                        <Badge variant="outline" className={"mr-1"} key={asset.assetId}>
-                                            <span className={'text-neutral-400'}>{asset.mic}</span>
-                                            <span className="ps-0.5 font-medium">{asset.ticker}</span>
-                                        </Badge>
-                                    ))}
-                                </p>
-                                <p className={"font-light-500 pt-1"}>{newsItems[0].title}</p>
-                            </div>
-                            <div className={"text-neutral-500"}>
-                                <small>{newsItems[0].date.toLocaleString('en-US', {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    day: 'numeric',
-                                    hour: 'numeric',
-                                    minute: '2-digit',
-                                    second: '2-digit',
-                                    hour12: true,
-                                })}</small>
-                            </div>
-                            <div>
-                                <a href={url} target={"_blank"}><ArrowTopRightOnSquareIcon className={"size-6"}/></a>
-                            </div>
-                        </div>
-                    </Card>
+                        </Card>
+                    </a>
                 )
             })}
         </div>
diff --git a/src/pages/webapp/WebAppLayout.tsx b/src/pages/webapp/WebAppLayout.tsx
index bba27b9..7c1f737 100644
--- a/src/pages/webapp/WebAppLayout.tsx
+++ b/src/pages/webapp/WebAppLayout.tsx
@@ -9,7 +9,7 @@ function WebAppLayout() {
 
     return (
         <div className={"w-[80%] max-w-[1200px] min-w-[200px] mx-auto"}>
-            <div className={"flex justify-between flex-row my-6"}>
+            <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