[Tidy] Remove redundant CSS and add updated bootstrap file (#931)

vizro-core/changelog.d/20241216_144313_huong_li_nguyen_remove_redundant_css.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/examples/scratch_dev/app.py

@@ -3,30 +3,24 @@
 from vizro import Vizro
 import vizro.plotly.express as px
 import vizro.models as vm
-from vizro.tables import dash_ag_grid
-import pandas as pd
+from vizro.tables import dash_data_table
 
-df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv")
-columnDefs = [
-    {"field": "athlete", "headerName": "The full Name of the athlete"},
-    {"field": "age", "headerName": "The number of Years since the athlete was born"},
-    {"field": "country", "headerName": "The Country the athlete was born in"},
-    {"field": "sport", "headerName": "The Sport the athlete participated in"},
-    {"field": "total", "headerName": "The Total number of medals won by the athlete"},
-]
+gapminder = px.data.gapminder()
 
-defaultColDef = {
-    "wrapHeaderText": True,
-    "autoHeaderHeight": True,
-}
+table = vm.Page(
+    title="Table",
+    components=[
+        vm.Table(
+            figure=dash_data_table(data_frame=gapminder, page_size=5),
+            title="Gapminder Data Insights",
+            header="""#### An Interactive Exploration of Global Health, Wealth, and Population""",
+            footer="""SOURCE: **Plotly gapminder data set, 2024**""",
+        )
+    ],
+)
 
 
-# Test app -----------------
-page = vm.Page(
-    title="Page Title",
-    components=[vm.AgGrid(figure=dash_ag_grid(df, columnDefs=columnDefs, defaultColDef=defaultColDef))],
-)
-dashboard = vm.Dashboard(pages=[page])
+dashboard = vm.Dashboard(pages=[table])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

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

@@ -29,6 +29,11 @@ All the HEX values starting with --text-code are taken from the Github code high
 }
 
 /* CARDS */
+.card {
+  height: 100%;
+  width: 100%;
+}
+
 .card .nav-link {
   height: 100%;
 }
@@ -71,3 +76,9 @@ To ensure the dynamic height adjustment and prevent scrolling, the height must b
 label[for="theme-selector"] {
   display: none;
 }
+
+/* This is currently required as the usage of dbc.NavBar automatically adds classNames such as `navbar-light` and
+`bg-light`, which come with an important tag from bootstrap. So we need below to overwrite these properties again. */
+.navbar {
+  background: var(--surfaces-bg02) !important;
+}

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

@@ -1,93 +1,38 @@
-#right-side .dash-cell {
-  height: 48px !important;
+#dashboard-container .dash-cell {
+  height: 3rem !important;
 }
 
-#right-side .dash-table-container {
-  padding-bottom: 12px;
-}
-
-#right-side
-  .dash-table-container
-  .dash-spreadsheet-container
-  .dash-spreadsheet-inner
-  th {
-  background-color: var(--right-side-bg);
-  color: var(--text-primary);
+#dashboard-container .dash-spreadsheet-inner th {
+  background-color: inherit;
   padding: 10px 0;
 }
 
-#right-side
-  .dash-table-container
-  .dash-spreadsheet-container
-  .dash-spreadsheet-inner
-  td {
-  background-color: var(--right-side-bg);
-  color: var(--text-primary);
-}
-
-#right-side
-  .dash-table-container
-  .dash-spreadsheet-container
-  .dash-spreadsheet-inner
-  table {
-  --hover: var(--right-side-bg);
-
-  width: 100%;
+#dashboard-container .dash-spreadsheet-inner td {
+  background-color: inherit;
 }
 
-#right-side
-  .dash-table-container
-  .dash-spreadsheet-container
-  .dash-spreadsheet-inner
-  td
-  .dash-cell-value.unfocused {
-  font-size: 14px;
+#dashboard-container .dash-spreadsheet-inner table {
+  --hover: inherit;
 }
 
-#right-side
-  .dash-table-container
-  .dash-spreadsheet-container
-  .dash-spreadsheet-inner
-  .column-header-name {
-  font-size: 14px;
+/* Styling for pagination element */
+#dashboard-container .first-page,
+#dashboard-container .previous-page,
+#dashboard-container .next-page,
+#dashboard-container .last-page {
+  background: inherit;
+  color: var(--text-secondary);
 }
 
-.dash-table-container .previous-next-container .page-number {
-  color: var(--text-primary);
-}
-
-#right-side .dash-table-container .previous-next-container {
-  font-size: 14px;
-  padding: 4px 0;
-}
-
-#right-side .dash-table-container .previous-next-container button,
-#right-side
-  .dash-table-container
-  .previous-next-container
-  .page-number
-  .current-page-container
-  .current-page-shadow,
-.dash-table-container
-  .previous-next-container
-  .page-number
-  .current-page-container
-  input.current-page {
-  background: transparent;
-  color: var(--text-primary);
-  font-size: 14px;
+#dashboard-container input.current-page,
+.table-container input.current-page::placeholder {
+  background: inherit;
+  color: var(--text-primary) !important;
 }
 
-#right-side
-  .dash-table-container
-  .previous-next-container
-  .page-number
-  .current-page-container
-  .current-page-shadow::placeholder,
-.dash-table-container
-  .previous-next-container
-  .page-number
-  .current-page-container
-  input.current-page::placeholder {
-  color: var(--text-primary) !important;
+#dashboard-container button.first-page:hover,
+#dashboard-container button.previous-page:hover,
+#dashboard-container button.next-page:hover,
+#dashboard-container button.last-page:hover {
+  color: var(--text-primaryHover) !important;
 }