[Fix] Alignment of current download component when sidebar is collaps…

…ed (#2933)

Fix alignment of current download in collapsed sidebar

src/frontend/components/UI/Sidebar/components/CurrentDownload/index.scss

@@ -0,0 +1,40 @@
+.currentDownload {
+  font-size: var(--text-sm);
+  padding: var(--space-md) 0;
+  transition: 300ms;
+  margin-top: var(--space-sm);
+
+  & > .gameTitle {
+    font-size: var(--text-md);
+    transition: 600ms;
+    font-weight: var(--bold);
+  }
+
+  &:hover > .gameTitle {
+    color: var(--accent-overlay);
+    transition: 600ms;
+  }
+
+  .downloadStatus {
+    color: var(--success);
+    font-family: var(--secondary-font-family);
+    font-style: italic;
+    font-weight: normal;
+    font-size: var(--text-sm);
+    line-height: var(--text-sm);
+  }
+
+  .MuiLinearProgress-bar1Determinate {
+    background-color: var(--success);
+  }
+
+  .statusIcon {
+    display: none;
+    margin-inline-end: 10px;
+    svg {
+      width: 27px;
+      height: auto;
+      color: var(--success);
+    }
+  }
+}

src/frontend/components/UI/Sidebar/components/CurrentDownload/index.tsx

@@ -8,7 +8,7 @@ import Box from '@mui/material/Box'
 import { getGameInfo } from 'frontend/helpers'
 import { hasProgress } from 'frontend/hooks/hasProgress'
 import { Runner } from 'common/types'
-import './index.css'
+import './index.scss'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'frontend/state/ContextProvider'
 import Badge from '@mui/material/Badge'

src/frontend/components/UI/Sidebar/index.scss

@@ -147,10 +147,6 @@
   color: var(--accent-overlay);
 }
 
-.currentDownloads .statusIcon {
-  display: none;
-}
-
 .Sidebar.collapsed {
   .heroicVersion {
     margin: var(--space-sm);
@@ -166,6 +162,7 @@
   }
 
   .currentDownloads {
+    margin-inline: auto;
     .statusIcon {
       display: block;
     }