From c5ab6e7c663c5bd8efa0cf80c930b2d40d79f1a9 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Fri, 17 Jan 2025 10:24:39 +0530 Subject: [PATCH] Improve --- web/apps/photos/src/components/Export.tsx | 2 +- .../photos/src/components/ExportFinished.tsx | 2 +- .../src/components/PhotoViewer/FileInfo.tsx | 22 ++----- .../photos/src/components/Sidebar/index.tsx | 2 +- .../accounts/components/LoginComponents.tsx | 2 +- .../accounts/components/LoginContents.tsx | 2 +- .../accounts/components/SignUpContents.tsx | 2 +- .../components/two-factor/TwoFactorSetup.tsx | 2 +- web/packages/accounts/pages/change-email.tsx | 2 +- .../accounts/pages/change-password.tsx | 2 +- web/packages/accounts/pages/credentials.tsx | 2 +- web/packages/accounts/pages/generate.tsx | 2 +- web/packages/accounts/pages/recover.tsx | 2 +- .../accounts/pages/two-factor/recover.tsx | 2 +- .../accounts/pages/two-factor/verify.tsx | 2 +- web/packages/accounts/pages/verify.tsx | 2 +- web/packages/base/components/LinkButton.tsx | 58 +++++++++++++++++++ web/packages/shared/components/LinkButton.tsx | 27 --------- 18 files changed, 78 insertions(+), 59 deletions(-) create mode 100644 web/packages/base/components/LinkButton.tsx delete mode 100644 web/packages/shared/components/LinkButton.tsx diff --git a/web/apps/photos/src/components/Export.tsx b/web/apps/photos/src/components/Export.tsx index 5baf69abfa..ae3832b329 100644 --- a/web/apps/photos/src/components/Export.tsx +++ b/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 { diff --git a/web/apps/photos/src/components/ExportFinished.tsx b/web/apps/photos/src/components/ExportFinished.tsx index c1f4d791a4..3f13a8c2a5 100644 --- a/web/apps/photos/src/components/ExportFinished.tsx +++ b/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"; diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx index ff6442f17d..abf09d9803 100644 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx +++ b/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 = ({ {t("view_on_map")} ) : ( - {t("disable_map")} - + ) } trailingButton={ @@ -296,16 +291,9 @@ export const FileInfo: React.FC = ({ ) : !exif.tags ? ( t("no_exif") ) : ( - + {t("view_exif")} - + ) } /> diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 26267b0eb6..a99482de38 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/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"; diff --git a/web/packages/accounts/components/LoginComponents.tsx b/web/packages/accounts/components/LoginComponents.tsx index be5d601cb6..6d11553204 100644 --- a/web/packages/accounts/components/LoginComponents.tsx +++ b/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"; diff --git a/web/packages/accounts/components/LoginContents.tsx b/web/packages/accounts/components/LoginContents.tsx index c6d0338900..52be8050d0 100644 --- a/web/packages/accounts/components/LoginContents.tsx +++ b/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"; diff --git a/web/packages/accounts/components/SignUpContents.tsx b/web/packages/accounts/components/SignUpContents.tsx index 60dde34368..a56269062f 100644 --- a/web/packages/accounts/components/SignUpContents.tsx +++ b/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, diff --git a/web/packages/accounts/components/two-factor/TwoFactorSetup.tsx b/web/packages/accounts/components/two-factor/TwoFactorSetup.tsx index bdf12b4600..6bf48fb10e 100644 --- a/web/packages/accounts/components/two-factor/TwoFactorSetup.tsx +++ b/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"; diff --git a/web/packages/accounts/pages/change-email.tsx b/web/packages/accounts/pages/change-email.tsx index bc405e1e0a..cbf6618f9e 100644 --- a/web/packages/accounts/pages/change-email.tsx +++ b/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"; diff --git a/web/packages/accounts/pages/change-password.tsx b/web/packages/accounts/pages/change-password.tsx index a9edc3284b..d8cc197faa 100644 --- a/web/packages/accounts/pages/change-password.tsx +++ b/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, diff --git a/web/packages/accounts/pages/credentials.tsx b/web/packages/accounts/pages/credentials.tsx index abd3824995..4b92b116ad 100644 --- a/web/packages/accounts/pages/credentials.tsx +++ b/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"; diff --git a/web/packages/accounts/pages/generate.tsx b/web/packages/accounts/pages/generate.tsx index 86348280b8..609f6e82e8 100644 --- a/web/packages/accounts/pages/generate.tsx +++ b/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, diff --git a/web/packages/accounts/pages/recover.tsx b/web/packages/accounts/pages/recover.tsx index 6fbdc43e62..9c5c2a7540 100644 --- a/web/packages/accounts/pages/recover.tsx +++ b/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"; diff --git a/web/packages/accounts/pages/two-factor/recover.tsx b/web/packages/accounts/pages/two-factor/recover.tsx index 518a07a73d..071c713623 100644 --- a/web/packages/accounts/pages/two-factor/recover.tsx +++ b/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"; diff --git a/web/packages/accounts/pages/two-factor/verify.tsx b/web/packages/accounts/pages/two-factor/verify.tsx index ddaa7fa305..796187424a 100644 --- a/web/packages/accounts/pages/two-factor/verify.tsx +++ b/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, diff --git a/web/packages/accounts/pages/verify.tsx b/web/packages/accounts/pages/verify.tsx index 31a8fcd852..83a00e63bb 100644 --- a/web/packages/accounts/pages/verify.tsx +++ b/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"; diff --git a/web/packages/base/components/LinkButton.tsx b/web/packages/base/components/LinkButton.tsx new file mode 100644 index 0000000000..452b06783b --- /dev/null +++ b/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> = ({ + onClick, + children, +}) => ( + ({ + 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} + +); + +/** + * 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 +> = ({ onClick, children }) => ( + + {children} + +); diff --git a/web/packages/shared/components/LinkButton.tsx b/web/packages/shared/components/LinkButton.tsx deleted file mode 100644 index d7de467909..0000000000 --- a/web/packages/shared/components/LinkButton.tsx +++ /dev/null @@ -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 ( - - {children} - - ); -}; - -export default LinkButton;