Improve

web/apps/photos/src/components/Export.tsx

@@ -1,5 +1,6 @@
 import { isDesktop } from "@/base/app";
 import { EnteSwitch } from "@/base/components/EnteSwitch";
+import { LinkButton } from "@/base/components/LinkButton";
 import {
     OverflowMenu,
     OverflowMenuOption,
@@ -15,7 +16,6 @@ import {
     SpaceBetweenFlex,
     VerticallyCenteredFlex,
 } from "@ente/shared/components/Container";
-import LinkButton from "@ente/shared/components/LinkButton";
 import { CustomError } from "@ente/shared/error";
 import FolderIcon from "@mui/icons-material/Folder";
 import {

web/apps/photos/src/components/ExportFinished.tsx

@@ -1,8 +1,8 @@
+import { LinkButton } from "@/base/components/LinkButton";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { formattedNumber } from "@/base/i18n";
 import { EnteFile } from "@/media/file";
 import { SpaceBetweenFlex } from "@ente/shared/components/Container";
-import LinkButton from "@ente/shared/components/LinkButton";
 import { formatDateTime } from "@ente/shared/time/format";
 import { DialogActions, DialogContent, Stack, Typography } from "@mui/material";
 import { t } from "i18next";

web/apps/photos/src/components/PhotoViewer/FileInfo.tsx

@@ -1,3 +1,4 @@
+import { LinkButtonUndecorated } from "@/base/components/LinkButton";
 import { TitledMiniDialog } from "@/base/components/MiniDialog";
 import { type ButtonishProps } from "@/base/components/mui";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
@@ -68,7 +69,6 @@ import {
     TextField,
     Typography,
 } from "@mui/material";
-import LinkButton from "@ente/shared/components/LinkButton";
 import type { DisplayFile } from "components/PhotoFrame";
 import { Formik } from "formik";
 import { t } from "i18next";
@@ -254,18 +254,13 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                                         {t("view_on_map")}
                                     </Link>
                                 ) : (
-                                    <LinkButton
+                                    <LinkButtonUndecorated
                                         onClick={
                                             openDisableMapConfirmationDialog
                                         }
-                                        sx={{
-                                            textDecoration: "none",
-                                            color: "text.muted",
-                                            fontWeight: "medium",
-                                        }}
                                     >
                                         {t("disable_map")}
-                                    </LinkButton>
+                                    </LinkButtonUndecorated>
                                 )
                             }
                             trailingButton={
@@ -296,16 +291,9 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                         ) : !exif.tags ? (
                             t("no_exif")
                         ) : (
-                            <LinkButton
+                            <LinkButtonUndecorated onClick={showRawExif}>
-                                onClick={showRawExif}
-                                sx={{
-                                    textDecoration: "none",
-                                    color: "text.muted",
-                                    fontWeight: "medium",
-                                }}
-                            >
                                 {t("view_exif")}
-                            </LinkButton>
+                            </LinkButtonUndecorated>
                         )
                     }
                 />

web/apps/photos/src/components/Sidebar/index.tsx

@@ -2,6 +2,7 @@ import { RecoveryKey } from "@/accounts/components/RecoveryKey";
 import { openAccountsManagePasskeysPage } from "@/accounts/services/passkey";
 import { isDesktop } from "@/base/app";
 import { EnteLogo } from "@/base/components/EnteLogo";
+import { LinkButton } from "@/base/components/LinkButton";
 import { SpaceBetweenFlex } from "@/base/components/containers";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
@@ -67,7 +68,6 @@ import {
 import Typography from "@mui/material/Typography";
 import DeleteAccountModal from "components/DeleteAccountModal";
 import { WatchFolder } from "components/WatchFolder";
-import LinkButton from "@ente/shared/components/LinkButton";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { GalleryContext } from "pages/gallery";

web/packages/accounts/components/LoginComponents.tsx

@@ -4,12 +4,12 @@ import {
     passkeySessionExpiredErrorMessage,
     saveCredentialsAndNavigateTo,
 } from "@/accounts/services/passkey";
+import { LinkButton } from "@/base/components/LinkButton";
 import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { genericErrorDialogAttributes } from "@/base/components/utils/dialog";
 import log from "@/base/log";
 import { customAPIHost } from "@/base/origins";
-import LinkButton from "@ente/shared/components/LinkButton";
 import { CircularProgress, Stack, Typography, styled } from "@mui/material";
 import { t } from "i18next";
 import { useRouter } from "next/router";

web/packages/accounts/components/LoginContents.tsx

@@ -5,9 +5,9 @@ import {
 import { PAGES } from "@/accounts/constants/pages";
 import { getSRPAttributes } from "@/accounts/services/srp-remote";
 import { sendOTT } from "@/accounts/services/user";
+import { LinkButton } from "@/base/components/LinkButton";
 import { isMuseumHTTPError } from "@/base/http";
 import log from "@/base/log";
-import LinkButton from "@ente/shared/components/LinkButton";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";

web/packages/accounts/components/SignUpContents.tsx

@@ -2,13 +2,13 @@ import { PAGES } from "@/accounts/constants/pages";
 import { generateKeyAndSRPAttributes } from "@/accounts/services/srp";
 import { sendOTT } from "@/accounts/services/user";
 import { isWeakPassword } from "@/accounts/utils/password";
+import { LinkButton } from "@/base/components/LinkButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
 import { isMuseumHTTPError } from "@/base/http";
 import log from "@/base/log";
 import { LS_KEYS, setLSUser } from "@ente/shared//storage/localStorage";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import ShowHidePassword from "@ente/shared/components/Form/ShowHidePassword";
-import LinkButton from "@ente/shared/components/LinkButton";
 import {
     generateAndSaveIntermediateKeyAttributes,
     saveKeyInSessionStore,

web/packages/accounts/components/two-factor/TwoFactorSetup.tsx

@@ -1,7 +1,7 @@
 import { CodeBlock } from "@/accounts/components/CodeBlock";
+import { LinkButton } from "@/base/components/LinkButton";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import LinkButton from "@ente/shared/components/LinkButton";
 import { Stack, styled, Typography } from "@mui/material";
 import { t } from "i18next";
 import { useState } from "react";

web/packages/accounts/pages/change-email.tsx

@@ -5,11 +5,11 @@ import {
 } from "@/accounts/components/layouts/centered-paper";
 import { appHomeRoute } from "@/accounts/services/redirect";
 import { changeEmail, sendOTT } from "@/accounts/services/user";
+import { LinkButton } from "@/base/components/LinkButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
 import { isHTTPErrorWithStatus } from "@/base/http";
 import log from "@/base/log";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import LinkButton from "@ente/shared/components/LinkButton";
 import { LS_KEYS, getData, setLSUser } from "@ente/shared/storage/localStorage";
 import { Alert, Box, TextField } from "@mui/material";
 import { Formik, type FormikHelpers } from "formik";

web/packages/accounts/pages/change-password.tsx

@@ -20,8 +20,8 @@ import {
     updateSRPAndKeys,
 } from "@/accounts/services/srp-remote";
 import type { UpdatedKey } from "@/accounts/services/user";
+import { LinkButton } from "@/base/components/LinkButton";
 import { sharedCryptoWorker } from "@/base/crypto";
-import LinkButton from "@ente/shared/components/LinkButton";
 import {
     generateAndSaveIntermediateKeyAttributes,
     generateLoginSubKey,

web/packages/accounts/pages/credentials.tsx

@@ -26,12 +26,12 @@ import {
 import type { SRPAttributes } from "@/accounts/services/srp-remote";
 import { getSRPAttributes } from "@/accounts/services/srp-remote";
 import type { PageProps } from "@/accounts/types/page";
+import { LinkButton } from "@/base/components/LinkButton";
 import { LoadingIndicator } from "@/base/components/loaders";
 import { sharedCryptoWorker } from "@/base/crypto";
 import type { B64EncryptionResult } from "@/base/crypto/libsodium";
 import { clearLocalStorage } from "@/base/local-storage";
 import log from "@/base/log";
-import LinkButton from "@ente/shared/components/LinkButton";
 import VerifyMasterPasswordForm, {
     type VerifyMasterPasswordFormProps,
 } from "@ente/shared/components/VerifyMasterPasswordForm";

web/packages/accounts/pages/generate.tsx

@@ -15,9 +15,9 @@ import {
 } from "@/accounts/services/srp";
 import { putAttributes } from "@/accounts/services/user";
 import type { PageProps } from "@/accounts/types/page";
+import { LinkButton } from "@/base/components/LinkButton";
 import { LoadingIndicator } from "@/base/components/loaders";
 import log from "@/base/log";
-import LinkButton from "@ente/shared/components/LinkButton";
 import {
     generateAndSaveIntermediateKeyAttributes,
     saveKeyInSessionStore,

web/packages/accounts/pages/recover.tsx

@@ -7,9 +7,9 @@ import { PAGES } from "@/accounts/constants/pages";
 import { appHomeRoute, stashRedirect } from "@/accounts/services/redirect";
 import { sendOTT } from "@/accounts/services/user";
 import type { PageProps } from "@/accounts/types/page";
+import { LinkButton } from "@/base/components/LinkButton";
 import { sharedCryptoWorker } from "@/base/crypto";
 import log from "@/base/log";
-import LinkButton from "@ente/shared/components/LinkButton";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";

web/packages/accounts/pages/two-factor/recover.tsx

@@ -10,11 +10,11 @@ import {
     type TwoFactorType,
 } from "@/accounts/services/user";
 import type { AccountsContextT } from "@/accounts/types/context";
+import { LinkButton } from "@/base/components/LinkButton";
 import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { sharedCryptoWorker } from "@/base/crypto";
 import type { B64EncryptionResult } from "@/base/crypto/libsodium";
 import log from "@/base/log";
-import LinkButton from "@ente/shared/components/LinkButton";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";

web/packages/accounts/pages/two-factor/verify.tsx

@@ -1,6 +1,6 @@
 import { PAGES } from "@/accounts/constants/pages";
 import { verifyTwoFactor } from "@/accounts/services/user";
-import LinkButton from "@ente/shared/components/LinkButton";
+import { LinkButton } from "@/base/components/LinkButton";
 import { ApiError } from "@ente/shared/error";
 import {
     LS_KEYS,

web/packages/accounts/pages/verify.tsx

@@ -20,9 +20,9 @@ import type {
 import { getSRPAttributes } from "@/accounts/services/srp-remote";
 import { putAttributes, sendOTT, verifyEmail } from "@/accounts/services/user";
 import type { PageProps } from "@/accounts/types/page";
+import { LinkButton } from "@/base/components/LinkButton";
 import { LoadingIndicator } from "@/base/components/loaders";
 import log from "@/base/log";
-import LinkButton from "@ente/shared/components/LinkButton";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";

web/packages/base/components/LinkButton.tsx

@@ -0,0 +1,58 @@
+import { Link } from "@mui/material";
+import React from "react";
+import { type ButtonishProps } from "./mui";
+
+/**
+ * A button that looks like a link.
+ *
+ * The use of this component is not encouraged. It is only useful in uncommon
+ * cases where we do not have sufficient space to include a proper button.
+ */
+export const LinkButton: React.FC<React.PropsWithChildren<ButtonishProps>> = ({
+    onClick,
+    children,
+}) => (
+    <Link
+        component="button"
+        sx={(theme) => ({
+            color: "text.base",
+            textDecoration: "underline",
+            // The shortcut "text.faint" does not work with textDecorationColor
+            // (as of MUI v6).
+            textDecorationColor: theme.vars.palette.text.faint,
+            "&:hover": {
+                color: "accent.main",
+                textDecoration: "underline",
+                textDecorationColor: "accent.main",
+            },
+        })}
+        {...{ onClick }}
+    >
+        {children}
+    </Link>
+);
+
+/**
+ * A variant of {@link LinkButton} that does not show an underline, and instead
+ * uses a bolder font weight to indicate clickability.
+ *
+ * Similar caveats as {@link LinkButton} apply.
+ */
+export const LinkButtonUndecorated: React.FC<
+    React.PropsWithChildren<ButtonishProps>
+> = ({ onClick, children }) => (
+    <Link
+        component="button"
+        sx={{
+            textDecoration: "none",
+            color: "text.muted",
+            fontWeight: "medium",
+            "&:hover": {
+                color: "accent.main",
+            },
+        }}
+        {...{ onClick }}
+    >
+        {children}
+    </Link>
+);

web/packages/shared/components/LinkButton.tsx

@@ -1,27 +0,0 @@
-import { Link, type ButtonProps, type LinkProps } from "@mui/material";
-import React from "react";
-
-const LinkButton: React.FC<
-    LinkProps<"button", { color?: ButtonProps["color"] }>
-> = ({ children, sx, color, ...props }) => {
-    return (
-        <Link
-            component="button"
-            sx={{
-                color: "text.base",
-                textDecoration: "underline rgba(255, 255, 255, 0.4)",
-                "&:hover": {
-                    color: `${color}.main`,
-                    textDecoration: `underline `,
-                    textDecorationColor: `${color}.main`,
-                },
-                ...sx,
-            }}
-            {...props}
-        >
-            {children}
-        </Link>
-    );
-};
-
-export default LinkButton;