From ac90c759586a3090d825fdec2fb0cddfaa645f66 Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Tue, 30 Jan 2024 23:44:26 -0800
Subject: [PATCH] fix(frontend): better visualisation of current path on menu
 (#2122)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 .../MenuButton/MenuButton.module.scss         | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/frontend/lib/components/Menu/components/MenuButton/MenuButton.module.scss b/frontend/lib/components/Menu/components/MenuButton/MenuButton.module.scss
index ccd439b3cf3e..9fbb65f29e2f 100644
--- a/frontend/lib/components/Menu/components/MenuButton/MenuButton.module.scss
+++ b/frontend/lib/components/Menu/components/MenuButton/MenuButton.module.scss
@@ -10,6 +10,12 @@
   padding: Spacings.$spacing03;
   border-radius: 5px;
   overflow: hidden;
+  border-left: 2px solid transparent;
+
+  &.selected {
+    border-left: 2px solid Colors.$primary;
+    border-radius: 0 5px 5px 0;
+  }
 
   .left {
     display: flex;
@@ -35,18 +41,4 @@
   &:hover {
     background-color: Colors.$lightest-black;
   }
-
-  &.selected {
-    border-color: Colors.$accent;
-  }
-
-  &.gold {
-    &:hover {
-      border-color: Colors.$gold;
-    }
-
-    &.selected {
-      border-color: Colors.$gold;
-    }
-  }
 }