hstack

web/apps/auth/src/pages/auth.tsx

@@ -10,16 +10,14 @@ import {
 import { isHTTP401Error } from "@/base/http";
 import log from "@/base/log";
 import { masterKeyFromSessionIfLoggedIn } from "@/base/session-store";
-import {
-    HorizontalFlex,
-    VerticallyCentered,
-} from "@ente/shared/components/Container";
+import { VerticallyCentered } from "@ente/shared/components/Container";
 import { AUTH_PAGES as PAGES } from "@ente/shared/constants/pages";
 import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
 import {
     Button,
     ButtonBase,
     Snackbar,
+    Stack,
     TextField,
     Typography,
     styled,
@@ -150,10 +148,10 @@ const AuthNavbar: React.FC = () => {
 
     return (
         <NavbarBase>
-            <HorizontalFlex flex={1} justifyContent={"center"}>
+            <Stack direction="row" flex={1} justifyContent={"center"}>
                 <EnteLogo />
-            </HorizontalFlex>
-            <HorizontalFlex position={"absolute"} right="24px">
+            </Stack>
+            <Stack direction="row" position={"absolute"} right="24px">
                 <OverflowMenu ariaID="auth-options">
                     <OverflowMenuOption
                         color="critical"
@@ -163,7 +161,7 @@ const AuthNavbar: React.FC = () => {
                         {t("logout")}
                     </OverflowMenuOption>
                 </OverflowMenu>
-            </HorizontalFlex>
+            </Stack>
         </NavbarBase>
     );
 };

web/apps/photos/src/components/Collections/CollectionHeader.tsx

@@ -27,7 +27,6 @@ import {
     isPinnedCollection,
 } from "@/new/photos/services/magic-metadata";
 import { useAppContext } from "@/new/photos/types/context";
-import { HorizontalFlex } from "@ente/shared/components/Container";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import EditIcon from "@mui/icons-material/Edit";
@@ -324,7 +323,7 @@ const CollectionOptions: React.FC<CollectionOptionsProps> = ({
     );
 
     return (
-        <HorizontalFlex sx={{ display: "inline-flex", gap: "16px" }}>
+        <Box sx={{ display: "inline-flex", gap: "16px" }}>
             <QuickOptions
                 collectionSummaryType={collectionSummaryType}
                 isDownloadInProgress={isActiveCollectionDownloadInProgress}
@@ -390,7 +389,7 @@ const CollectionOptions: React.FC<CollectionOptionsProps> = ({
                 onAscClick={changeSortOrderAsc}
                 onDescClick={changeSortOrderDesc}
             />
-        </HorizontalFlex>
+        </Box>
     );
 };
 

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

@@ -13,10 +13,7 @@ import { EnteFile } from "@/media/file";
 import { photosDialogZIndex } from "@/new/photos/components/utils/z-index";
 import { getLocalCollections } from "@/new/photos/services/collections";
 import { AppContext } from "@/new/photos/types/context";
-import {
-    CenteredFlex,
-    HorizontalFlex,
-} from "@ente/shared/components/Container";
+import { CenteredFlex } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import CloseIcon from "@mui/icons-material/Close";
@@ -38,6 +35,7 @@ import {
     CircularProgress,
     IconButton,
     Slider,
+    Stack,
     Tab,
     Tabs,
     Typography,
@@ -538,7 +536,8 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                         height: "100%",
                     }}
                 >
-                    <HorizontalFlex
+                    <Stack
+                        direction="row"
                         justifyContent={"space-between"}
                         alignItems={"center"}
                     >
@@ -552,7 +551,7 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                         >
                             <MenuIcon />
                         </IconButton>
-                    </HorizontalFlex>
+                    </Stack>
                     <Box
                         onMouseUp={handleDragEnd}
                         onMouseMove={isDragging ? handleDrag : null}
@@ -636,7 +635,7 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                     open={showControlsDrawer}
                     onClose={handleCloseWithConfirmation}
                 >
-                    <HorizontalFlex justifyContent={"space-between"}>
+                    <Stack direction="row" justifyContent={"space-between"}>
                         <IconButton
                             onClick={() => {
                                 setShowControlsDrawer(false);
@@ -647,8 +646,8 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                         <IconButton onClick={handleCloseWithConfirmation}>
                             <CloseIcon />
                         </IconButton>
-                    </HorizontalFlex>
-                    <HorizontalFlex gap="0.5rem" marginBottom="1rem">
+                    </Stack>
+                    <Stack direction="row" gap="0.5rem" marginBottom="1rem">
                         <Tabs
                             value={currentTab}
                             onChange={(_, value) => {
@@ -663,7 +662,7 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                                 disabled={transformationPerformed}
                             />
                         </Tabs>
-                    </HorizontalFlex>
+                    </Stack>
                     <MenuSectionTitle title={t("reset")} />
                     <MenuItemGroup
                         style={{

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

@@ -15,7 +15,6 @@ import { DialogCloseIconButton } from "@/new/photos/components/mui/Dialog";
 import { AppContext, useAppContext } from "@/new/photos/types/context";
 import {
     FlexWrapper,
-    HorizontalFlex,
     SpaceBetweenFlex,
     VerticallyCentered,
 } from "@ente/shared/components/Container";
@@ -251,7 +250,7 @@ const WatchEntry: React.FC<WatchEntryProps> = ({ watch, removeWatch }) => {
 
     return (
         <SpaceBetweenFlex>
-            <HorizontalFlex sx={{ overflow: "hidden" }}>
+            <Stack direction="row" sx={{ overflow: "hidden" }}>
                 {watch.collectionMapping === "root" ? (
                     <Tooltip title={t("UPLOADED_TO_SINGLE_COLLECTION")}>
                         <FolderOpenIcon />
@@ -265,7 +264,7 @@ const WatchEntry: React.FC<WatchEntryProps> = ({ watch, removeWatch }) => {
                     <EntryHeading watch={watch} />
                     <FolderPath>{watch.folderPath}</FolderPath>
                 </EntryContainer>
-            </HorizontalFlex>
+            </Stack>
             <EntryOptions {...{ confirmStopWatching }} />
         </SpaceBetweenFlex>
     );

web/apps/photos/src/pages/gallery.tsx

@@ -61,11 +61,7 @@ import {
 } from "@/new/photos/services/user-details";
 import { useAppContext } from "@/new/photos/types/context";
 import { splitByPredicate } from "@/utils/array";
-import {
-    CenteredFlex,
-    FlexWrapper,
-    HorizontalFlex,
-} from "@ente/shared/components/Container";
+import { CenteredFlex, FlexWrapper } from "@ente/shared/components/Container";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { getRecoveryKey } from "@ente/shared/crypto/helpers";
 import { CustomError } from "@ente/shared/error";
@@ -87,7 +83,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
 import MenuIcon from "@mui/icons-material/Menu";
 import type { ButtonProps, IconButtonProps } from "@mui/material";
-import { Box, Button, IconButton, Typography } from "@mui/material";
+import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
 import AuthenticateUserModal from "components/AuthenticateUserModal";
 import CollectionNamer, {
     CollectionNamerAttributes,
@@ -1201,9 +1197,10 @@ interface HiddenSectionNavbarContentsProps {
 const HiddenSectionNavbarContents: React.FC<
     HiddenSectionNavbarContentsProps
 > = ({ onBack }) => (
-    <HorizontalFlex
-        gap={"24px"}
+    <Stack
+        direction="row"
         sx={(theme) => ({
+            gap: "24px",
             width: "100%",
             background: theme.palette.background.default,
         })}
@@ -1214,7 +1211,7 @@ const HiddenSectionNavbarContents: React.FC<
         <FlexWrapper>
             <Typography>{t("section_hidden")}</Typography>
         </FlexWrapper>
-    </HorizontalFlex>
+    </Stack>
 );
 
 /**

web/packages/shared/components/Container.tsx

@@ -32,11 +32,7 @@ export const FluidContainer = styled(FlexWrapper)`
     flex: 1;
 `;
 
-export const HorizontalFlex = styled(Box)({
+export const VerticallyCenteredFlex = styled(Box)({
     display: "flex",
-});
-
-export const VerticallyCenteredFlex = styled(HorizontalFlex)({
     alignItems: "center",
-    display: "flex",
 });