style: add box shadow to the history items

PolkaGate · Sep 9, 2024 · d9e544f · d9e544f
1 parent 4cfda2a
commit d9e544f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/extension-polkagate/src/popup/history/modal/HistoryItemModal.tsx b/packages/extension-polkagate/src/popup/history/modal/HistoryItemModal.tsx
@@ -28,7 +28,7 @@ interface Props {
 export default function HistoryItemModal ({ anotherDay, date, decimal, formatted, info, setDetailInfo, setShowDetail, token }: Props): React.ReactElement {
   const { t } = useTranslation();
 
-  const _goToDetail = useCallback(() => {
+  const goToDetail = useCallback(() => {
     setDetailInfo(info);
     setShowDetail(true);
   }, [info, setDetailInfo, setShowDetail]);
@@ -58,9 +58,9 @@ export default function HistoryItemModal ({ anotherDay, date, decimal, formatted
         {date}
       </Grid>
       }
-      <Grid alignItems='center' container direction='column' item justifyContent='space-between' sx={{ '> .historyItems:last-child': { border: 'none' }, bgcolor: 'background.paper', borderRadius: '5px' }}>
+      <Grid alignItems='center' container item justifyContent='space-between' sx={{ '> .historyItems:last-child': { border: 'none' }, bgcolor: 'background.paper', borderRadius: '5px', boxShadow: '0px 0px 3px 2px rgba(0, 0, 0, 0.1)', mx: '3px', width: 'calc(100% - 6px)' }}>
         <Grid className='historyItems' container item py='5px' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}>
-          <Grid container item sx={{ fontSize: '22px', fontWeight: 300 }} px='10px' xs={11}>
+          <Grid container item px='10px' sx={{ fontSize: '22px', fontWeight: 300 }} xs={11}>
             <Grid container item justifyContent='space-between'>
               <Grid item>
                 {action}
@@ -82,14 +82,14 @@ export default function HistoryItemModal ({ anotherDay, date, decimal, formatted
               </Grid>
               <Grid item>
                 <Typography color={info.success ? 'green' : 'red'} fontSize='16px' fontWeight={400}>
-                  {info.success ? t<string>('Completed') : t<string>('Failed')}
+                  {info.success ? t('Completed') : t('Failed')}
                 </Typography>
               </Grid>
             </Grid>
           </Grid>
-          <Grid alignItems='center' container item sx={{ borderLeft: '1px solid', borderLeftColor: 'divider' }} xs={1}>
+          <Grid alignItems='center' container item justifyContent='center' sx={{ borderLeft: '1px solid', borderLeftColor: 'divider' }} xs={1}>
             <IconButton
-              onClick={_goToDetail}
+              onClick={goToDetail}
               sx={{ p: 0 }}
             >
               <ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '24px', stroke: '#BA2882', strokeWidth: 2 }} />

diff --git a/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx b/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx
@@ -58,7 +58,7 @@ export default function HistoryItem ({ anotherDay, chainName, date, decimal, for
          {date}
        </Grid>
       }
-      <Grid alignItems='center' container direction='column' item justifyContent='space-between' sx={{ '> .historyItems:last-child': { border: 'none' }, bgcolor: 'background.paper', borderRadius: '5px' }}>
+      <Grid alignItems='center' container direction='column' item justifyContent='space-between' sx={{ '> .historyItems:last-child': { border: 'none' }, bgcolor: 'background.paper', borderRadius: '5px', boxShadow: '0px 0px 3px 2px rgba(0, 0, 0, 0.1)', mx: '3px', width: 'calc(100% - 6px)' }}>
         <Grid className='historyItems' container item py='5px' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}>
           <Grid container item px='10px' sx={{ fontSize: '22px', fontWeight: 300 }} xs={11}>
             <Grid container item justifyContent='space-between'>