Merge branches 'w/133.0/improvement/navbar-style-improvements' and 'q/w/4755/132.0/improvement/navbar-style-improvements' into tmp/octopus/q/133.0

Author: bert-e

shell-ui/src/navbar/NavBar.tsx

@@ -34,7 +34,7 @@ import type { Link as TypeLink } from './navbarHooks';
 import { useNavbar } from './navbarHooks';
 
 const Logo = styled.img`
-  height: 2.143rem;
+  height: 1.5rem;
 `;
 export const LoadingNavbar = ({ logo }: { logo: string }) => (
   <CoreUINavbar
@@ -403,6 +403,7 @@ export const Navbar = ({
     rightTabs.unshift({
       render: () => (
         <Button
+        style={{ backgroundColor: 'transparent' }}
           onClick={() => {
             setThemeMode(switchThemeTo);
           }}

shell-ui/src/navbar/NotificationCenter.tsx

@@ -113,7 +113,7 @@ const NotificationCenter = () => {
   const navigate = useShellHistory();
   return (
     <div
-      style={{ position: 'relative' }}
+      style={{ position: 'relative'}}
       {...getToggleButtonProps({
         'aria-label': 'Notification Center',
         ref: (e: HTMLDivElement) => {
@@ -127,7 +127,7 @@ const NotificationCenter = () => {
       })}
     >
       <Button
-        style={isOpen ? { background: theme?.highlight } : {}}
+        style={isOpen ? { background: theme?.highlight } : { backgroundColor: 'transparent' }}
         icon={
           <span className="fa-layers fa-fw">
             <Icon

ui/src/containers/AlertPage.tsx

@@ -44,7 +44,7 @@ const SecondaryTitle = styled.div`
   justify-content: center;
   font-size: ${fontSize.base};
   width: 250px;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${(props) => props.theme.textPrimary};
 `;
 const TertiaryTitle = styled.div`
   display: flex;
@@ -184,8 +184,9 @@ const ActiveAlertTab = React.memo(
         startsAt: (row1, row2) => {
           const a = row1?.values?.startsAt;
           const b = row2.values?.startsAt;
-          // @ts-expect-error - FIXME when you are working on it
-          return new Date(a) - new Date(b);
+          const dateA = new Date(a).getTime();
+          const dateB = new Date(b).getTime();
+          return dateA - dateB;
         },
       };
     }, []);