New

web/packages/base/components/ErrorIndicator.tsx

@@ -0,0 +1,41 @@
+import ErrorOutline from "@mui/icons-material/ErrorOutline";
+import { Box, Stack, Typography } from "@mui/material";
+import { t } from "i18next";
+import type React from "react";
+
+/**
+ * An error message indicator, styled to complement {@link ActivityIndicator}.
+ *
+ * If a child is provided, it is used as the error message to show (after being
+ * wrapped in a suitable {@link Typography}). Otherwise the default generic
+ * error message is shown.
+ */
+export const ActivityErrorIndicator: React.FC<React.PropsWithChildren> = ({
+    children,
+}) => (
+    <Stack sx={{ gap: 2, alignItems: "center" }}>
+        <ErrorOutline color="secondary" sx={{ color: "critical" }} />
+        <Typography color="text.muted">
+            {children ?? t("generic_error")}
+        </Typography>
+    </Stack>
+);
+
+/**
+ * An smaller error message indicator suitable for being shown above or below
+ * text fields.
+ *
+ * If a child is provided, it is used as the error message to show (after being
+ * wrapped in a suitable {@link Typography}). Otherwise the default generic
+ * error message is shown.
+ */
+export const InlineErrorIndicator: React.FC<React.PropsWithChildren> = ({
+    children,
+}) => (
+    <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
+        <ErrorOutline color="secondary" sx={{ color: "critical" }} />
+        <Typography variant="small" color="critical.main">
+            {children ?? t("generic_error")}
+        </Typography>
+    </Box>
+);

web/packages/new/photos/components/gallery/PeopleHeader.tsx

@@ -1,7 +1,5 @@
-import {
-    ActivityIndicator,
-    ErrorIndicator,
-} from "@/base/components/mui/ActivityIndicator";
+import { ActivityErrorIndicator } from "@/base/components/ErrorIndicator";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { CenteredBox, SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
@@ -685,7 +683,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
                     </CenteredBox>
                 ) : state.fetchFailed ? (
                     <CenteredBox>
-                        <ErrorIndicator />
+                        <ActivityErrorIndicator />
                     </CenteredBox>
                 ) : state.showChoices ? (
                     <SuggestionOrChoiceList