From 765bce1f4956dcfee43b1f3edfa6b1f21f978eec Mon Sep 17 00:00:00 2001
From: nadijagraca <nadija_ratkusic_graca@external.mckinsey.com>
Date: Tue, 14 Nov 2023 13:10:08 +0100
Subject: [PATCH] improve left side css styling

---
 ...ija_ratkusic_graca_nav_panel_keyline_v2.md | 48 +++++++++++++++++++
 .../vizro/models/_navigation/_accordion.py    |  1 -
 vizro-core/src/vizro/models/_page.py          |  2 +-
 vizro-core/src/vizro/static/css/layout.css    | 10 +++-
 .../unit/vizro/models/_navigation/conftest.py |  2 -
 5 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 vizro-core/changelog.d/20231114_130850_nadija_ratkusic_graca_nav_panel_keyline_v2.md

diff --git a/vizro-core/changelog.d/20231114_130850_nadija_ratkusic_graca_nav_panel_keyline_v2.md b/vizro-core/changelog.d/20231114_130850_nadija_ratkusic_graca_nav_panel_keyline_v2.md
new file mode 100644
index 000000000..f1f65e73c
--- /dev/null
+++ b/vizro-core/changelog.d/20231114_130850_nadija_ratkusic_graca_nav_panel_keyline_v2.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index be00ff619..5dabc70f1 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -59,7 +59,6 @@ def build(self, *, active_page_id=None):
                     persistence_type="session",
                     always_open=True,
                 ),
-                html.Hr(),
             ],
             className="nav_panel",
             id="nav_panel_outer",
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index e8e0a8245..8d279d3bc 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -116,7 +116,7 @@ def build(self):
         self._update_graph_theme()
         controls_content = [control.build() for control in self.controls]
         control_panel = (
-            html.Div(children=[*controls_content, html.Hr()], className="control_panel", id="control_panel_outer")
+            html.Div(children=[*controls_content], className="control_panel", id="control_panel_outer")
             if controls_content
             else html.Div(hidden=True, id="control_panel_outer")
         )
diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css
index 26eb979f0..dd3b67d86 100644
--- a/vizro-core/src/vizro/static/css/layout.css
+++ b/vizro-core/src/vizro/static/css/layout.css
@@ -14,7 +14,7 @@
   padding: 40px 32px 0 32px;
   width: 352px;
   overflow: auto;
-  gap: var(--spacing-04);
+  gap: var(--spacing-08);
 }
 
 .right_side {
@@ -52,6 +52,10 @@
   flex-direction: column;
 }
 
+.nav_panel:not(:empty) {
+  border-bottom: 1px solid var(--border-subtle-alpha-01);
+}
+
 .control_panel {
   align-self: stretch;
   display: flex;
@@ -60,6 +64,10 @@
   padding: 4px 0 24px 0;
 }
 
+.control_panel:not(:empty) {
+  border-bottom: 1px solid var(--border-subtle-alpha-01);
+}
+
 .page_error_container {
   align-items: center;
   background: var(--surfaces-bg-03);
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
index 655ca768b..ce060e231 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
@@ -52,7 +52,6 @@ def accordion_from_page_as_list():
                 persistence_type="session",
                 always_open=True,
             ),
-            html.Hr(),
         ],
         className="nav_panel",
         id="nav_panel_outer",
@@ -90,7 +89,6 @@ def accordion_from_pages_as_dict():
                 persistence_type="session",
                 always_open=True,
             ),
-            html.Hr(),
         ],
         className="nav_panel",
         id="nav_panel_outer",