add missing linear gradient to events (#564)

factorialco · Sep 24, 2024 · 7292a8a · 7292a8a
1 parent a55e0fb
commit 7292a8a
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/lib/experimental/Widgets/EventsList/event.tsx b/lib/experimental/Widgets/EventsList/event.tsx
@@ -12,7 +12,16 @@ export interface EventProps {
 export const Event = forwardRef<HTMLDivElement, EventProps>(
  ({ title, subtitle, description, color, isPending }, ref) => {
  return (
- <div ref={ref} className="flex flex-row items-center gap-3">
+ <div
+ ref={ref}
+ className="relative flex flex-row items-center gap-3 overflow-hidden rounded-md px-2 py-1.5"
+ >
+ <div
+ className="absolute bottom-0 left-0 right-0 top-0 -z-10 opacity-10"
+ style={{
+ background: `linear-gradient(to right, ${color}, transparent)`,
+ }}
+ />
  <div
  className={cn("h-10 w-1 rounded-sm")}
  style={
@@ -31,12 +40,12 @@ export const Event = forwardRef<HTMLDivElement, EventProps>(
  }
  }
  />
- <div className="flex flex-col">
+ <div className="flex flex-col gap-0.5">
  <div className="flex flex-row gap-1">
  <p>{title}</p>
  <p className="text-f1-foreground-secondary">{subtitle}</p>
  </div>
- <p className="text-sm text-f1-foreground-secondary">{description}</p>
+ <p className="text-f1-foreground-secondary">{description}</p>
  </div>
  </div>
  )