fix(ui, minifront): v2 nav style fixes (#1800)

* fix(ui, minifront): update sync bar styles

* fix(ui, minifront): add temporary prop `zIndex` to v2 dialog

* chore: changeset

* fix: styles

* fix: lint

.changeset/good-penguins-battle.md

@@ -0,0 +1,7 @@
+---
+'minifront': patch
+'@penumbra-zone/ui': patch
+---
+
+- Add a temporary zIndex prop to the Dialog component. It is only needed for minifront v1 and must be removed when we stop supporting the v1.
+- Improve the styles of the v2 sync bar and popover

apps/minifront/src/components/syncing-dialog/index.tsx

@@ -22,7 +22,7 @@ export const SyncingDialog = () => {
 
   return (
     <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
-      <Dialog.Content title='Your client is syncing...'>
+      <Dialog.Content title='Your client is syncing...' zIndex={9999}>
         <SyncAnimation />
 
         <div className='text-center'>

apps/minifront/src/components/v2/header/status-popover.tsx

@@ -1,5 +1,5 @@
 import { Blocks } from 'lucide-react';
-import { Popover } from '@penumbra-zone/ui/Popover';
+import { Popover, PopoverContext } from '@penumbra-zone/ui/Popover';
 import { Button } from '@penumbra-zone/ui/Button';
 import { Density } from '@penumbra-zone/ui/Density';
 import { Pill } from '@penumbra-zone/ui/Pill';
@@ -30,6 +30,18 @@ export const StatusPopover = () => {
     return <Pill context='technical-caution'>Block Syncing</Pill>;
   }, [status]);
 
+  const popoverContext = useMemo<PopoverContext>(() => {
+    if (status?.isCatchingUp === undefined) {
+      return 'default';
+    } else if (status.error) {
+      return 'error';
+    } else if (status.percentSyncedNumber === 1) {
+      return 'success';
+    } else {
+      return 'caution';
+    }
+  }, [status]);
+
   return (
     <Popover>
       <Popover.Trigger>
@@ -38,7 +50,7 @@ export const StatusPopover = () => {
         </Button>
       </Popover.Trigger>
       {status?.isCatchingUp !== undefined && (
-        <Popover.Content align='end' side='bottom'>
+        <Popover.Content context={popoverContext} align='end' side='bottom'>
           <Density compact>
             <div className='flex flex-col gap-4'>
               <div className='flex flex-col gap-2'>

apps/minifront/src/components/v2/header/sync-bar.tsx

@@ -9,7 +9,7 @@ export const SyncBar = () => {
   return (
     <div className='fixed left-0 top-0 h-1 w-full'>
       {status?.isCatchingUp === undefined ? (
-        <Progress value={0} loading />
+        <Progress value={0} loading error={Boolean(status?.error)} />
       ) : (
         <Progress
           value={status.percentSyncedNumber}

apps/minifront/src/state/status.ts

@@ -49,6 +49,7 @@ export const statusSelector = (
        * `false` otherwise
        */
       isCatchingUp: undefined;
+      error: unknown;
     }
   | {
       isCatchingUp: boolean;
@@ -60,7 +61,7 @@ export const statusSelector = (
       error: unknown;
     } => {
   if (!zQueryState.data?.fullSyncHeight) {
-    return { isCatchingUp: undefined };
+    return { isCatchingUp: undefined, error: zQueryState.error };
   } else {
     const { fullSyncHeight, latestKnownBlockHeight } = zQueryState.data;
     const isCatchingUp = !latestKnownBlockHeight || latestKnownBlockHeight - fullSyncHeight > 10;

packages/ui/src/Button/index.tsx

@@ -1,4 +1,4 @@
-import { FC, forwardRef, MouseEventHandler } from 'react';
+import { FC, forwardRef, MouseEventHandler, ReactNode } from 'react';
 import { styled, css, DefaultTheme } from 'styled-components';
 import { asTransientProps } from '../utils/asTransientProps';
 import { Priority, focusOutline, overlays, buttonBase } from '../utils/button';
@@ -100,7 +100,7 @@ interface BaseButtonProps {
    * The button label. If `iconOnly` is `true` or `adornment`, this will be used
    * as the `aria-label` attribute.
    */
-  children: string;
+  children: ReactNode;
   /**
    * What type of action is this button related to? Leave as `default` for most
    * buttons, set to `accent` for the single most important action on a given
@@ -201,8 +201,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         type={type}
         disabled={disabled}
         onClick={onClick}
-        aria-label={iconOnly ? children : undefined}
-        title={iconOnly ? children : undefined}
+        aria-label={iconOnly && typeof children === 'string' ? children : undefined}
+        title={iconOnly && typeof children === 'string' ? children : undefined}
         $getFocusOutlineColor={theme => theme.color.action[outlineColorByActionType[actionType]]}
         $getFocusOutlineOffset={() => (iconOnly === 'adornment' ? '0px' : undefined)}
         $getBorderRadius={theme =>

packages/ui/src/Dialog/index.tsx

@@ -40,11 +40,11 @@ const FullHeightWrapper = styled.div`
  * on the full-screen wrapper pass through to the underlying `<Overlay />`, so
  * that the dialog closes when the user clicks there.
  */
-const DialogContent = styled.div`
+const DialogContent = styled.div<{ $zIndex?: number }>`
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 9999;
+  ${props => props.$zIndex && `z-index: ${props.$zIndex};`}
 `;
 
 const DialogContentCard = styled(motion.div)`
@@ -237,15 +237,17 @@ export const Dialog = ({ children, onClose, isOpen }: DialogProps) => {
 
 export interface DialogEmptyContentProps {
   children?: ReactNode;
+  /** @deprecated this prop will be removed in the future */
+  zIndex?: number;
 }
 
-const EmptyContent = ({ children }: DialogEmptyContentProps) => {
+const EmptyContent = ({ children, zIndex }: DialogEmptyContentProps) => {
   return (
     <RadixDialog.Portal>
       <Overlay />
 
       <RadixDialog.Content>
-        <DialogContent>{children}</DialogContent>
+        <DialogContent $zIndex={zIndex}>{children}</DialogContent>
       </RadixDialog.Content>
     </RadixDialog.Portal>
   );
@@ -271,6 +273,8 @@ export interface DialogContentProps<IconOnlyButtonGroupProps extends boolean | u
   buttonGroupProps?: IconOnlyButtonGroupProps extends boolean
     ? ButtonGroupProps<IconOnlyButtonGroupProps>
     : undefined;
+  /** @deprecated this prop will be removed in the future */
+  zIndex?: number;
 }
 
 const Content = <IconOnlyButtonGroupProps extends boolean | undefined>({
@@ -279,11 +283,12 @@ const Content = <IconOnlyButtonGroupProps extends boolean | undefined>({
   title,
   buttonGroupProps,
   motion,
+  zIndex,
 }: DialogContentProps<IconOnlyButtonGroupProps>) => {
   const { showCloseButton } = useContext(DialogContext);
 
   return (
-    <EmptyContent>
+    <EmptyContent zIndex={zIndex}>
       <Display>
         <Grid container>
           <Grid mobile={0} tablet={2} desktop={3} xl={4} />

packages/ui/src/DropdownMenu/Content.tsx

@@ -5,15 +5,21 @@ import {
   Portal as RadixDropdownMenuPortal,
   DropdownMenuContentProps as RadixDropdownMenuContentProps,
 } from '@radix-ui/react-dropdown-menu';
-import { PopoverContent } from '../utils/popover.ts';
+import { PopoverContent, PopoverContext } from '../utils/popover.ts';
 
 export interface DropdownMenuContentProps {
   children?: ReactNode;
   side?: RadixDropdownMenuContentProps['side'];
   align?: RadixDropdownMenuContentProps['align'];
+  context?: PopoverContext;
 }
 
-export const Content = ({ children, side, align }: DropdownMenuContentProps) => {
+export const Content = ({
+  children,
+  side,
+  align,
+  context = 'default',
+}: DropdownMenuContentProps) => {
   const theme = useTheme();
 
   return (
@@ -24,7 +30,7 @@ export const Content = ({ children, side, align }: DropdownMenuContentProps) =>
         align={align}
         asChild
       >
-        <PopoverContent>{children}</PopoverContent>
+        <PopoverContent $context={context}>{children}</PopoverContent>
       </RadixDropdownMenuContent>
     </RadixDropdownMenuPortal>
   );

packages/ui/src/Popover/index.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import * as RadixPopover from '@radix-ui/react-popover';
 import type { PopoverContentProps as RadixPopoverContentProps } from '@radix-ui/react-popover';
 import { useTheme } from 'styled-components';
-import { PopoverContent } from '../utils/popover.ts';
+import { PopoverContent, PopoverContext } from '../utils/popover.ts';
 
 interface ControlledPopoverProps {
   /**
@@ -105,6 +105,7 @@ export interface PopoverContentProps {
   children?: ReactNode;
   side?: RadixPopoverContentProps['side'];
   align?: RadixPopoverContentProps['align'];
+  context?: PopoverContext;
 }
 
 /**
@@ -113,7 +114,7 @@ export interface PopoverContentProps {
  * Control the position of the Popover relative to the trigger element by passing
  * `side` and `align` props.
  */
-const Content = ({ children, side, align }: PopoverContentProps) => {
+const Content = ({ children, side, align, context = 'default' }: PopoverContentProps) => {
   const theme = useTheme();
 
   return (
@@ -124,9 +125,11 @@ const Content = ({ children, side, align }: PopoverContentProps) => {
         align={align}
         asChild
       >
-        <PopoverContent>{children}</PopoverContent>
+        <PopoverContent $context={context}>{children}</PopoverContent>
       </RadixPopover.Content>
     </RadixPopover.Portal>
   );
 };
 Popover.Content = Content;
+
+export type { PopoverContext };

packages/ui/src/Progress/index.tsx

@@ -10,11 +10,12 @@ export const infiniteLoading = keyframes`
   }
 `;
 
-const Root = styled(ProgressPrimitive.Root)`
+const Root = styled(ProgressPrimitive.Root)<{ $error: boolean }>`
   position: relative;
   width: 100%;
   height: ${props => props.theme.spacing(1)};
-  background-color: ${props => props.theme.color.other.tonalFill5};
+  background-color: ${props =>
+    props.$error ? props.theme.color.destructive.light : props.theme.color.other.tonalFill5};
   transition: background-color 0.15s;
   overflow: hidden;
 `;
@@ -70,7 +71,7 @@ export interface ProgressProps {
  * Progress bar with loading and error states
  */
 export const Progress = ({ value, loading, error = false }: ProgressProps) => (
-  <Root value={value} max={1}>
+  <Root value={value} max={1} $error={error}>
     <ProgressPrimitive.Indicator asChild>
       <Indicator
         $value={value}

packages/ui/src/utils/popover.ts

@@ -1,4 +1,6 @@
-import { styled, keyframes } from 'styled-components';
+import { styled, keyframes, DefaultTheme } from 'styled-components';
+
+export type PopoverContext = 'default' | 'success' | 'caution' | 'error';
 
 export const scaleIn = keyframes`
   from {
@@ -11,15 +13,28 @@ export const scaleIn = keyframes`
   }
 `;
 
-export const PopoverContent = styled.div`
+const getPopoverBackground = (context: PopoverContext, theme: DefaultTheme) => {
+  if (context === 'success') {
+    return `radial-gradient(100% 100% at 0% 0%, rgba(83, 174, 168, 0.20) 0%, rgba(83, 174, 168, 0.02) 100%), ${theme.color.other.dialogBackground}`;
+  }
+  if (context === 'caution') {
+    return `radial-gradient(100% 100% at 0% 0%, rgba(153, 97, 15, 0.20) 0%, rgba(153, 97, 15, 0.02) 100%), ${theme.color.other.dialogBackground}`;
+  }
+  if (context === 'error') {
+    return `radial-gradient(100% 100% at 0% 0%, rgba(175, 38, 38, 0.20) 0%, rgba(175, 38, 38, 0.02) 100%), ${theme.color.other.dialogBackground}`;
+  }
+  return theme.color.other.dialogBackground;
+};
+
+export const PopoverContent = styled.div<{ $context: PopoverContext }>`
   display: flex;
   flex-direction: column;
 
   width: 240px;
   max-width: 320px;
   padding: ${props => props.theme.spacing(3)};
 
-  background: ${props => props.theme.color.other.dialogBackground};
+  background: ${props => getPopoverBackground(props.$context, props.theme)};
   border: 1px solid ${props => props.theme.color.other.tonalStroke};
   border-radius: ${props => props.theme.borderRadius.sm};
   backdrop-filter: blur(${props => props.theme.blur.lg});