fix styling for downloading progress

src/components/common/DownloadTaskManager.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import {
   Box,
   Button,
+  Divider,
   LinearProgress,
   List,
   ListItem,
@@ -15,6 +16,7 @@ import { useNavigate } from 'react-router-dom';
 import { DownloadingLight } from '../../assets/svgs/DownloadingLight';
 import { DownloadedLight } from '../../assets/svgs/DownloadedLight';
 import { useAllResourceStatus } from 'qapp-core';
+import CheckIcon from '@mui/icons-material/Check';
 
 export const DownloadTaskManager: React.FC = () => {
   const theme = useTheme();
@@ -56,12 +58,12 @@ export const DownloadTaskManager: React.FC = () => {
       >
         {downloadInProgress ? (
           <DownloadingLight
-            height="24px"
-            width="24px"
+            height="35px"
+            width="35px"
             className="download-icon"
           />
         ) : (
-          <DownloadedLight height="24px" width="24px" />
+          <DownloadedLight height="35px" width="35px" />
         )}
       </Button>
 
@@ -102,10 +104,11 @@ export const DownloadTaskManager: React.FC = () => {
                     flexDirection: 'column',
                     width: '100%',
                     justifyContent: 'center',
-                    background: theme.palette.primary.main,
-                    color: theme.palette.text.primary,
                     cursor: 'pointer',
                     padding: '2px',
+                    '&:hover': {
+                      backgroundColor: theme.palette.action.hover,
+                    },
                   }}
                   onClick={() => {
                     navigate(download?.path);
@@ -133,16 +136,18 @@ export const DownloadTaskManager: React.FC = () => {
                         }}
                       />
                     </Box>
-                    <Typography
-                      sx={{
-                        color: theme.palette.text.primary,
-                      }}
-                      variant="caption"
-                    >
-                      {`${progress}%`}{' '}
-                      {status && status === 'REFETCHING' && '- refetching'}
-                      {status && status === 'DOWNLOADED' && '- building'}
-                    </Typography>
+                    {status === 'READY' ? (
+                      <CheckIcon />
+                    ) : (
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.primary,
+                        }}
+                        variant="caption"
+                      >
+                        {`${progress?.toFixed(1)}%`}{' '}
+                      </Typography>
+                    )}
                   </Box>
                   <Typography
                     sx={{
@@ -157,6 +162,7 @@ export const DownloadTaskManager: React.FC = () => {
                   >
                     {download?.filename}
                   </Typography>
+                  <Divider flexItem />
                 </ListItem>
               );
             })}

src/components/layout/Navbar/Navbar.tsx

@@ -95,8 +95,7 @@ const NavBar: React.FC<Props> = ({ allNames }) => {
             <PublishMenu isDisplayed={isSecure} />
 
             {isSecure && <Notifications />}
-
-            <DownloadTaskManager />
+            {!isSmall && <DownloadTaskManager />}
             {!isSmall && (
               <UserMenu
                 isShowMenu={isSecure}

src/components/layout/Sidenav/Sidenav.tsx

@@ -25,6 +25,7 @@ import { useMemo } from 'react';
 import { Spacer, useAuth } from 'qapp-core';
 import { useIsSmall } from '../../../hooks/useIsSmall';
 import { UserMenu } from '../Navbar/Components/UserMenu';
+import { DownloadTaskManager } from '../../common/DownloadTaskManager';
 const DRAWER_WIDTH = 240;
 export const COLLAPSED_WIDTH = 68;
 
@@ -225,6 +226,22 @@ export const Sidenav = ({ allNames }) => {
                     </Box>
                   </ListItem>
                   <Spacer height="10px" />
+                  <ListItem
+                    disablePadding
+                    sx={{ display: 'block', padding: '5px' }}
+                  >
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '100%',
+                        gap: '25px',
+                      }}
+                    >
+                      <DownloadTaskManager />
+                      <Typography>Downloads</Typography>
+                    </Box>
+                  </ListItem>
                   <Divider />
                 </>
               )}

src/index.css

@@ -232,7 +232,7 @@ a:focus {
     fill: #fff;
   }
   50% {
-    transform: scale(1.2);
+    transform: scale(1.1);
     fill: #3498db;
   }
   100% {