fix(admin-ui): Eliminate purple from most-visible components (#3639)

packages/admin-ui/ui/src/components/atoms/avatar/index.tsx

@@ -18,7 +18,7 @@ type AvatarProps = {
 const Avatar: React.FC<AvatarProps> = ({
   user,
   font = "inter-small-semibold",
-  color = "bg-violet-60",
+  color = "bg-grey-80",
   isLoading = false,
 }) => {
   let username: string

packages/admin-ui/ui/src/components/atoms/settings-card/index.tsx

@@ -34,7 +34,7 @@ const SettingsCard: React.FC<SettingsCardProps> = ({
           }
         }}
       >
-        <div className="h-2xlarge w-2xlarge bg-violet-20 rounded-circle text-violet-60 group-disabled:bg-grey-10 group-disabled:text-grey-40 flex items-center justify-center">
+        <div className="h-2xlarge w-2xlarge bg-grey-10 rounded-circle text-grey-60 group-disabled:bg-grey-10 group-disabled:text-grey-40 flex items-center justify-center">
           {icon}
         </div>
         <div className="mx-large flex-1 text-left">

packages/admin-ui/ui/src/components/molecules/customer-avatar-item/index.tsx

@@ -11,7 +11,7 @@ type CustomerAvatarItemProps = {
 }
 
 const CustomerAvatarItem: React.FC<CustomerAvatarItemProps> = ({
-  color = "bg-violet-60",
+  color = "bg-grey-80",
   customer,
 }: CustomerAvatarItemProps) => {
   const identifier =

packages/admin-ui/ui/src/components/molecules/sidebar-team-member/index.tsx

@@ -7,7 +7,7 @@ type SidebarTeamMemberProps = {
 }
 
 const SidebarTeamMember: React.FC<SidebarTeamMemberProps> = ({
-  color = "bg-violet-60",
+  color = "bg-grey-80",
   user,
 }: SidebarTeamMemberProps) => {
   const fullName =

packages/admin-ui/ui/src/components/molecules/user-menu/index.tsx

@@ -35,7 +35,7 @@ const UserMenu: React.FC = () => {
             <Avatar
               user={{ ...user }}
               isLoading={isLoading}
-              color="bg-fuschia-40"
+              color="bg-grey-80"
             />
           </div>
         </DropdownMenu.Trigger>

packages/admin-ui/ui/src/domain/orders/draft-orders/details.tsx

@@ -421,7 +421,7 @@ const DraftOrderDetails = () => {
                     <Avatar
                       user={cart?.customer}
                       font="inter-large-semibold"
-                      color="bg-fuschia-40"
+                      color="bg-grey-80"
                     />
                   </div>
                   <div>

packages/admin-ui/ui/src/domain/orders/new/components/summary.tsx

@@ -285,7 +285,7 @@ const Summary = () => {
         <div className="flex items-center">
           <div className="mr-3 h-5 w-5">
             <Avatar
-              color="bg-fuschia-40"
+              color="bg-grey-80"
               user={{
                 email,
                 first_name: shipping?.first_name,