From 8db71fe45e39aeebcd293f8bbc7194d1561ac025 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 3 Oct 2024 15:55:54 +0530
Subject: [PATCH] Doesn't inherit from MUI button

---
 .../new/photos/components/Gallery/BarImpl.tsx |  3 ++-
 .../new/photos/components/PeopleList.tsx      |  2 +-
 .../new/photos/components/SearchBar.tsx       |  2 +-
 .../new/photos/components/UnstyledButton.tsx  | 26 +++++++++++++++++++
 .../new/photos/components/mui/index.tsx       | 25 ------------------
 5 files changed, 30 insertions(+), 28 deletions(-)
 create mode 100644 web/packages/new/photos/components/UnstyledButton.tsx

diff --git a/web/packages/new/photos/components/Gallery/BarImpl.tsx b/web/packages/new/photos/components/Gallery/BarImpl.tsx
index 4813e1bfc8..962051dd94 100644
--- a/web/packages/new/photos/components/Gallery/BarImpl.tsx
+++ b/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,
diff --git a/web/packages/new/photos/components/PeopleList.tsx b/web/packages/new/photos/components/PeopleList.tsx
index ac41dc7deb..4f54c9a164 100644
--- a/web/packages/new/photos/components/PeopleList.tsx
+++ b/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[];
diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx
index 5dd560c0a5..f934d1307b 100644
--- a/web/packages/new/photos/components/SearchBar.tsx
+++ b/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 {
     /**
diff --git a/web/packages/new/photos/components/UnstyledButton.tsx b/web/packages/new/photos/components/UnstyledButton.tsx
new file mode 100644
index 0000000000..920c646065
--- /dev/null
+++ b/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;
+`;
diff --git a/web/packages/new/photos/components/mui/index.tsx b/web/packages/new/photos/components/mui/index.tsx
index 0b1e9cc52e..3e16719cda 100644
--- a/web/packages/new/photos/components/mui/index.tsx
+++ b/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.
  *