improve left side css styling

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))
+
+-->

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",

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")
         )

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);

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",