[Tidy] Replace custom classNames with BS utility CSS classes (#910)

vizro-core/changelog.d/20241202_150655_huong_li_nguyen_refactor_bs_example.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/_dashboard.py

@@ -308,31 +308,18 @@ def _make_page_404_layout(self):
         return html.Div(
             [
                 # Theme switch is added such that the 404 page has the same theme as the user-selected one.
-                html.Div(
-                    children=dbc.Switch(
-                        id="theme-selector",
-                        value=self.theme == "vizro_light",
-                        persistence=True,
-                        persistence_type="session",
-                    ),
-                    id="settings",
+                dbc.Switch(
+                    id="theme-selector",
+                    value=self.theme == "vizro_light",
+                    persistence=True,
+                    persistence_type="session",
                 ),
                 html.Img(src=f"data:image/svg+xml;base64,{error_404_svg}"),
-                html.Div(
-                    [
-                        html.Div(
-                            children=[
-                                html.H3("This page could not be found.", className="heading-3-600"),
-                                html.P("Make sure the URL you entered is correct."),
-                            ],
-                            className="error-text-container",
-                        ),
-                        dbc.Button(children="Take me home", href=get_relative_path("/")),
-                    ],
-                    className="error-content-container",
-                ),
+                html.H3("This page could not be found."),
+                html.P("Make sure the URL you entered is correct."),
+                dbc.Button(children="Take me home", href=get_relative_path("/"), className="mt-4"),
             ],
-            className="page-error-container",
+            className="d-flex flex-column align-items-center justify-content-center min-vh-100",
         )
 
     @staticmethod

vizro-core/src/vizro/static/css/layout.css

@@ -85,31 +85,6 @@
   border-bottom: 1px solid var(--border-subtleAlpha01);
 }
 
-.page-error-container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  justify-content: center;
-  width: 100vw;
-}
-
-.error-content-container {
-  align-items: center;
-  display: inline-flex;
-  flex-direction: column;
-  gap: 24px;
-  margin-top: -32px;
-}
-
-.error-text-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  text-align: center;
-  width: 336px;
-}
-
 .dashboard_title {
   display: flex;
   flex-direction: column;

vizro-core/tests/unit/vizro/models/test_dashboard.py

@@ -243,35 +243,20 @@ def test_make_page_404_layout(self, page_1, vizro_app):
         # vizro_app fixture is needed to avoid mocking out get_relative_path.
         expected = html.Div(
             [
-                html.Div(
-                    children=dbc.Switch(
-                        id="theme-selector",
-                        value=False,
-                        persistence=True,
-                        persistence_type="session",
-                    ),
-                    id="settings",
+                dbc.Switch(
+                    id="theme-selector",
+                    value=False,
+                    persistence=True,
+                    persistence_type="session",
                 ),
                 html.Img(),
-                html.Div(
-                    [
-                        html.Div(
-                            [
-                                html.H3("This page could not be found.", className="heading-3-600"),
-                                html.P("Make sure the URL you entered is correct."),
-                            ],
-                            className="error-text-container",
-                        ),
-                        dbc.Button("Take me home", href="/"),
-                    ],
-                    className="error-content-container",
-                ),
+                html.H3("This page could not be found."),
+                html.P("Make sure the URL you entered is correct."),
+                dbc.Button(children="Take me home", href="/", className="mt-4"),
             ],
-            className="page-error-container",
+            className="d-flex flex-column align-items-center justify-content-center min-vh-100",
         )
-
-        # Strip out src since it's too long to be worth comparing and just comes directly
-        # from reading a file.
+        # Strip out src since it's too long to be worth comparing and just comes directly from reading a file.
         assert_component_equal(vm.Dashboard(pages=[page_1])._make_page_404_layout(), expected, keys_to_strip={"src"})