Refactor build methods (#252)

* Remove inline styling - delete build button - add new css for tabs

* add css and class name

* Remove style

* Move progress-bar to main-content - update classNames - max-width on main-content - remove redudant css - consier title size - remove inline styling (#253)

* Update after merge

* add width filepath input

src/datadoc/app.py

@@ -53,12 +53,12 @@ def build_app(app: type[Dash]) -> Dash:
             html.Header(
                 [
                     header,
-                    progress_bar,
                 ],
-                className="header-bar",
+                className="header-wrapper",
             ),
             html.Main(
                 [
+                    progress_bar,
                     build_controls_bar(),
                     variables_validation_error,
                     dataset_validation_error,
@@ -71,7 +71,7 @@ def build_app(app: type[Dash]) -> Dash:
                         children=tabs_children,
                     ),
                 ],
-                className="main-content",
+                className="main-content-app",
             ),
             build_language_dropdown(),
         ],

src/datadoc/assets/app_style.css

@@ -1,11 +1,10 @@
 .app-wrapper{
-
-        max-width: 1920px;
-        width: 100%;
-        margin: 0 auto;
+    width: 100%;
+    margin: 1rem 0;
 }
 
-.main-content{
+.main-content-app{
+    max-width: 1400px;
     width: 100%;
-    margin: 1rem;
+    margin: 3rem;
 }

src/datadoc/assets/control_bar_style.css

@@ -7,10 +7,14 @@
 }
 
 .ssb-input.file-path-input{
-    max-width: 1000px;
+    max-width: 1100px;
     width: 100%;
 }
 
 .ssb-btn.secondary-btn.file-open-button,.ssb-btn.secondary-btn.file-save-button{
     margin-top: 0.5rem;
 }
+
+.progress-bar-wrapper{
+    padding: 0;
+}

src/datadoc/assets/header.css

@@ -9,9 +9,6 @@
 .ssb-title.main-title {
     color: #274247;
     padding: 0;
-    border-bottom: 0;
-    font-family: 'Roboto Condensed', sans-serif !important;
-    font-stretch: condensed;
-    font-weight: bold;
     font-size: 2rem;
+    margin-left: 1rem;
 }

src/datadoc/assets/workspace_tab.css

@@ -0,0 +1,9 @@
+.ssb-tabs.navigation-item.workspace-tab-label{
+    margin: 0 1rem;
+    font-size: 1.2rem;
+
+}
+
+.workspace-tab{
+    padding: 1rem;
+}

src/datadoc/frontend/components/builders.py

@@ -57,10 +57,9 @@ def build_ssb_styled_tab(label: str, content: dbc.Container) -> dbc.Tab:
         label=label,
         # Replace all whitespace with dashes
         tab_id=re.sub(r"\s+", "-", label.lower()),
-        label_class_name="ssb-tabs navigation-item",
-        label_style={"marginLeft": "10px", "marginRight": "10px"},
-        style={"padding": "4px"},
+        label_class_name="ssb-tabs navigation-item workspace-tab-label",
         children=content,
+        className="workspace-tab",
     )
 
 
@@ -95,21 +94,6 @@ def build_ssb_alert(  # noqa: PLR0913 not immediately obvious how to improve thi
     )
 
 
-def build_ssb_button(text: str, icon_class: str, button_id: str) -> dbc.Button:
-    """Make a Dash Button according to SSBs Design System."""
-    return dbc.Button(
-        [
-            html.I(
-                className=icon_class,
-                style={"paddingRight": "10px"},
-            ),
-            f"   {text}",
-        ],
-        class_name="ssb-btn primary-btn",
-        id=button_id,
-    )
-
-
 def build_input_field_section(
     metadata_fields: list[VariablesFieldTypes],
     variable: model.Variable,

src/datadoc/frontend/components/control_bars.py

@@ -20,8 +20,8 @@
 )
 
 progress_bar = dbc.CardBody(
-    style={"padding": "4px"},
     children=[dbc.Progress(id="progress-bar", color=COLORS["green_4"], value=40)],
+    className="progress-bar-wrapper",
 )