fix: shared files layout improvements (#1669)

* fix: prevent share icon from overlapping file name * fix: add top margin to confirmation dialog * fix: add styling for fallback icon
techmatters · Mar 27, 2024 · 2eec5ad · 2eec5ad
1 parent 8129795
commit 2eec5ad
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 12 deletions.
diff --git a/src/common/components/ConfirmationDialog.js b/src/common/components/ConfirmationDialog.js
@@ -57,7 +57,11 @@ const ConfirmationDialog = props => {
       aria-labelledby="confirmation-dialog-title"
       aria-describedby="confirmation-dialog-content-text"
     >
-      <DialogTitle component="h1" id="confirmation-dialog-title">
+      <DialogTitle
+        component="h1"
+        id="confirmation-dialog-title"
+        sx={{ marginTop: { xs: 2, md: 0 } }}
+      >
         {title}
       </DialogTitle>
       <DialogContent>

diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js
@@ -42,7 +42,7 @@ import theme from 'theme';
 export const ICON_SIZE = 24;
 
 const StackRow = props => (
-  <Stack direction="row" alignItems="center" spacing={1} {...props} />
+  <Stack direction="row" alignItems="center" {...props} />
 );
 
 const SharedDataEntryBase = props => {
@@ -169,14 +169,21 @@ const SharedDataEntryBase = props => {
         container
         spacing={1}
         alignItems="center"
-        sx={{ fontSize: 14, color: 'gray.dark1', p: 1 }}
+        sx={{
+          fontSize: 14,
+          color: 'gray.dark1',
+          p: 1,
+        }}
       >
         <Grid
           item
-          xs={isEditingName ? 12 : 8}
+          xs={isEditingName ? 12 : 7}
           md={5}
           order={{ xs: 2, md: 2 }}
           component={StackRow}
+          sx={{
+            alignItems: 'flex-start',
+          }}
         >
           <EntryTypeIcon resourceType={dataEntry.resourceType} />
           <Restricted
@@ -235,7 +242,7 @@ const SharedDataEntryBase = props => {
 
         <Grid
           item
-          xs={4}
+          xs={5}
           md={2}
           order={{ xs: 3, md: 6 }}
           component={StackRow}

diff --git a/src/sharedData/components/SharedDataEntryFile.js b/src/sharedData/components/SharedDataEntryFile.js
@@ -356,7 +356,21 @@ const SharedDataEntryFile = props => {
   return (
     <SharedDataEntryBase
       sharedResource={sharedResource}
-      EntryTypeIcon={SharedFileIcon}
+      EntryTypeIcon={() => (
+        <SharedFileIcon
+          resourceType={sharedResource.dataEntry.resourceType}
+          styleProps={{
+            marginTop: '0.8em',
+            marginLeft: '-5px',
+            paddingRight: '5px',
+          }}
+          fallbackStyleProps={{
+            marginTop: '0.5em',
+            marginLeft: '-5px',
+            paddingRight: '5px',
+          }}
+        />
+      )}
       DownloadComponent={DownloadComponent}
       ShareComponent={ShareComponent}
       fileSize={filesize(sharedResource.dataEntry.size, { round: 0 })}

diff --git a/src/sharedData/components/SharedDataEntryLink.js b/src/sharedData/components/SharedDataEntryLink.js
@@ -82,7 +82,15 @@ const SharedDataEntryLink = props => {
     <SharedDataEntryBase
       sharedResource={sharedResource}
       EntryTypeIcon={() => (
-        <LinkIcon alt={t('sharedData.link_label')} role="img" />
+        <LinkIcon
+          alt={t('sharedData.link_label')}
+          role="img"
+          sx={{
+            marginTop: '0.6em',
+            marginLeft: '-3px',
+            paddingRight: '3px',
+          }}
+        />
       )}
       DownloadComponent={DownloadComponent}
       info={domain}

diff --git a/src/sharedData/components/SharedFileIcon.js b/src/sharedData/components/SharedFileIcon.js
@@ -17,6 +17,7 @@
 import React from 'react';
 import _ from 'lodash/fp';
 import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
+import { Box } from '@mui/material';
 
 const ICON_SIZE = 24;
 const ICON_FILES = {
@@ -39,13 +40,17 @@ const ICON_FILES = {
   png: 'png.png',
 };
 
-const SharedFileIcon = ({ resourceType }) => {
+const SharedFileIcon = ({ resourceType, styleProps, fallbackStyleProps }) => {
   if (_.includes(resourceType, Object.keys(ICON_FILES))) {
     return (
-      <img
-        style={{ filter: 'opacity(50%)' }}
-        width="24"
-        height="24"
+      <Box
+        component="img"
+        sx={{
+          filter: 'opacity(50%)',
+          width: 24,
+          height: 24,
+          ...styleProps,
+        }}
         src={`/files/${ICON_FILES[resourceType]}`}
         alt={resourceType.toUpperCase()}
       />
@@ -57,6 +62,7 @@ const SharedFileIcon = ({ resourceType }) => {
       sx={{
         fontSize: ICON_SIZE,
         color: 'gray.dark1',
+        ...fallbackStyleProps,
       }}
     />
   );