src/web/layout/header.py

@@ -1,21 +1,49 @@
+from __future__ import annotations
+
 import dash_mantine_components as dmc
+from dash import dcc
 from dash import html
 
+title_element = dmc.Center(
+    children=[
+        html.H2(
+            children=[
+                'Visual Critical Discourse Analysis Tool',
+            ],
+        ),
+    ],
+)
+
+upload_button_element = dcc.Upload(
+    children=[
+        dmc.Button(
+            'upload images'.title(),
+            id='upload-button',
+            color='lime',
+            n_clicks=0,
+            variant='outline',
+            radius='sm',
+            size='md',
+        ),
+    ],
+    multiple=True,
+    id='upload-data',
+    accept='image/png,image/jpeg,image/jpg',
+)
 
 header_element = dmc.Header(
     height=80,
     children=[
-        dmc.Container(
+        dmc.Group(
             children=[
-                html.H2(
-                    children="Visual Critical Discourse Analysis Tool",
-                    style={
-                        "margin-left": "20px",
-                        "padding-top": "-5px"
-                    },
-                ),
+                title_element,
+                upload_button_element,
             ],
-            size="xl", px="xl",
+            position='apart',
+            style={
+                'margin': '10px',
+                'padding': '10px',
+            },
         ),
-    ]
+    ],
 )