From 1d508a8c07087d1ad8fdcf0955e49ac691cd335c Mon Sep 17 00:00:00 2001
From: Inga <inga-lovinde@noreply.oomza.cutegay.software>
Date: Fri, 17 Nov 2023 04:16:52 +0000
Subject: [PATCH] adjusted design

---
 src/routePlanner/index.tsx   |  3 +++
 src/routePlanner/markers.tsx | 23 ++++++++++-------------
 src/routePlanner/style.css   |  8 +++++++-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx
index 7d7e3af..0d188a1 100644
--- a/src/routePlanner/index.tsx
+++ b/src/routePlanner/index.tsx
@@ -15,6 +15,9 @@ export const RoutePlanner = () => {
 
     return (
         <section class="route-planner">
+            <section class="header">
+                <h2>Route builder</h2>
+            </section>
             <section class="markers">
                 <MarkersComponent
                     onMarkersReorder={reorderMarkers}
diff --git a/src/routePlanner/markers.tsx b/src/routePlanner/markers.tsx
index 7c05b04..0d1b11e 100644
--- a/src/routePlanner/markers.tsx
+++ b/src/routePlanner/markers.tsx
@@ -34,18 +34,15 @@ export const MarkersComponent = ({
     }, [listContainerRef, markers, onMarkersReorder]);
 
     return (
-        <>
-            <h3>Markers</h3>
-            <ol ref={listContainerRef}>
-                {markers.map((marker, i) => (
-                    <MarkerComponent
-                        key={marker.key}
-                        marker={marker}
-                        isFirst={i === 0}
-                        isLast={i === markers.length - 1}
-                    />
-                ))}
-            </ol>
-        </>
+        <ol ref={listContainerRef}>
+            {markers.map((marker, i) => (
+                <MarkerComponent
+                    key={marker.key}
+                    marker={marker}
+                    isFirst={i === 0}
+                    isLast={i === markers.length - 1}
+                />
+            ))}
+        </ol>
     );
 };
diff --git a/src/routePlanner/style.css b/src/routePlanner/style.css
index 43354f2..59d2a8d 100644
--- a/src/routePlanner/style.css
+++ b/src/routePlanner/style.css
@@ -4,12 +4,17 @@ section.route-planner {
 	column-gap: 1rem;
 	row-gap: 1rem;
 	grid-template-columns: 1fr 2fr;
-	grid-template-rows: 1fr min-content;
+	grid-template-rows: min-content 1fr min-content;
 	grid-template-areas:
+		"header map"
 		"markers map"
 		"export map";
 }
 
+section.route-planner > section.header {
+	grid-area: header;
+}
+
 section.route-planner > section.markers {
 	grid-area: markers;
 }
@@ -83,6 +88,7 @@ section.route-planner .map-container .leaflet-tooltip-pane .text {
 		grid-template-columns: 1fr;
 		grid-template-rows: 1fr min-content 2fr;
 		grid-template-areas:
+			"header"
 			"markers"
 			"export"
 			"map";