TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[web] Various UI tweaks (#3630)

Browse Source
This commit is contained in:
Manav Rathi
2024-10-08 21:16:11 +05:30
committed by GitHub
parent 8bc8ed95a9 692bb0221c
commit ad4f4e293c
47 changed files with 159 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/apps/accounts/src/pages/_app.tsx
View File

@@ -1,5 +1,6 @@
import { staticAppTitle } from "@/base/app";
import { CustomHead } from "@/base/components/Head";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { AppNavbar } from "@/base/components/Navbar";
import { setupI18n } from "@/base/i18n";
import { disableDiskLogs } from "@/base/log";
@@ -7,7 +8,6 @@ import { logUnhandledErrorsAndRejections } from "@/base/log-web";
import { Overlay } from "@ente/shared/components/Container";
import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { getTheme } from "@ente/shared/themes";
import { THEME_COLOR } from "@ente/shared/themes/constants";
import { CssBaseline } from "@mui/material";
@@ -71,7 +71,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
backgroundColor: theme.colors.background.base,
})}
>
<EnteSpinner />
<ActivityIndicator />
</Overlay>
)}
{showNavbar && <AppNavbar />}

25
web/apps/accounts/src/pages/passkeys/index.tsx
View File

@@ -5,7 +5,6 @@ import log from "@/base/log";
import { ensure } from "@/utils/ensure";
import { CenteredFlex } from "@ente/shared/components/Container";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import InfoItem from "@ente/shared/components/Info/InfoItem";
import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
import SingleInputForm from "@ente/shared/components/SingleInputForm";
import { formatDateTimeFull } from "@ente/shared/time/format";
@@ -303,15 +302,9 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
title={t("manage_passkey")}
onRootClose={onClose}
/>
<InfoItem
icon={<CalendarTodayIcon />}
title={t("CREATED_AT")}
caption={formatDateTimeFull(
passkey.createdAt / 1000,
)}
loading={false}
hideEditOption
/>
<CreatedAtEntry>
{formatDateTimeFull(passkey.createdAt / 1000)}
</CreatedAtEntry>
<MenuItemGroup>
<EnteMenuItem
onClick={() => {
@@ -348,6 +341,18 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
);
};
const CreatedAtEntry: React.FC<React.PropsWithChildren> = ({ children }) => (
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5, pb: 1 }}>
<CalendarTodayIcon color="secondary" sx={{ m: "16px" }} />
<Box py={0.5}>
<Typography>{t("CREATED_AT")}</Typography>
<Typography variant="small" color="text.muted">
{children}
</Typography>
</Box>
</Box>
);
interface RenamePasskeyDialogProps {
/** If `true`, then the dialog is shown. */
open: boolean;

4
web/apps/accounts/src/pages/passkeys/verify.tsx
View File

@@ -1,10 +1,10 @@
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
import log from "@/base/log";
import type { TwoFactorAuthorizationResponse } from "@/base/types/credentials";
import { ensure } from "@/utils/ensure";
import { nullToUndefined } from "@/utils/transform";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import InfoIcon from "@mui/icons-material/Info";
import KeyIcon from "@mui/icons-material/Key";
import { Paper, Typography, styled } from "@mui/material";
@@ -272,7 +272,7 @@ const redirectToURL = (url: URL) => {
const Loading: React.FC = () => {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
};

BIN
web/apps/auth/public/images/auth/192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
web/apps/auth/public/images/auth/256.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
web/apps/auth/public/images/auth/512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

39
web/apps/auth/public/manifest.json
View File

@@ -1,39 +0,0 @@
{
"short_name": "ente Auth",
"name": "ente Auth | encrypted 2FA app",
"icons": [
{
"src": "/images/auth/192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/auth/256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/images/auth/512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"background_color": "#191919",
"display": "standalone",
"scope": "/",
"theme_color": "#111",
"description": "Open-source 2FA app with end-to-end encrypted backups",
"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=io.ente.auth",
"id": "io.ente.photos"
},
{
"platform": "itunes",
"url": "https://apps.apple.com/in/app/ente-photos/id6444121398"
}
]
}

59
web/apps/auth/public/offline.html
View File

@@ -1,59 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>ente Auth</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
body {
background-color: #252525;
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
color: #fff;
}
nav {
background-color: #171717;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(0 0 0 / 70%) 0px 0px 5px;
}
nav > img {
height: 24px;
padding: 3px;
margin: 0 auto;
}
body > div {
flex: 1;
padding: 10px;
text-align: center;
max-width: 1000px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 auto;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<nav>
<img src="/images/ente.svg" />
</nav>
<div>
<h2>seems like you are offline :(</h2>
<span>please check your internet connection</span>
</div>
</body>
</html>

4
web/apps/auth/src/pages/_app.tsx
View File

@@ -2,6 +2,7 @@ import { accountLogout } from "@/accounts/services/logout";
import type { AccountsContextT } from "@/accounts/types/context";
import { clientPackageName, staticAppTitle } from "@/base/app";
import { CustomHead } from "@/base/components/Head";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { AppNavbar } from "@/base/components/Navbar";
import { setupI18n } from "@/base/i18n";
import {
@@ -12,7 +13,6 @@ import { ensure } from "@/utils/ensure";
import { Overlay } from "@ente/shared/components/Container";
import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { MessageContainer } from "@ente/shared/components/MessageContainer";
import { useLocalState } from "@ente/shared/hooks/useLocalState";
import HTTPService from "@ente/shared/network/HTTPService";
@@ -183,7 +183,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
backgroundColor: theme.colors.background.base,
})}
>
<EnteSpinner />
<ActivityIndicator />
</Overlay>
)}
{isI18nReady && (

6
web/apps/auth/src/pages/auth.tsx
View File

@@ -1,12 +1,12 @@
import { stashRedirect } from "@/accounts/services/redirect";
import { EnteLogo } from "@/base/components/EnteLogo";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { NavbarBase } from "@/base/components/Navbar";
import { ensure } from "@/utils/ensure";
import {
HorizontalFlex,
VerticallyCentered,
} from "@ente/shared/components/Container";
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { sessionExpiredDialogAttributes } from "@ente/shared/components/LoginComponents";
import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
@@ -68,7 +68,7 @@ const Page: React.FC = () => {
if (!hasFetched) {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
}

2
web/apps/auth/src/pages/share.tsx
View File

@@ -1,5 +1,5 @@
import { EnteLogo } from "@/base/components/EnteLogo";
import { decryptMetadataJSON_New } from "@/base/crypto";
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import React, { useEffect, useMemo, useState } from "react";
interface SharedCode {

4
web/apps/cast/src/pages/index.tsx
View File

@@ -1,5 +1,5 @@
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import log from "@/base/log";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { styled } from "@mui/material";
import { PairingCode } from "components/PairingCode";
import { useRouter } from "next/router";
@@ -102,7 +102,7 @@ const Container = styled("div")`
const Spinner: React.FC = () => (
<Spinner_>
<EnteSpinner />
<ActivityIndicator />
</Spinner_>
);

BIN
web/apps/photos/public/images/ente/192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
web/apps/photos/public/images/ente/256.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
web/apps/photos/public/images/ente/512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

59
web/apps/photos/public/offline.html
View File

@@ -1,59 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Ente Photos</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
body {
background-color: #252525;
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
color: #fff;
}
nav {
background-color: #171717;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(0 0 0 / 70%) 0px 0px 5px;
}
nav > img {
height: 24px;
padding: 3px;
margin: 0 auto;
}
body > div {
flex: 1;
padding: 10px;
text-align: center;
max-width: 1000px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 auto;
}
h2 {
margin-top: 0;
}
</style>
</head>
<body>
<nav>
<img src="/images/ente.svg" />
</nav>
<div>
<h2>seems like you are offline :(</h2>
<span>please check your internet connection</span>
</div>
</body>
</html>

4
web/apps/photos/src/components/Collections/AlbumCastDialog.tsx
View File

@@ -1,9 +1,9 @@
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { boxSeal } from "@/base/crypto/libsodium";
import log from "@/base/log";
import type { Collection } from "@/media/collection";
import { loadCast } from "@/new/photos/utils/chromecast-sender";
import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import SingleInputForm, {
type SingleInputFormProps,
} from "@ente/shared/components/SingleInputForm";
@@ -167,7 +167,7 @@ export const AlbumCastDialog: React.FC<AlbumCastDialogProps> = ({
{view == "auto" && (
<Stack sx={{ pt: 1, gap: 3, textAlign: "center" }}>
<div>
<EnteSpinner />
<ActivityIndicator />
</div>
<Typography>{t("choose_device_from_browser")}</Typography>
<Button color="secondary" onClick={() => setView("choose")}>

6
web/apps/photos/src/components/Collections/CollectionHeader.tsx
View File

@@ -1,4 +1,5 @@
import { assertionFailed } from "@/base/assert";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import log from "@/base/log";
import type { Collection } from "@/media/collection";
import { ItemVisibility } from "@/media/file-metadata";
@@ -12,7 +13,6 @@ import type {
CollectionSummaryType,
} from "@/new/photos/services/collection/ui";
import { HorizontalFlex } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import OverflowMenu, {
StyledMenu,
} from "@ente/shared/components/OverflowMenu/menu";
@@ -433,7 +433,7 @@ const QuickOptions: React.FC<QuickOptionsProps> = ({
)}
{showDownloadQuickOption(type) &&
(isDownloadInProgress() ? (
<EnteSpinner size="20px" sx={{ m: "12px" }} />
<ActivityIndicator size="20px" sx={{ m: "12px" }} />
) : (
<DownloadQuickOption
onClick={onDownloadClick}
@@ -554,7 +554,7 @@ const DownloadOption: React.FC<
<OverflowMenuOption
startIcon={
isDownloadInProgress && isDownloadInProgress() ? (
<EnteSpinner size="20px" sx={{ cursor: "not-allowed" }} />
<ActivityIndicator size="20px" sx={{ cursor: "not-allowed" }} />
) : (
<FileDownloadOutlinedIcon />
)

7
web/apps/photos/src/components/EnteSpinner.tsx
View File

@@ -1,7 +0,0 @@
import CircularProgress, {
type CircularProgressProps,
} from "@mui/material/CircularProgress";
export default function EnteSpinner(props: CircularProgressProps) {
return <CircularProgress color="accent" size={32} {...props} />;
}

2
web/apps/photos/src/components/GalleryEmptyState.tsx
View File

@@ -1,8 +1,8 @@
import { EnteLogo } from "@/base/components/EnteLogo";
import {
FlexWrapper,
VerticallyCentered,
} from "@ente/shared/components/Container";
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
import FolderIcon from "@mui/icons-material/FolderOutlined";
import { Box, Button, Stack, Typography, styled } from "@mui/material";

9
web/apps/photos/src/components/PhotoViewer/FileInfo/InfoItem.tsx
View File

@@ -1,7 +1,6 @@
import { FlexWrapper } from "@ente/shared/components/Container";
import Edit from "@mui/icons-material/Edit";
import { Box, IconButton, Typography } from "@mui/material";
import { SmallLoadingSpinner } from "../styledComponents/SmallLoadingSpinner";
import { Box, CircularProgress, IconButton, Typography } from "@mui/material";
interface Iprops {
icon: JSX.Element;
@@ -63,7 +62,11 @@ export default function InfoItem({
? customEndButton
: !hideEditOption && (
<IconButton onClick={openEditor} color="secondary">
{!loading ? <Edit /> : <SmallLoadingSpinner />}
{!loading ? (
<Edit />
) : (
<CircularProgress size={"24px"} color="inherit" />
)}
</IconButton>
)}
</FlexWrapper>

8
web/apps/photos/src/components/PhotoViewer/FileInfo/RenderCaption.tsx
View File

@@ -3,13 +3,12 @@ import { EnteFile } from "@/new/photos/types/file";
import { FlexWrapper } from "@ente/shared/components/Container";
import Close from "@mui/icons-material/Close";
import Done from "@mui/icons-material/Done";
import { Box, IconButton, TextField } from "@mui/material";
import { Box, CircularProgress, IconButton, TextField } from "@mui/material";
import { Formik } from "formik";
import { t } from "i18next";
import { useState } from "react";
import { changeCaption, updateExistingFilePubMetadata } from "utils/file";
import * as Yup from "yup";
import { SmallLoadingSpinner } from "../styledComponents/SmallLoadingSpinner";
export const MAX_CAPTION_SIZE = 5000;
@@ -103,7 +102,10 @@ export function RenderCaption({
<FlexWrapper justifyContent={"flex-end"}>
<IconButton type="submit" disabled={loading}>
{loading ? (
<SmallLoadingSpinner />
<CircularProgress
size={"18px"}
color="inherit"
/>
) : (
<Done />
)}

4
web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
View File

@@ -1,4 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { Titlebar } from "@/base/components/Titlebar";
import { EllipsizedTypography } from "@/base/components/Typography";
import { nameAndExtension } from "@/base/file";
@@ -29,7 +30,6 @@ import { EnteFile } from "@/new/photos/types/file";
import { formattedByteSize } from "@/new/photos/utils/units";
import CopyButton from "@ente/shared/components/CodeBlock/CopyButton";
import { FlexWrapper } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { getPublicMagicMetadataSync } from "@ente/shared/file-metadata";
import { formatDate, formatTime } from "@ente/shared/time/format";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
@@ -259,7 +259,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
title={t("DETAILS")}
caption={
!exif ? (
<EnteSpinner size={12} />
<ActivityIndicator size={12} />
) : !exif.tags ? (
t("no_exif")
) : (

4
web/apps/photos/src/components/PhotoViewer/index.tsx
View File

@@ -14,6 +14,7 @@ import {
} from "utils/file";
import { isDesktop } from "@/base/app";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { lowercaseExtension } from "@/base/file";
import { FileType } from "@/media/file-type";
import { isHEICExtension, needsJPEGConversion } from "@/media/formats";
@@ -22,7 +23,6 @@ import { extractRawExif, parseExif } from "@/new/photos/services/exif";
import type { LoadedLivePhotoSourceURL } from "@/new/photos/types/file";
import { fileLogID } from "@/new/photos/utils/file";
import { FlexWrapper } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import AlbumOutlined from "@mui/icons-material/AlbumOutlined";
import ChevronLeft from "@mui/icons-material/ChevronLeft";
import ChevronRight from "@mui/icons-material/ChevronRight";
@@ -799,7 +799,7 @@ function PhotoViewer(props: PhotoViewerProps) {
)}
/>
) : (
!isSourceLoaded && <EnteSpinner />
!isSourceLoaded && <ActivityIndicator />
)}
</Box>

10
web/apps/photos/src/components/PhotoViewer/styledComponents/SmallLoadingSpinner.tsx
View File

@@ -1,10 +0,0 @@
import EnteSpinner from "@ente/shared/components/EnteSpinner";
export const SmallLoadingSpinner = () => (
<EnteSpinner
style={{
width: "20px",
height: "20px",
}}
/>
);

6
web/apps/photos/src/components/Sidebar/index.tsx
View File

@@ -1,14 +1,14 @@
import { openAccountsManagePasskeysPage } from "@/accounts/services/passkey";
import { isDesktop } from "@/base/app";
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { EnteLogo } from "@/base/components/EnteLogo";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import log from "@/base/log";
import { savedLogs } from "@/base/log-web";
import { customAPIHost } from "@/base/origins";
import type { CollectionSummaries } from "@/new/photos/services/collection/ui";
import { initiateEmail, openURL } from "@/new/photos/utils/web";
import { SpaceBetweenFlex } from "@ente/shared/components/Container";
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
import RecoveryKey from "@ente/shared/components/RecoveryKey";
import ThemeSwitcher from "@ente/shared/components/ThemeSwitcher";
@@ -615,7 +615,7 @@ const HelpSection: React.FC = () => {
label={t("EXPORT")}
endIcon={
exportService.isExportInProgress() && (
<EnteSpinner size="20px" />
<ActivityIndicator size="20px" />
)
}
variant="secondary"

4
web/apps/photos/src/pages/_app.tsx
View File

@@ -1,6 +1,7 @@
import type { AccountsContextT } from "@/accounts/types/context";
import { clientPackageName, staticAppTitle } from "@/base/app";
import { CustomHead } from "@/base/components/Head";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { AppNavbar } from "@/base/components/Navbar";
import { setupI18n } from "@/base/i18n";
import log from "@/base/log";
@@ -21,7 +22,6 @@ import {
} from "@ente/shared/components/DialogBox/types";
import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { MessageContainer } from "@ente/shared/components/MessageContainer";
import { useLocalState } from "@ente/shared/hooks/useLocalState";
import HTTPService from "@ente/shared/network/HTTPService";
@@ -372,7 +372,7 @@ export default function App({ Component, pageProps }: AppProps) {
backgroundColor: theme.colors.background.base,
})}
>
<EnteSpinner />
<ActivityIndicator />
</Overlay>
)}
{isI18nReady && (

4
web/apps/photos/src/pages/deduplicate.tsx
View File

@@ -1,7 +1,7 @@
import { stashRedirect } from "@/accounts/services/redirect";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { getLocalFiles } from "@/new/photos/services/files";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
import { ApiError } from "@ente/shared/error";
import useMemoSingleThreaded from "@ente/shared/hooks/useMemoSingleThreaded";
@@ -170,7 +170,7 @@ export default function Deduplicate() {
if (!duplicates) {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
}

4
web/apps/photos/src/pages/gallery.tsx
View File

@@ -1,5 +1,6 @@
import { stashRedirect } from "@/accounts/services/redirect";
import { NavbarBase } from "@/base/components/Navbar";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { useIsMobileWidth } from "@/base/hooks";
import log from "@/base/log";
import type { Collection } from "@/media/collection";
@@ -42,7 +43,6 @@ import {
FlexWrapper,
HorizontalFlex,
} from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
import { getRecoveryKey } from "@ente/shared/crypto/helpers";
import { CustomError } from "@ente/shared/error";
@@ -1159,7 +1159,7 @@ export default function Gallery() {
/>
{blockingLoad && (
<LoadingOverlay>
<EnteSpinner />
<ActivityIndicator />
</LoadingOverlay>
)}
{isFirstLoad && (

6
web/apps/photos/src/pages/index.tsx
View File

@@ -1,10 +1,10 @@
import { Login } from "@/accounts/components/Login";
import { SignUp } from "@/accounts/components/SignUp";
import { EnteLogo } from "@/base/components/EnteLogo";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import log from "@/base/log";
import { albumsAppOrigin, customAPIHost } from "@/base/origins";
import { DevSettings } from "@/new/photos/components/DevSettings";
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
import { saveKeyInSessionStore } from "@ente/shared/crypto/helpers";
import localForage from "@ente/shared/storage/localForage";
@@ -120,7 +120,7 @@ export default function LandingPage() {
return (
<TappableContainer onMaybeChangeHost={refreshHost}>
{loading ? (
<EnteSpinner />
<ActivityIndicator />
) : (
<>
<SlideContainer>

58
web/apps/photos/src/pages/shared-albums.tsx
View File

@@ -1,3 +1,5 @@
import { EnteLogoSvg } from "@/base/components/EnteLogo";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { NavbarBase, SelectionBar } from "@/base/components/Navbar";
import { sharedCryptoWorker } from "@/base/crypto";
import { useIsMobileWidth, useIsTouchscreen } from "@/base/hooks";
@@ -17,7 +19,6 @@ import {
FluidContainer,
VerticallyCentered,
} from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
@@ -34,10 +35,9 @@ import DownloadIcon from "@mui/icons-material/Download";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import MoreHoriz from "@mui/icons-material/MoreHoriz";
import type { ButtonProps, IconButtonProps } from "@mui/material";
import { Box, Button, IconButton, Stack, Tooltip } from "@mui/material";
import { Box, Button, IconButton, Stack, styled, Tooltip } from "@mui/material";
import Typography from "@mui/material/Typography";
import bs58 from "bs58";
import { EnteLogo } from "components/EnteLogo";
import {
FilesDownloadProgress,
FilesDownloadProgressAttributes,
@@ -439,7 +439,7 @@ export default function PublicCollectionGallery() {
if (!publicFiles) {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
}
@@ -536,7 +536,7 @@ export default function PublicCollectionGallery() {
/>
{blockingLoad && (
<LoadingOverlay>
<EnteSpinner />
<ActivityIndicator />
</LoadingOverlay>
)}
<Uploader
@@ -581,39 +581,23 @@ interface SharedAlbumNavbarProps {
}
const SharedAlbumNavbar: React.FC<SharedAlbumNavbarProps> = ({
onAddPhotos,
}) => {
return (
<NavbarBase>
<FluidContainer>
<EnteLinkLogo />
</FluidContainer>
{onAddPhotos ? (
<AddPhotosButton onClick={onAddPhotos} />
) : (
<GoToEnte />
)}
</NavbarBase>
);
};
}) => (
<NavbarBase>
<FluidContainer>
<EnteLogoLink href="https://ente.io">
<EnteLogoSvg />
</EnteLogoLink>
</FluidContainer>
{onAddPhotos ? <AddPhotosButton onClick={onAddPhotos} /> : <GoToEnte />}
</NavbarBase>
);
const EnteLinkLogo: React.FC = () => {
return (
<a href="https://ente.io">
<Box
sx={(theme) => ({
":hover": {
cursor: "pointer",
svg: {
fill: theme.colors.text.faint,
},
},
})}
>
<EnteLogo />
</Box>
</a>
);
};
const EnteLogoLink = styled("a")(({ theme }) => ({
color: theme.colors.text.base,
":hover": {
color: theme.palette.accent.main,
},
}));
const AddPhotosButton: React.FC<ButtonProps & IconButtonProps> = (props) => {
const disabled = !uploadManager.shouldAllowNewUpload();

7
web/packages/accounts/components/two-factor/setup/QRMode.tsx
View File

@@ -1,9 +1,8 @@
import type { TwoFactorSecret } from "@/accounts/types/user";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { t } from "i18next";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import LinkButton from "@ente/shared/components/LinkButton";
import { Typography } from "@mui/material";
import { t } from "i18next";
import { LoadingQRCode, QRCode } from "../styledComponents";
interface Iprops {
@@ -20,7 +19,7 @@ export default function SetupQRMode({
<Typography>{t("TWO_FACTOR_QR_INSTRUCTION")}</Typography>
{!twoFactorSecret ? (
<LoadingQRCode>
<EnteSpinner />
<ActivityIndicator />
</LoadingQRCode>
) : (
<QRCode

6
web/packages/accounts/pages/credentials.tsx
View File

@@ -1,10 +1,10 @@
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { sharedCryptoWorker } from "@/base/crypto";
import type { B64EncryptionResult } from "@/base/crypto/libsodium";
import { clearLocalStorage } from "@/base/local-storage";
import log from "@/base/log";
import { ensure } from "@/utils/ensure";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import LinkButton from "@ente/shared/components/LinkButton";
import {
@@ -324,7 +324,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
if (!keyAttributes && !srpAttributes) {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
}
@@ -342,7 +342,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
if (!globalThis.electron) {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
}

4
web/packages/accounts/pages/generate.tsx
View File

@@ -5,10 +5,10 @@ import SetPasswordForm, {
import { PAGES } from "@/accounts/constants/pages";
import { configureSRP } from "@/accounts/services/srp";
import { generateKeyAndSRPAttributes } from "@/accounts/utils/srp";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import log from "@/base/log";
import { ensure } from "@/utils/ensure";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
import FormTitle from "@ente/shared/components/Form/FormPaper/Title";
@@ -98,7 +98,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
<>
{loading || !user ? (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
) : recoverModalView ? (
<RecoveryKey

4
web/packages/accounts/pages/login.tsx
View File

@@ -1,6 +1,6 @@
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { customAPIHost } from "@/base/origins";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
import { useRouter } from "next/router";
@@ -33,7 +33,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
return loading ? (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
) : (
<VerticallyCentered>

4
web/packages/accounts/pages/passkeys/finish.tsx
View File

@@ -1,8 +1,8 @@
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { fromB64URLSafeNoPaddingString } from "@/base/crypto/libsodium";
import log from "@/base/log";
import { nullToUndefined } from "@/utils/transform";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import {
LS_KEYS,
getData,
@@ -41,7 +41,7 @@ const Page: React.FC<PageProps> = () => {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
};

4
web/packages/accounts/pages/signup.tsx
View File

@@ -1,8 +1,8 @@
import { PAGES } from "@/accounts/constants/pages";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { customAPIHost } from "@/base/origins";
import { LS_KEYS, getData } from "@ente/shared//storage/localStorage";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
@@ -34,7 +34,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
return (
<VerticallyCentered>
{loading ? (
<EnteSpinner />
<ActivityIndicator />
) : (
<FormPaper>
<SignUp {...{ login, router, host }} />

6
web/packages/accounts/pages/verify.tsx
View File

@@ -1,8 +1,8 @@
import type { UserVerificationResponse } from "@/accounts/types/user";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import log from "@/base/log";
import { ensure } from "@/utils/ensure";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
import LinkButton from "@ente/shared/components/LinkButton";
@@ -172,7 +172,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
if (!email) {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
}
@@ -190,7 +190,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
if (!globalThis.electron) {
return (
<VerticallyCentered>
<EnteSpinner />
<ActivityIndicator />
</VerticallyCentered>
);
}

45
web/apps/photos/src/components/EnteLogo.tsx → web/packages/base/components/EnteLogo.tsx
View File

@@ -1,12 +1,53 @@
import { styled } from "@mui/material";
import React from "react";
interface EnteLogoProps {
/**
* The height of the logo image, in pixels.
*
* Default: 18px
*/
height?: number;
}
/**
* The Ente logo ("ente" in Montserrat).
*
* **This relies on the presence of images/ente.svg in the public folder.**
*
* This is meant as a standard img element that can be used in places where we
* need to show the Ente branding. The img is backed by an an SVG.
*
* @see {@link EnteLogoSvg} for a variant but visually similar component that
* uses an inline svg instead.
*
* The img has a default height of 18px, but can be customized using the
* {@link height} prop.
*
* The img also has a 3px vertical margin on both sides.
*/
export const EnteLogo: React.FC<EnteLogoProps> = ({ height }) => (
<LogoImage height={height ?? 18} alt="Ente" src="/images/ente.svg" />
);
const LogoImage = styled("img")`
margin: 3px 0;
vertical-align: middle;
`;
/**
* The Ente logo ("ente" in Montserrat), as an inline svg.
*
* Having it as an inline SVG has two advantages:
* - It does not rely on a corresponding asset in the public folder
* - It can be styled using CSS.
*/
export const EnteLogo: React.FC = () => (
export const EnteLogoSvg: React.FC = () => (
<svg
width="50"
height="26"
viewBox="0 0 43 13"
fill="#fff"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M6.102 12.144C4.998 12.144 4.026 11.928 3.186 11.496C2.358 11.064 1.716 10.476 1.26 9.732C0.804 8.976 0.576 8.118 0.576 7.158C0.576 6.186 0.798 5.328 1.242 4.584C1.698 3.828 2.316 3.24 3.096 2.82C3.876 2.388 4.758 2.172 5.742 2.172C6.69 2.172 7.542 2.376 8.298 2.784C9.066 3.18 9.672 3.756 10.116 4.512C10.56 5.256 10.782 6.15 10.782 7.194C10.782 7.302 10.776 7.428 10.764 7.572C10.752 7.704 10.74 7.83 10.728 7.95H2.862V6.312H9.252L8.172 6.798C8.172 6.294 8.07 5.856 7.866 5.484C7.662 5.112 7.38 4.824 7.02 4.62C6.66 4.404 6.24 4.296 5.76 4.296C5.28 4.296 4.854 4.404 4.482 4.62C4.122 4.824 3.84 5.118 3.636 5.502C3.432 5.874 3.33 6.318 3.33 6.834V7.266C3.33 7.794 3.444 8.262 3.672 8.67C3.912 9.066 4.242 9.372 4.662 9.588C5.094 9.792 5.598 9.894 6.174 9.894C6.69 9.894 7.14 9.816 7.524 9.66C7.92 9.504 8.28 9.27 8.604 8.958L10.098 10.578C9.654 11.082 9.096 11.472 8.424 11.748C7.752 12.012 6.978 12.144 6.102 12.144ZM18.5375 2.172C19.3055 2.172 19.9895 2.328 20.5895 2.64C21.2015 2.94 21.6815 3.408 22.0295 4.044C22.3775 4.668 22.5515 5.472 22.5515 6.456V12H19.7435V6.888C19.7435 6.108 19.5695 5.532 19.2215 5.16C18.8855 4.788 18.4055 4.602 17.7815 4.602C17.3375 4.602 16.9355 4.698 16.5755 4.89C16.2275 5.07 15.9515 5.352 15.7475 5.736C15.5555 6.12 15.4595 6.612 15.4595 7.212V12H12.6515V2.316H15.3335V4.998L14.8295 4.188C15.1775 3.54 15.6755 3.042 16.3235 2.694C16.9715 2.346 17.7095 2.172 18.5375 2.172ZM29.0568 12.144C27.9168 12.144 27.0288 11.856 26.3928 11.28C25.7568 10.692 25.4388 9.822 25.4388 8.67V0.174H28.2468V8.634C28.2468 9.042 28.3548 9.36 28.5708 9.588C28.7868 9.804 29.0808 9.912 29.4528 9.912C29.8968 9.912 30.2748 9.792 30.5868 9.552L31.3428 11.532C31.0548 11.736 30.7068 11.892 30.2988 12C29.9028 12.096 29.4888 12.144 29.0568 12.144ZM23.9448 4.692V2.532H30.6588V4.692H23.9448ZM37.4262 12.144C36.3222 12.144 35.3502 11.928 34.5102 11.496C33.6822 11.064 33.0402 10.476 32.5842 9.732C32.1282 8.976 31.9002 8.118 31.9002 7.158C31.9002 6.186 32.1222 5.328 32.5662 4.584C33.0222 3.828 33.6402 3.24 34.4202 2.82C35.2002 2.388 36.0822 2.172 37.0662 2.172C38.0142 2.172 38.8662 2.376 39.6222 2.784C40.3902 3.18 40.9962 3.756 41.4402 4.512C41.8842 5.256 42.1062 6.15 42.1062 7.194C42.1062 7.302 42.1002 7.428 42.0882 7.572C42.0762 7.704 42.0642 7.83 42.0522 7.95H34.1862V6.312H40.5762L39.4962 6.798C39.4962 6.294 39.3942 5.856 39.1902 5.484C38.9862 5.112 38.7042 4.824 38.3442 4.62C37.9842 4.404 37.5642 4.296 37.0842 4.296C36.6042 4.296 36.1782 4.404 35.8062 4.62C35.4462 4.824 35.1642 5.118 34.9602 5.502C34.7562 5.874 34.6542 6.318 34.6542 6.834V7.266C34.6542 7.794 34.7682 8.262 34.9962 8.67C35.2362 9.066 35.5662 9.372 35.9862 9.588C36.4182 9.792 36.9222 9.894 37.4982 9.894C38.0142 9.894 38.4642 9.816 38.8482 9.66C39.2442 9.504 39.6042 9.27 39.9282 8.958L41.4222 10.578C40.9782 11.082 40.4202 11.472 39.7482 11.748C39.0762 12.012 38.3022 12.144 37.4262 12.144Z" />

2
web/packages/base/components/Navbar.tsx
View File

@@ -1,5 +1,5 @@
import { EnteLogo } from "@/base/components/EnteLogo";
import { CenteredFlex, FlexWrapper } from "@ente/shared/components/Container";
import { EnteLogo } from "@ente/shared/components/EnteLogo";
import { styled } from "@mui/material";
import React from "react";

13
web/packages/base/components/mui/ActivityIndicator.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { CircularProgress, type CircularProgressProps } from "@mui/material";
import type React from "react";
/**
* A standard {@link CircularProgress} for use in our code.
*
* While it does take and forward props to the the underlying
* {@link CircularProgress}, if you find yourself needing to customize it too
* much, consider directly using a {@link CircularProgress} instead.
*/
export const ActivityIndicator: React.FC<CircularProgressProps> = (props) => (
<CircularProgress color="accent" size={32} {...props} />
);

4
web/packages/new/photos/components/MLSettings.tsx
View File

@@ -1,5 +1,6 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemGroup } from "@/base/components/Menu";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { Titlebar } from "@/base/components/Titlebar";
import log from "@/base/log";
import {
@@ -9,7 +10,6 @@ import {
mlStatusSubscribe,
type MLStatus,
} from "@/new/photos/services/ml";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
import {
Box,
@@ -143,7 +143,7 @@ export const MLSettings: React.FC<MLSettingsProps> = ({
const Loading: React.FC = () => {
return (
<Box textAlign="center" pt={4}>
<EnteSpinner />
<ActivityIndicator />
</Box>
);
};

4
web/packages/shared/components/CodeBlock/index.tsx
View File

@@ -1,4 +1,4 @@
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { type BoxProps, styled } from "@mui/material";
import React from "react";
import CopyButton from "./CopyButton";
@@ -12,7 +12,7 @@ export default function CodeBlock({ code, ...props }: BoxProps<"div", Iprops>) {
if (!code) {
return (
<Wrapper>
<EnteSpinner />
<ActivityIndicator />
</Wrapper>
);
}

23
web/packages/shared/components/EnteLogo.tsx
View File

@@ -1,23 +0,0 @@
import { styled } from "@mui/material";
import React from "react";
interface EnteLogoProps {
/**
* The height of the logo image.
*
* Default: 18
*/
height?: number;
}
export const EnteLogo: React.FC<EnteLogoProps> = ({ height }) => {
return (
<LogoImage height={height ?? 18} alt="logo" src="/images/ente.svg" />
);
};
const LogoImage = styled("img")`
margin: 3px 0;
pointer-events: none;
vertical-align: middle;
`;

7
web/packages/shared/components/EnteSpinner.tsx
View File

@@ -1,7 +0,0 @@
import CircularProgress, {
type CircularProgressProps,
} from "@mui/material/CircularProgress";
export default function EnteSpinner(props: CircularProgressProps) {
return <CircularProgress color="accent" size={32} {...props} />;
}

61
web/packages/shared/components/Info/InfoItem.tsx
View File

@@ -1,61 +0,0 @@
import { FlexWrapper } from "@ente/shared/components/Container";
import Edit from "@mui/icons-material/Edit";
import { Box, IconButton, Typography } from "@mui/material";
import { SmallLoadingSpinner } from "../styledComponents/SmallLoadingSpinner";
interface Iprops {
icon: JSX.Element;
title?: string;
caption?: string | JSX.Element;
openEditor?: any;
loading?: boolean;
hideEditOption?: any;
customEndButton?: any;
children?: any;
}
export default function InfoItem({
icon,
title,
caption,
openEditor,
loading,
hideEditOption,
customEndButton,
children,
}: Iprops): JSX.Element {
return (
<FlexWrapper justifyContent="space-between">
<Box display={"flex"} alignItems="flex-start" gap={0.5} pr={1}>
<IconButton
color="secondary"
sx={{ "&&": { cursor: "default", m: 0.5 } }}
disableRipple
>
{icon}
</IconButton>
<Box py={0.5}>
{children ? (
children
) : (
<>
<Typography sx={{ wordBreak: "break-all" }}>
{title}
</Typography>
<Typography variant="small" color="text.muted">
{caption}
</Typography>
</>
)}
</Box>
</Box>
{customEndButton
? customEndButton
: !hideEditOption && (
<IconButton onClick={openEditor} color="secondary">
{!loading ? <Edit /> : <SmallLoadingSpinner />}
</IconButton>
)}
</FlexWrapper>
);
}

10
web/packages/shared/components/styledComponents/SmallLoadingSpinner.tsx
View File

@@ -1,10 +0,0 @@
import EnteSpinner from "@ente/shared/components/EnteSpinner";
export const SmallLoadingSpinner = () => (
<EnteSpinner
style={{
width: "20px",
height: "20px",
}}
/>
);