From 776c8bb013e8f83983741cd204fbe778415aba6b Mon Sep 17 00:00:00 2001
From: Ariel Juodziukynas <arieljuod@gmail.com>
Date: Thu, 3 Aug 2023 22:53:43 -0300
Subject: [PATCH] [Fix] Alignment of current download component when sidebar is
 collapsed (#2933)

Fix alignment of current download in collapsed sidebar
---
 .../components/CurrentDownload/index.css      | 36 -----------------
 .../components/CurrentDownload/index.scss     | 40 +++++++++++++++++++
 .../components/CurrentDownload/index.tsx      |  2 +-
 src/frontend/components/UI/Sidebar/index.scss |  5 +--
 4 files changed, 42 insertions(+), 41 deletions(-)
 delete mode 100644 src/frontend/components/UI/Sidebar/components/CurrentDownload/index.css
 create mode 100644 src/frontend/components/UI/Sidebar/components/CurrentDownload/index.scss

diff --git a/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.css b/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.css
deleted file mode 100644
index e8ea7c02b3..0000000000
--- a/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.currentDownload {
-  font-size: var(--text-sm);
-  padding: var(--space-md) 0;
-  transition: 300ms;
-  margin-top: var(--space-sm);
-}
-
-.currentDownload > .gameTitle {
-  font-size: var(--text-md);
-  transition: 600ms;
-  font-weight: var(--bold);
-}
-
-.currentDownload: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);
-}
-
-.currentDownload .MuiLinearProgress-bar1Determinate {
-  background-color: var(--success);
-}
-
-.statusIcon svg {
-  width: 27px;
-  height: auto;
-  color: var(--success);
-}
diff --git a/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.scss b/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.scss
new file mode 100644
index 0000000000..14375cd181
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.tsx b/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.tsx
index 3998574100..77ea259484 100644
--- a/src/frontend/components/UI/Sidebar/components/CurrentDownload/index.tsx
+++ b/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'
diff --git a/src/frontend/components/UI/Sidebar/index.scss b/src/frontend/components/UI/Sidebar/index.scss
index 127414658a..6da3432c6a 100644
--- a/src/frontend/components/UI/Sidebar/index.scss
+++ b/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;
     }