Add risk charts

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/Button/Button.tsx

@@ -37,8 +37,8 @@ const button = tv({
 
 type Props = PropsWithChildren<
     {
-        icon?: FC<{ size: number }>;
-        iconAfter?: FC<{ size: number }>;
+        icon?: FC<{ size: number; className?: string }>;
+        iconAfter?: FC<{ size: number; className?: string }>;
         disabled?: boolean;
         onClick?: () => void;
         variant?:
@@ -71,9 +71,11 @@ export const Button = (props: Props) => {
             onClick={onClick}
             className={button({ ...props, empty: !children })}
         >
-            {IconComponent && <IconComponent size={16} />}
+            {IconComponent && <IconComponent size={16} className="flex-none" />}
             {children}
-            {IconAfterComponent && <IconAfterComponent size={16} />}
+            {IconAfterComponent && (
+                <IconAfterComponent size={16} className="flex-none" />
+            )}
         </Component>
     );
 };

packages/ui/src/Atoms/Dropdown/Dropdown.tsx

@@ -31,8 +31,12 @@ export function Dropdown({ children, toggle, className }: Props) {
     );
 }
 
-export function DropdownSeparator() {
-    return <DropdownMenu.Separator className="h-[1px] bg-border-low my-2" />;
+export function DropdownSeparator({ className }: { className?: string }) {
+    return (
+        <DropdownMenu.Separator
+            className={clsx("h-[1px] bg-border-low my-2", className)}
+        />
+    );
 }
 
 type DropdownItemProps = PropsWithChildren<{
@@ -86,7 +90,9 @@ export function DropdownItem({
                 children
             ) : (
                 <>
-                    {IconComponent && <IconComponent size={16} />}
+                    {IconComponent && (
+                        <IconComponent size={16} className="flex-none" />
+                    )}
                     {children}
                 </>
             )}

packages/ui/src/Atoms/Table/Table.tsx

@@ -13,7 +13,7 @@ export function Table({ children }: PropsWithChildren) {
 
 export function Thead({ children }: PropsWithChildren) {
     return (
-        <thead className="text-xs text-txt-tertiary font-semibold">
+        <thead className="text-xs text-txt-tertiary font-semibold border-border-low border-b">
             {children}
         </thead>
     );
@@ -30,7 +30,7 @@ export function Tr({ children, to }: PropsWithChildren<{ to?: string }>) {
         <TrContext value={{ to }}>
             <tr
                 className={clsx(
-                    "border-border-low border",
+                    "border-border-low border-y first:border-none last:border-none",
                     to && "hover:bg-subtle",
                 )}
             >
@@ -54,7 +54,7 @@ export function Td({
 }: PropsWithChildren<{ noLink?: boolean }>) {
     const { to } = useContext(TrContext);
     if (!to || noLink) {
-        return <td className="first:pl-6 last:pr-6 py-3">{children}</td>;
+        return <td className="first:pl-6 py-3">{children}</td>;
     }
     return (
         <td className="first:*:pl-6 *:block last:*:pr-6 py-3">