From 0d798c1d6a0d6f17c21be8bc6ab41939591fe594 Mon Sep 17 00:00:00 2001
From: alvaromaoc <alvaromaoc@gmail.com>
Date: Mon, 2 Jun 2025 12:09:46 +0200
Subject: [PATCH] First iteration cool UI (colors)

---
 src/pages/webapp/Alerts.tsx | 76 +++++++++++++++++++++----------------
 src/pages/webapp/News.tsx   | 62 ++++++++++++++++--------------
 2 files changed, 76 insertions(+), 62 deletions(-)

diff --git a/src/pages/webapp/Alerts.tsx b/src/pages/webapp/Alerts.tsx
index 802d8ce..21e409b 100644
--- a/src/pages/webapp/Alerts.tsx
+++ b/src/pages/webapp/Alerts.tsx
@@ -5,6 +5,7 @@ import {AlertsHttpService} from "@/services/alerts-http-service.ts";
 import {AssetsHttpService} from "@/services/assets-http-service.ts";
 import {Asset} from "@/model/Asset.ts";
 import {Badge} from "@/components/ui/badge.tsx";
+import {Card} from "@/components/ui/card.tsx";
 
 const alertsHttpService = new AlertsHttpService();
 const assetsHttpService = new AssetsHttpService();
@@ -31,6 +32,7 @@ function RecentAlerts() {
             setAssets(assets);
             setAlerts(alerts);
         }
+
         fetchData().then();
     }, [])
 
@@ -47,43 +49,51 @@ function RecentAlerts() {
             {alerts.map((alert) => {
                 const asset = getAsset(alert.assetId);
                 return (
-                    <div className={"flex flex-row gap-4 items-center"}>
-                        <div className={"rounded-xl bg-neutral-100 w-fit box-border p-3"}>
-                            {alert.type === "BUY"
-                                ? <ArrowTrendingUpIcon className={"size-6"}/>
-                                : (alert.type === "SELL"
-                                    ? <ArrowTrendingDownIcon className={"size-6"}/>
-                                    : <EqualsIcon className={"size-6"}/>)
-                            }
-                        </div>
-                        <div className={"flex-1"}>
-                            <p>
-                                <Badge variant="outline">
-                                    <span className={'text-neutral-400'}>{asset.mic}</span>
-                                    <span className="ps-0.5 font-medium">{asset.ticker}</span>
-                                </Badge>
-                            </p>
-                            <p className={"font-light text-neutral-500 pt-1"}>
+                    <Card className={"shadow-none"}>
+                        <div className={"flex flex-row gap-4 items-center px-5"}>
+                            <div className={`rounded-xl ${
+                                alert.type === "BUY"
+                                    ? "text-green-700 border-green-700/20"
+                                    : (alert.type === "SELL"
+                                        ? "text-red-700 border-red-700/20"
+                                        : "text-black")
+                            } bg-neutral-100 w-fit box-border p-3 border`}>
                                 {alert.type === "BUY"
-                                    ? "Technical indicators sugests buying opportunity"
+                                    ? <ArrowTrendingUpIcon className={"size-6"}/>
                                     : (alert.type === "SELL"
-                                        ? "Technical indicators sugests selling opportunity"
-                                        : "Technical indicators sugests no change")
+                                        ? <ArrowTrendingDownIcon className={"size-6"}/>
+                                        : <EqualsIcon className={"size-6"}/>)
                                 }
-                            </p>
-                        </div>
-                        <div className={"text-neutral-500"}>
-                            <small>{alert.date.toLocaleString('en-US', {
-                                year: 'numeric',
-                                month: 'long',
-                                day: 'numeric',
-                                hour: 'numeric',
-                                minute: '2-digit',
-                                second: '2-digit',
-                                hour12: true,
-                            })}</small>
+                            </div>
+                            <div className={"flex-1"}>
+                                <p>
+                                    <Badge variant="outline">
+                                        <span className={'text-neutral-400'}>{asset.mic}</span>
+                                        <span className="ps-0.5 font-medium">{asset.ticker}</span>
+                                    </Badge>
+                                </p>
+                                <p className={"font-light text-neutral-500 pt-1"}>
+                                    {alert.type === "BUY"
+                                        ? "Technical indicators sugests buying opportunity"
+                                        : (alert.type === "SELL"
+                                            ? "Technical indicators sugests selling opportunity"
+                                            : "Technical indicators sugests no change")
+                                    }
+                                </p>
+                            </div>
+                            <div className={"text-neutral-500"}>
+                                <small>{alert.date.toLocaleString('en-US', {
+                                    year: 'numeric',
+                                    month: 'long',
+                                    day: 'numeric',
+                                    hour: 'numeric',
+                                    minute: '2-digit',
+                                    second: '2-digit',
+                                    hour12: true,
+                                })}</small>
+                            </div>
                         </div>
-                    </div>
+                    </Card>
                 )
             })}
         </div>
diff --git a/src/pages/webapp/News.tsx b/src/pages/webapp/News.tsx
index 94c2381..6a44d91 100644
--- a/src/pages/webapp/News.tsx
+++ b/src/pages/webapp/News.tsx
@@ -5,6 +5,7 @@ import {NewsItem} from "@/model/NewsItem.ts";
 import {AssetsHttpService} from "@/services/assets-http-service.ts";
 import {Asset} from "@/model/Asset.ts";
 import {Badge} from "@/components/ui/badge.tsx";
+import {Card} from "@/components/ui/card.tsx";
 
 const newsHttpService = new NewsHttpService();
 const assetsHttpService = new AssetsHttpService();
@@ -44,6 +45,7 @@ function RecentNews() {
             setAssets(assets);
             setNewsItems(newsItemsGrouped);
         }
+
         fetchData().then();
     }, [])
 
@@ -61,36 +63,38 @@ function RecentNews() {
                 const assets = newsItems.map(item => getAsset(item.assetId));
                 const uniqueAssets = Array.from(new Map(assets.map(item => [item.assetId, item])).values());
                 return (
-                    <div className={"flex flex-row gap-4 items-center"}>
-                        <div className={"rounded-xl bg-neutral-100 w-fit box-border p-3"}>
-                            <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>
-                            <a href={url} target={"_blank"}><ArrowTopRightOnSquareIcon className={"size-6"}/></a>
+                    <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"}/>
+                            </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>
-                    </div>
+                    </Card>
                 )
             })}
         </div>