💄 Update avatar colors (#1351)

apps/web/src/components/optimized-avatar-image.tsx

@@ -39,6 +39,7 @@ export function OptimizedAvatarImage({
       ) : null}
       {!src || !isLoaded ? (
         <AvatarFallback
+          seed={name}
           className={cn({
             "text-xs": size <= 24,
             "text-lg": size >= 48,

apps/web/src/components/participant.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@rallly/ui";
-import { Avatar, AvatarFallback, getColor } from "@rallly/ui/avatar";
+import { Avatar, AvatarFallback } from "@rallly/ui/avatar";
 import React from "react";
 
 export function Participant({ children }: { children: React.ReactNode }) {
@@ -13,11 +13,9 @@ export const ParticipantAvatar = ({
   size?: number;
   name: string;
 }) => {
-  const color = getColor(name);
-
   return (
     <Avatar size={size}>
-      <AvatarFallback className="text-xs" color={color}>
+      <AvatarFallback className="text-xs" seed={name}>
         {name[0]?.toUpperCase()}
       </AvatarFallback>
     </Avatar>

apps/web/src/components/poll/desktop-poll/participant-row-form.tsx

@@ -15,6 +15,7 @@ import { Controller } from "react-hook-form";
 import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { Participant, ParticipantName } from "@/components/participant";
 import { useVotingForm } from "@/components/poll/voting-form";
+import { YouAvatar } from "@/components/poll/you-avatar";
 import { Trans } from "@/components/trans";
 
 import { usePoll } from "../../poll-context";
@@ -60,7 +61,11 @@ const ParticipantRowForm = ({
       >
         <div className="flex items-center justify-between gap-x-2.5">
           <Participant>
-            <OptimizedAvatarImage name={participantName} size={20} />
+            {name ? (
+              <OptimizedAvatarImage name={participantName} size={20} />
+            ) : (
+              <YouAvatar />
+            )}
             <ParticipantName>{participantName}</ParticipantName>
           </Participant>
           {!isNew ? (

apps/web/src/components/poll/mobile-poll.tsx

@@ -20,6 +20,7 @@ import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { Participant, ParticipantName } from "@/components/participant";
 import { ParticipantDropdown } from "@/components/participant-dropdown";
 import { useVotingForm } from "@/components/poll/voting-form";
+import { YouAvatar } from "@/components/poll/you-avatar";
 import { useOptions, usePoll } from "@/components/poll-context";
 import { Trans } from "@/components/trans";
 import { usePermissions } from "@/contexts/permissions";
@@ -121,7 +122,7 @@ const MobilePoll: React.FunctionComponent = () => {
           ) : (
             <div className="flex grow items-center px-1">
               <Participant>
-                <OptimizedAvatarImage name={t("you")} size={20} />
+                <YouAvatar />
                 <ParticipantName>{t("you")}</ParticipantName>
               </Participant>
             </div>

apps/web/src/components/poll/mobile-poll/poll-option.tsx

@@ -61,8 +61,6 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
                 <div className="truncate text-sm">{name}</div>
               </div>
             ))}
-          </div>
-          <div className="col-span-1 space-y-2.5">
             {participantsWhoVotedIfNeedBe.map(({ name }, i) => (
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
@@ -70,12 +68,14 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
                   <VoteIcon
                     type="ifNeedBe"
                     size="sm"
-                    className="absolute bottom-full left-full -translate-x-1/2 translate-y-1/2 rounded-full bg-white"
+                    className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white"
                   />
                 </div>
                 <div className="truncate text-sm"> {name}</div>
               </div>
             ))}
+          </div>
+          <div className="col-span-1 space-y-2.5">
             {participantsWhoVotedNo.map(({ name }, i) => (
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
@@ -83,7 +83,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
                   <VoteIcon
                     type="no"
                     size="sm"
-                    className="absolute bottom-full left-full -translate-x-1/2 translate-y-1/2 rounded-full bg-white"
+                    className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white"
                   />
                 </div>
                 <div className="truncate text-sm">{name}</div>

apps/web/src/components/poll/you-avatar.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from "@/app/i18n/client";
+
+export function YouAvatar() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="inline-flex size-5 items-center justify-center rounded-full bg-gray-200 text-xs font-medium">
+      {t("you")[0]}
+    </div>
+  );
+}