fix(topbar): remove active ring and update color of profile badge (#286)

AxisCommunications · Jun 28, 2024 · 57782c8 · 57782c8
1 parent 07cf19b
commit 57782c8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/components/topbar/src/profile-menu.tsx b/components/topbar/src/profile-menu.tsx
@@ -48,9 +48,9 @@ export const ProfileMenu = ({
           data-testid="profile-menu-button"
           icon={
             <Avatar
+              color="mink"
               name={name}
               size={24}
-              active={hasNotification ? "active" : "unset"}
               badge={hasNotification
                 ? {
                   icon: notificationIcon !== undefined
@@ -60,6 +60,7 @@ export const ProfileMenu = ({
                     Since this is not a Badge but a PresenceBadge, we only
                     have the option to change the color through "status".
                     "away" gives us the orange color that we want.
+                    Can be overriden by user by setting color on the notificationIcon property
                   */
                   status: "away",
                   size: "extra-small",

diff --git a/examples/src/components/top-bar.tsx b/examples/src/components/top-bar.tsx
@@ -32,8 +32,7 @@ import {
   FoodCarrot20Filled,
   FoodFish20Filled,
   FoodFish20Regular,
-  MailFilled,
-  MailRegular,
+  MailUnreadFilled,
   Megaphone24Filled,
   OpenRegular,
   QuestionCircleRegular,
@@ -44,7 +43,6 @@ import React, { useCallback, useState } from "react";
 import { useAppContext } from "../context/ApplicationStateProvider";
 
 const ApplicationIcon = bundleIcon(AnimalCat20Filled, AnimalCat20Regular);
-const MailIcon = bundleIcon(MailFilled, MailRegular);
 const ZoomIcon = bundleIcon(ZoomFit16Filled, ZoomFit16Regular);
 const FishIcon = bundleIcon(FoodFish20Filled, FoodFish20Regular);
 const CatIcon = bundleIcon(AnimalCat20Filled, AnimalCat20Regular);
@@ -252,7 +250,7 @@ export const Navbar = () => {
             options: themes,
           },
           hasNotification: true,
-          notificationIcon: <MailIcon />,
+          notificationIcon: <MailUnreadFilled />,
         }}
       />
     </div>