Doesn't inherit from MUI button

web/packages/new/photos/components/Gallery/BarImpl.tsx

@@ -5,11 +5,12 @@ import {
     ItemCard,
     TileTextOverlay,
 } from "@/new/photos/components/ItemCards";
-import { FilledIconButton, UnstyledButton } from "@/new/photos/components/mui";
+import { FilledIconButton } from "@/new/photos/components/mui";
 import {
     IMAGE_CONTAINER_MAX_WIDTH,
     MIN_COLUMNS,
 } from "@/new/photos/components/PhotoList";
+import { UnstyledButton } from "@/new/photos/components/UnstyledButton";
 import type { Person } from "@/new/photos/services/ml/people";
 import type {
     CollectionSummary,

web/packages/new/photos/components/PeopleList.tsx

@@ -6,7 +6,7 @@ import type { EnteFile } from "@/new/photos/types/file";
 import { Skeleton, Typography, styled } from "@mui/material";
 import { t } from "i18next";
 import React, { useEffect, useState } from "react";
-import { UnstyledButton } from "./mui-custom";
+import { UnstyledButton } from "./UnstyledButton";
 
 export interface SearchPeopleListProps {
     people: Person[];

web/packages/new/photos/components/SearchBar.tsx

@@ -42,7 +42,7 @@ import {
 } from "react-select";
 import AsyncSelect from "react-select/async";
 import { SearchPeopleList } from "./PeopleList";
-import { UnstyledButton } from "./mui-custom";
+import { UnstyledButton } from "./UnstyledButton";
 
 export interface SearchBarProps {
     /**

web/packages/new/photos/components/UnstyledButton.tsx

@@ -0,0 +1,26 @@
+import { styled } from "@mui/material";
+
+/**
+ * An "unstyled" button.
+ *
+ * There are cases where we semantically (and functionally) want a button, but
+ * don't want the browser's default styling. This component is meant to act as a
+ * base for such cases.
+ *
+ * Contrary to its name, it does add a bit of styling, to make these buttons fit
+ * in with the rest of our theme.
+ */
+export const UnstyledButton = styled("button")`
+    /* Reset some button defaults that are affecting us */
+    background: transparent;
+    border: 0;
+    padding: 0;
+
+    font: inherit;
+    /* We customized the letter spacing in the theme. Need to tell the button to
+       inherit that customization also. */
+    letter-spacing: inherit;
+
+    /* Default cursor on mouse over of a button is not a hand pointer */
+    cursor: pointer;
+`;

web/packages/new/photos/components/mui/index.tsx

@@ -17,31 +17,6 @@ export const FilledIconButton = styled(IconButton)(({ theme }) => ({
     backgroundColor: theme.colors.fill.faint,
 }));
 
-/**
- * An "unstyled" button.
- *
- * There are cases where we semantically (and functionally) want a button, but
- * don't want the browser's default styling. This component is meant to act as a
- * base for such cases.
- *
- * Contrary to its name, it does add a bit of styling, to make these buttons fit
- * in with the rest of our theme.
- */
-export const UnstyledButton = styled("button")`
-    /* Reset some button defaults that are affecting us */
-    background: transparent;
-    border: 0;
-    padding: 0;
-
-    font: inherit;
-    /* We customized the letter spacing in the theme. Need to tell the button to
-       inherit that customization also. */
-    letter-spacing: inherit;
-
-    /* Default cursor on mouse over of a button is not a hand pointer */
-    cursor: pointer;
-`;
-
 /**
  * A flexbox with justify content set to space-between and center alignment.
  *