update the upload sections

src/components/FileList.tsx

@@ -1,29 +1,24 @@
+import { Box, Tooltip } from '@mui/material';
 import React from 'react';
 import { FixedSizeList as List } from 'react-window';
-import styled from 'styled-components';
 
 interface Iprops {
     fileList: any[];
 }
 
-export const Wrapper = styled.div`
-    padding-left: 30px;
-    margin-top: 15px;
-    margin-bottom: 0px;
-`;
-
-const ItemLiWrapper = styled.li`
-    padding-left: 5px;
-    color: #ccc;
-`;
-
 export default function FileList(props: Iprops) {
     const Row = ({ index, style }) => (
-        <ItemLiWrapper style={style}>{props.fileList[index]}</ItemLiWrapper>
+        <Tooltip
+            title={props.fileList[index]}
+            placement="bottom-start"
+            enterDelay={300}
+            enterNextDelay={300}>
+            <div style={style}>{props.fileList[index]}</div>
+        </Tooltip>
     );
 
     return (
-        <Wrapper>
+        <Box pl={2}>
             <List
                 height={Math.min(35 * props.fileList.length, 160)}
                 width={'100%'}
@@ -31,6 +26,6 @@ export default function FileList(props: Iprops) {
                 itemCount={props.fileList.length}>
                 {Row}
             </List>
-        </Wrapper>
+        </Box>
     );
 }

src/components/UploadProgress/InProgressSection.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import FileList from 'components/FileList';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { SectionInfo, InProgressItemContainer } from './styledComponents';
+import { InProgressItemContainer } from './styledComponents';
 import { FileProgresses } from '.';
 import {
+    SectionInfo,
     UploadProgressSection,
     UploadProgressSectionContent,
     UploadProgressSectionTitle,
@@ -19,7 +20,7 @@ export const InProgressSection = (props: InProgressProps) => {
     const fileList = props.fileProgressStatuses ?? [];
 
     return (
-        <UploadProgressSection>
+        <UploadProgressSection defaultExpanded>
             <UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
                 {props.sectionTitle}
             </UploadProgressSectionTitle>

src/components/UploadProgress/ResultSection.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import FileList from 'components/FileList';
 import { Typography } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { SectionInfo, ResultItemContainer } from './styledComponents';
+import { ResultItemContainer } from './styledComponents';
 import { FileUploadResults } from 'constants/upload';
 import {
+    SectionInfo,
     UploadProgressSection,
     UploadProgressSectionContent,
     UploadProgressSectionTitle,

src/components/UploadProgress/inProgressSection.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import FileList from 'components/FileList';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { SectionInfo, InProgressItemContainer } from './styledComponents';
+import { InProgressItemContainer } from './styledComponents';
 import { FileProgresses } from '.';
 import {
+    SectionInfo,
     UploadProgressSection,
     UploadProgressSectionContent,
     UploadProgressSectionTitle,
@@ -19,7 +20,7 @@ export const InProgressSection = (props: InProgressProps) => {
     const fileList = props.fileProgressStatuses ?? [];
 
     return (
-        <UploadProgressSection>
+        <UploadProgressSection defaultExpanded>
             <UploadProgressSectionTitle expandIcon={<ExpandMoreIcon />}>
                 {props.sectionTitle}
             </UploadProgressSectionTitle>

src/components/UploadProgress/progressBar.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { LinearProgress, Divider } from '@mui/material';
+import { LinearProgress, Divider, Box } from '@mui/material';
 import { UPLOAD_STAGES } from 'constants/upload';
 
 export function UploadProgressBar({ uploadStage, now }) {
     return (
-        <>
+        <Box mb={2}>
             {(uploadStage === UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
                 uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA ||
                 uploadStage === UPLOAD_STAGES.UPLOADING) && (
@@ -18,6 +18,6 @@ export function UploadProgressBar({ uploadStage, now }) {
                 />
             )}
             <Divider />
-        </>
+        </Box>
     );
 }

src/components/UploadProgress/resultSection.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import FileList from 'components/FileList';
 import { Typography } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { SectionInfo, ResultItemContainer } from './styledComponents';
+import { ResultItemContainer } from './styledComponents';
 import { FileUploadResults } from 'constants/upload';
 import {
+    SectionInfo,
     UploadProgressSection,
     UploadProgressSectionContent,
     UploadProgressSectionTitle,

src/components/UploadProgress/section.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
-import MuiAccordionSummary, {
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
-    AccordionSummaryProps,
-} from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import { Typography, TypographyProps } from '@mui/material';
 
 export const UploadProgressSection = styled((props: AccordionProps) => (
     <MuiAccordion disableGutters elevation={0} square {...props} />
@@ -19,32 +17,21 @@ export const UploadProgressSection = styled((props: AccordionProps) => (
     },
 }));
 
-export const UploadProgressSectionTitle = styled(
+export const UploadProgressSectionTitle = styled(MuiAccordionSummary)(() => ({
-    (props: AccordionSummaryProps) => (
+    backgroundColor: 'rgba(255, 255, 255, .05)',
-        <MuiAccordionSummary
-            expandIcon={
-                <ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />
-            }
-            {...props}
-        />
-    )
-)(({ theme }) => ({
-    backgroundColor:
-        theme.palette.mode === 'dark'
-            ? 'rgba(255, 255, 255, .05)'
-            : 'rgba(0, 0, 0, .03)',
-    flexDirection: 'row-reverse',
-    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
-        transform: 'rotate(90deg)',
-    },
-    '& .MuiAccordionSummary-content': {
-        marginLeft: theme.spacing(1),
-    },
 }));
 
 export const UploadProgressSectionContent = styled(MuiAccordionDetails)(
     ({ theme }) => ({
         padding: theme.spacing(2),
-        borderTop: '1px solid rgba(0, 0, 0, .125)',
     })
 );
+
+export const SectionInfo = (props: TypographyProps) => (
+    <Typography
+        color={'text.secondary'}
+        variant="body2"
+        {...props}
+        sx={{ mb: 1 }}
+    />
+);

src/components/UploadProgress/styledComponents.tsx

@@ -16,10 +16,6 @@ export const Section = styled.div`
     margin: 20px 0;
     padding: 0 20px;
 `;
-export const SectionInfo = styled.div`
-    margin: 4px 0;
-    padding-left: 15px;
-`;
 
 export const SectionContent = styled.div`
     padding-right: 35px;

src/themes/darkThemeOptions.tsx

@@ -113,6 +113,13 @@ const darkThemeOptions = createTheme({
                 margin: 'dense',
             },
         },
+        MuiTooltip: {
+            styleOverrides: {
+                tooltipPlacementBottom: {
+                    marginTop: '0px !important',
+                },
+            },
+        },
     },
 
     palette: {

src/utils/strings/englishConstants.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import Link from '@mui/material/Link';
 import React from 'react';
 import styled from 'styled-components';
@@ -521,14 +521,12 @@ const englishConstants = {
     UPLOAD_FAILED: 'upload failed',
     ETAGS_BLOCKED: (url: string) => (
         <>
-            <p>
+            <Box mb={1}>
-                {' '}
+                We were unable to upload the following files because of your
-                we were unable to upload the following files because of your
                 browser configuration.
-            </p>
+            </Box>
-            <p>
+            <Box>
-                {' '}
+                Please disable any addons that might be preventing ente from
-                please disable any addons that might be preventing ente from
                 using <code>eTags</code> to upload large files, or use our{' '}
                 <a
                     href={url}
@@ -538,16 +536,12 @@ const englishConstants = {
                     desktop app
                 </a>{' '}
                 for a more reliable import experience.
-            </p>
+            </Box>
         </>
     ),
 
-    LIVE_PHOTOS_DETECTED: () => (
+    LIVE_PHOTOS_DETECTED:
-        <p>
+        'the photo and video files from your Live Photos have been merged into a single ELP file',
-            the photo and video files from your Live Photos have been merged
-            into a single ELP file
-        </p>
-    ),
 
     RETRY_FAILED: 'retry failed uploads',
     FAILED_UPLOADS: 'failed uploads ',