From 4f3e74a6bd490bb08ee06a54642a60a21830d78a Mon Sep 17 00:00:00 2001
From: Aric Lasry <lasry.aric@gmail.com>
Date: Thu, 12 Oct 2023 13:35:16 +0200
Subject: [PATCH] Aric sparkle for ffrag (#2086)

* Add background colors to Avatar and Citation

* Bumping Sparkle to version 0.2.6
---
 sparkle/src/components/Avatar.tsx   |  8 +++++++-
 sparkle/src/components/Citation.tsx | 12 +++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/sparkle/src/components/Avatar.tsx b/sparkle/src/components/Avatar.tsx
index 31a276be0259..c1d81df46376 100644
--- a/sparkle/src/components/Avatar.tsx
+++ b/sparkle/src/components/Avatar.tsx
@@ -11,6 +11,7 @@ type AvatarProps = {
   onClick?: () => void;
   busy?: boolean;
   isRounded?: boolean;
+  backgroundColor?: string;
 };
 
 const colors = [
@@ -86,6 +87,7 @@ export function Avatar({
   clickable = false,
   busy = false,
   isRounded = false,
+  backgroundColor,
 }: AvatarProps) {
   const getColor = (name: string) => {
     if (/\+/.test(name)) {
@@ -120,7 +122,11 @@ export function Avatar({
   const avatarClass = classNames(
     sizeClasses[size],
     isRounded ? "s-rounded-full" : roundedClasses[size],
-    name ? getColor(name) : "s-bg-slate-200",
+    backgroundColor
+      ? backgroundColor
+      : name
+      ? getColor(name)
+      : "s-bg-slate-200",
     "s-flex s-flex-shrink-0 s-items-center s-justify-center s-overflow-hidden",
     clickableStyles,
     busyStyles
diff --git a/sparkle/src/components/Citation.tsx b/sparkle/src/components/Citation.tsx
index 08f596f6c797..7bd34ba47316 100644
--- a/sparkle/src/components/Citation.tsx
+++ b/sparkle/src/components/Citation.tsx
@@ -12,7 +12,7 @@ interface CitationProps {
   description?: string;
   index?: ReactNode;
   isBlinking?: boolean;
-  href: string;
+  href?: string;
 }
 
 const typeIcons = {
@@ -34,7 +34,7 @@ export function Citation({
   return (
     <div
       className={classNames(
-        "w-48 s-flex s-flex-none s-flex-col s-gap-1 s-rounded-xl s-border s-border-structure-100 s-p-3 s-shadow-sm sm:s-w-64",
+        "w-48 s-flex s-flex-none s-flex-col s-gap-1 s-rounded-xl s-border s-border-structure-100 s-bg-white s-p-3 s-shadow-sm sm:s-w-64",
         isBlinking ? "animate-[bgblink_500ms_3]" : ""
       )}
     >
@@ -46,9 +46,11 @@ export function Citation({
         )}
         <Icon visual={typeIcons[type]} size="sm" />
         <div className="s-flex-grow s-text-xs" />
-        <a target="_blank" rel="noopener noreferrer" href={href}>
-          <IconButton icon={ExternalLinkIcon} size="sm" variant="primary" />
-        </a>
+        {href && (
+          <a target="_blank" rel="noopener noreferrer" href={href}>
+            <IconButton icon={ExternalLinkIcon} size="sm" variant="primary" />
+          </a>
+        )}
       </div>
       <div className="s-text-sm s-font-bold s-text-element-900">{title}</div>
       {description && (