Feature/Improving general UI

eu_fact_force/dash-app/app.py

@@ -29,35 +29,40 @@
 )
 
 # Dash params
-DASHBOARD_NAME = "EU Fact Force"
+DASHBOARD_NAME = "EU Health Fact Force"
 
 # Custom dash app tab and logo
 app.title = DASHBOARD_NAME
 app._favicon = "logo-eupha-u-blue.png"
 
 # App pages
 pages = {
-    "Readme": {"href": "/", "content": readme},
-    "Ingestion": {"href": "/ingest", "content": ingest},
-    "Graph": {"href": "/graph", "content": graph},
-    "PGP Dashboard": {"href": "/pgp", "content": pgp},
+    "Our purpose": {"href": "/", "content": readme},
+    "Upload your research": {"href": "/ingest", "content": ingest},
+    "Explore the science": {"href": "/graph", "content": graph},
+    "PGP Data integration": {"href": "/pgp", "content": pgp},
 }
 
 # Header and navigation
 nav_pages = [
     dbc.NavLink(
         page,
         href=pages[page]["href"],
-        style={"color": EUPHAColors.white},
+        style={
+            "color": EUPHAColors.white,
+            "font-weight": "500",
+            "font-family": "system-ui, -apple-system, sans-serif",
+            "margin": "0 5px"
+        },
         active="exact",
     )
     for page in pages
 ]
 
 nav_col = dbc.Col(
-    [dbc.Nav(nav_pages, vertical=False, pills=True, justified=True)],
-    width=4,
-    align="center",
+    [dbc.Nav(nav_pages, vertical=False, pills=True)],
+    width="auto",
+    className="d-flex justify-content-center", 
     style={"padding": "0rem"},
 )
 
@@ -69,9 +74,9 @@
                     [
                         html.Img(
                             src="assets/logo-eupha-white.png",
-                            alt="image",
-                            height=50,
-                            style={"padding-right": "10px"},
+                            alt="EUPHA logo",
+                            height=45,
+                            style={"padding-right": "15px"},
                         ),
                         html.H1(
                             DASHBOARD_NAME,
@@ -80,56 +85,61 @@
                                 "font-weight": "bold",
                                 "margin": "0",
                                 "padding": "0",
+                                "font-size": "24px", 
+                                "white-space": "nowrap", 
+                                "font-family": "system-ui, -apple-system, sans-serif"
                             },
                         ),
                     ],
                     style={
                         "display": "flex",
                         "alignItems": "center",
-                        "gap": "0px",
                     },
                 ),
-                width=4,
+                width="auto",
             ),
             nav_col,
             dbc.Col(
                 html.Div(
                     [
                         html.Img(
                             src="assets/logo-d4g.png",
-                            alt="image",
-                            height=50,
-                            style={"padding-right": "10px"},
+                            alt="Data for Good logo",
+                            height=45,
                         )
                     ],
                     style={
                         "display": "flex",
                         "alignItems": "center",
-                        "gap": "0px",
                     },
                 ),
-                width=4,
-                className="d-grid gap-2 d-md-flex justify-content-md-end",
+                width="auto",
+                className="d-flex justify-content-end",
             ),
         ],
         className="g-0",
+        align="center",
+        justify="between"
     ),
     style={
-        "padding": "1rem",
-        "background-color": EUPHAColors.dark_blue,
+        "padding": "15px 30px",
+        "background-color": EUPHAColors.primary,
         "position": "fixed",
+        "top": "O",
         "width": "100%",
         "zIndex": 1000,
+        "box-shadow": "0 4px 6px -1px rgba(0,0,0,0.1)"
     },
 )
 
 # Content
 content = html.Div(
     style={
-        "margin-left": "1rem",
-        "margin-right": "1rem",
+        "margin-left": "auto",
+        "margin-right": "auto",
+        "max-width": "1600px",
         "padding": "1rem",
-        "padding-top": "120px",
+        "padding-top": "110px",
     },
     id="page-content",
 )
@@ -221,7 +231,7 @@ def get_search_data(n_clicks, search_text):
             list(set(filters["authors"])),
             min(filters["date"]) if filters["date"] else None,
             max(filters["date"]) if filters["date"] else None,
-            list(set(filters["node_types"])),
+            list(set([x for x in filters["node_types"] if x not in ['chunk', 'author']])),
             list(set(filters["chunk_types"])),
             list(set(filters["keywords"])),
             list(set(filters["documents"])),
@@ -501,6 +511,7 @@ def toggle_offcanvas(node_data, is_open):
         ]
 
 
+
 # --------------------
 # Callbacks - Ingest
 # --------------------

eu_fact_force/dash-app/assets/custom.css

@@ -71,6 +71,36 @@ hr {
     background-color: var(--color-gray) !important;
 }
 
+/* Button (primary outline) */
+.btn-outline-primary {
+    border-color: var(--color-dark-blue) !important;
+    color: var(--color-dark-blue) !important;
+    background-color: transparent !important;
+}
+
+.btn-outline-primary:hover {
+    border-color: var(--color-dark-blue) !important;
+    color: var(--color-white) !important;
+    background-color: var(--color-dark-blue) !important;
+}
+
+.btn-outline-primary:active {
+    border-color: var(--color-dark-blue) !important;
+    color: var(--color-white) !important;
+    background-color: var(--color-dark-blue) !important;
+}
+
+.btn-outline-primary.active {
+    border-color: var(--color-dark-blue) !important;
+    color: var(--color-white) !important;
+    background-color: var(--color-dark-blue) !important;
+}
+
+.btn-outline-primary:disabled {
+    border-color: var(--color-gray) !important;
+    color: var(--color-gray) !important;
+    background-color: transparent !important;
+}
 
 /* Offcanevas */
 .offcanvas-header {