update dialog title with close button

src/components/Collections/AllCollections.tsx

@@ -25,6 +25,7 @@ import {
 import { useLocalState } from 'hooks/useLocalState';
 import { LS_KEYS } from 'utils/storage/localStorage';
 import DialogTitleWithCloseButton from 'components/MessageDialog/TitleWithCloseButton';
+import { DialogTitle } from '@mui/material';
 
 const LeftSlideTransition = Transition('up');
 
@@ -49,10 +50,12 @@ export default function AllCollections(props: Iprops) {
                 TransitionComponent={LeftSlideTransition}
                 onClose={close}
                 open={isOpen}>
-                <DialogTitleWithCloseButton onClose={close}>
+                <DialogTitleWithCloseButton onClose={close} sx={{ pb: 0 }}>
                     <Typography variant="h6">
                         <strong>{constants.ALL_ALBUMS}</strong>
                     </Typography>
+                </DialogTitleWithCloseButton>
+                <DialogTitle sx={{ pt: 0 }}>
                     <SpaceBetweenFlex>
                         <Typography variant="subtitle1">
                             {`${[...props.collectionSummaries.keys()].length} ${
@@ -64,7 +67,7 @@ export default function AllCollections(props: Iprops) {
                             setCollectionSortBy={setCollectionSortBy}
                         />
                     </SpaceBetweenFlex>
-                </DialogTitleWithCloseButton>
+                </DialogTitle>
                 <Divider />
                 <DialogContent>
                     <FlexWrapper>

src/components/MessageDialog/TitleWithCloseButton.tsx

@@ -1,26 +1,24 @@
 import React from 'react';
 import { DialogTitle, IconButton } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import { SpaceBetweenFlex } from 'components/Container';
 
 const DialogTitleWithCloseButton = (props) => {
     const { children, onClose, ...other } = props;
 
     return (
         <DialogTitle {...other}>
-            {children}
-            {onClose ? (
-                <IconButton
-                    aria-label="close"
-                    onClick={onClose}
-                    sx={{
-                        position: 'absolute',
-                        right: 8,
-                        top: 8,
-                        color: (theme) => theme.palette.grey[400],
-                    }}>
-                    <CloseIcon />
-                </IconButton>
-            ) : null}
+            <SpaceBetweenFlex>
+                {children}
+                {onClose && (
+                    <IconButton
+                        aria-label="close"
+                        onClick={onClose}
+                        sx={{ float: 'right' }}>
+                        <CloseIcon />
+                    </IconButton>
+                )}
+            </SpaceBetweenFlex>
         </DialogTitle>
     );
 };