From 95426cfff447c9c28ffd11528e1699a8ddb17117 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sat, 17 Mar 2018 12:29:58 +0100
Subject: [PATCH 1/6] Make it easier to see which tab is selected in the
 sidebar

---
 front/src/components/Sidebar.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 1db82454a..28022c639 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -181,11 +181,20 @@ $sidebar-color: #1B1C1D;
 }
 
 .menu-area {
-  padding: 0.5rem;
   .menu .item:not(.active):not(:hover) {
-    background-color: rgba(255, 255, 255, 0.06);
+    background-color: rgba(255, 255, 255, 0.15);
   }
 
+  .menu .item {
+    border-radius: 0;
+  }
+
+  .menu .item.active {
+    background-color: $sidebar-color;
+    &:hover {
+      background-color: $sidebar-color;      
+    }
+  }
 }
 .tabs {
   overflow-y: auto;

From 67d79743fe8759e3b402ebfc7de02c394a9cfe01 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sat, 17 Mar 2018 12:59:50 +0100
Subject: [PATCH 2/6] Make search wider

---
 front/src/components/Sidebar.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 28022c639..3980ab7d5 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -182,7 +182,7 @@ $sidebar-color: #1B1C1D;
 
 .menu-area {
   .menu .item:not(.active):not(:hover) {
-    background-color: rgba(255, 255, 255, 0.15);
+    opacity: 0.75;
   }
 
   .menu .item {
@@ -225,14 +225,27 @@ $sidebar-color: #1B1C1D;
 .logo {
   cursor: pointer;
   display: inline-block;
+  margin: 0px;
 }
 
 .ui.search {
-  display: block;
+  display: flex;
   .collapse.button {
     margin-right: 0.5rem;
     margin-top: 0.5rem;
     float: right;
   }
 }
+
+</style>
+
+<style lang="scss">
+.sidebar {
+  .ui.search .input {
+    flex: 1;
+    .prompt {
+      border-radius: 0;
+    }
+  }
+}
 </style>

From 4564a40ec408795a6366ee10a75111942a62a231 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sat, 17 Mar 2018 13:37:47 +0100
Subject: [PATCH 3/6] Make it even easier to understand which tab is selected
 in the sidebar

---
 front/src/components/Sidebar.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 3980ab7d5..7291d7f99 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -148,7 +148,7 @@ export default {
 <style scoped lang="scss">
 @import '../style/vendor/media';
 
-$sidebar-color: #1B1C1D;
+$sidebar-color: #3D3E3F;
 
 .sidebar {
 	background: $sidebar-color;
@@ -176,7 +176,8 @@ $sidebar-color: #1B1C1D;
     margin: 0;
     background-color: $sidebar-color;
   }
-  .menu {
+  .menu.vertical {
+    background: $sidebar-color;
   }
 }
 
@@ -192,7 +193,7 @@ $sidebar-color: #1B1C1D;
   .menu .item.active {
     background-color: $sidebar-color;
     &:hover {
-      background-color: $sidebar-color;      
+    background-color: rgba(255, 255, 255, 0.06);
     }
   }
 }

From 54f3dd0e46c98c398acbc408579d358b0c52b3b9 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sat, 17 Mar 2018 14:15:10 +0100
Subject: [PATCH 4/6] Make the style of the sidebar collapse button more
 coherent

---
 front/src/components/Sidebar.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 7291d7f99..3704dab75 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -159,7 +159,7 @@ $sidebar-color: #3D3E3F;
   }
   @include media(">desktop") {
     .collapse.button {
-      display: none;
+      display: none !important;
     }
   }
   @include media("<desktop") {
@@ -193,7 +193,7 @@ $sidebar-color: #3D3E3F;
   .menu .item.active {
     background-color: $sidebar-color;
     &:hover {
-    background-color: rgba(255, 255, 255, 0.06);
+      background-color: rgba(255, 255, 255, 0.06);
     }
   }
 }
@@ -231,10 +231,13 @@ $sidebar-color: #3D3E3F;
 
 .ui.search {
   display: flex;
-  .collapse.button {
-    margin-right: 0.5rem;
-    margin-top: 0.5rem;
-    float: right;
+
+  .collapse.button, .collapse.button:hover, .collapse.button:active {
+    box-shadow: none !important;
+    margin: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 }
 

From 7a87e2fc9496f2e7c2a096365f32fbd5ed5b5117 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sat, 17 Mar 2018 14:24:12 +0100
Subject: [PATCH 5/6] Add changelog

---
 changes/changelog.d/118.feature | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changes/changelog.d/118.feature

diff --git a/changes/changelog.d/118.feature b/changes/changelog.d/118.feature
new file mode 100644
index 000000000..a716f0146
--- /dev/null
+++ b/changes/changelog.d/118.feature
@@ -0,0 +1 @@
+Improve the style of the sidebar to make it easier to understand which tab is selected (#118)
\ No newline at end of file

From 521af32bf89105ff75d2fa313872792087980ee1 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sun, 18 Mar 2018 08:36:05 +0100
Subject: [PATCH 6/6] Fix the background of the radio message

---
 front/src/components/Sidebar.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 3704dab75..179ffedd7 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -241,6 +241,9 @@ $sidebar-color: #3D3E3F;
   }
 }
 
+.ui.message.black {
+  background: $sidebar-color;
+}
 </style>
 
 <style lang="scss">