From e8b84833cafef3c53c49f8d8f39a6a312d8655f6 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Tue, 2 Jul 2024 12:42:11 +0200
Subject: [PATCH] feat: style update
---
.../CardToolTipVis/cardtooltipvis.stories.tsx | 2 +-
.../lib/components/CardToolTipVis/index.tsx | 16 ++++++++--------
2 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx b/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx
index 2d122715a..c52d50edc 100644
--- a/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx
+++ b/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx
@@ -72,7 +72,7 @@ export const PopUpVis: Story = {
name: 'Charlotte Henry',
born: {},
imdbRank: 21213,
- imdbVotes: 1213,
+ imdbVotesddddddddddddddddddddd: 1213,
poster: 'https://image.tmdb.org/t/p/w440_and_h660_face/kTKiREs37qd8GUlNI4Koiupwy6W.jpg',
tmdbId: '94105',
country: undefined,
diff --git a/libs/shared/lib/components/CardToolTipVis/index.tsx b/libs/shared/lib/components/CardToolTipVis/index.tsx
index cea780831..fc13c8c63 100644
--- a/libs/shared/lib/components/CardToolTipVis/index.tsx
+++ b/libs/shared/lib/components/CardToolTipVis/index.tsx
@@ -27,13 +27,13 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
}) => {
const itemsToShow = Object.entries(data).slice(0, maxVisibleItems);
return (
- <div className="border-2 border-sec-200 bg-white ">
- <div className="flex m-0 items-center border-b-2 border-sec-200">
- <div className="h-9 w-4" style={{ backgroundColor: colorHeader }}></div>
- <span className="text-xl ml-2">{name}</span>
+ <div className="border-1 border-sec-200 bg-white w-[17rem] shadow-md">
+ <div className="flex m-0 items-center border-b border-sec-200">
+ <div className="h-9 w-2" style={{ backgroundColor: colorHeader }}></div>
+ <span className="text-xl ml-2 font-semibold">{name}</span>
</div>
{type === 'schema' && typeOfSchema === 'relationship' && (
- <div className="px-4 py-1 border-b-2 border-sec-200">
+ <div className="px-4 py-1 border-b border-sec-200">
<div className="flex flex-row gap-3 items-center justify-between">
<span className="font-semibold">From</span>
<span className="ml-auto text-right">{connectedFrom}</span>
@@ -52,11 +52,11 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
Object.entries(data).map(([k, v]) => (
<Tooltip key={k}>
<div className="flex flex-row gap-3 items-center">
- <span className="font-semibold">{k}</span>
+ <span className="font-semibold truncate w-[40%]">{k}</span>
<TooltipTrigger asChild>
- <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
+ <span className="ml-auto text-right truncate w-[60%] min-h-[24px]">
{type === 'schema' ? (
- <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} color="hsl(var(--clr-sec--400))" />
+ <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} color="hsl(var(--clr-sec--400))" size={24} />
) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
<span>{v.toString()}</span>
) : (
--
GitLab