Improve map and layout

src/components/HomeView.jsx

@@ -12,16 +12,16 @@ const { Header, Content } = Layout;
 const { Option } = Select;
 
 let highlightInitial = {
-	bruges: '#00aa90',
-	ghent: '#00aa90',
-	antwerp: '#00aa90',
-	mechelen: '#00aa90',
-	tournai: '#00aa90',
-	brussels: '#00aa90',
-	mons: '#00aa90',
-	namur: '#00aa90',
-	liege: '#00aa90',
-	arlon: '#00aa90',
+	bruges: '#00856E',
+	ghent: '#00856E',
+	antwerp: '#00856E',
+	mechelen: '#00856E',
+	tournai: '#00856E',
+	brussels: '#00856E',
+	mons: '#00856E',
+	namur: '#00856E',
+	liege: '#00856E',
+	arlon: '#00856E',
 };
 
 function HomeView() {
@@ -113,7 +113,7 @@ function HomeView() {
 					// Add cities to highlight
 					let updatedgHighlighted = {};
 					data.path.forEach((city) => {
-						updatedgHighlighted[city.name] = '#E83015';
+						updatedgHighlighted[city.name] = '#E63318'; 
 					});
 
 					setHighlighted(updatedgHighlighted);
@@ -156,10 +156,9 @@ function HomeView() {
 						display: 'flex',
 						flexFlow: 'row wrap',
 						justifyContent: 'space-between',
-						alignItems: 'center',
 					}}
 				>
-					<div style={{ margin: '0 20px' }}>
+					<div style={{ margin: '150px 20px' }}>
 						<Section>
 							<h2>Starting Point</h2>
 							<div>
@@ -206,6 +205,16 @@ function HomeView() {
 							</Button>
 							{errorSelect.flag && <p>{errorSelect.message}</p>}
 						</Section>
+					</div>
+
+					<div>
+						{graph.nodes.length > 0 && (
+							<div>
+								<div style={{ width: '600px' }}>
+									<Map highlighted={highlighted} />
+								</div>
+							</div>
+						)}
 
 						{shortestPath && (
 							<Section>
@@ -227,14 +236,6 @@ function HomeView() {
 							</Section>
 						)}
 					</div>
-
-					{graph.nodes.length > 0 && (
-						<div>
-							<div style={{ width: '500px' }}>
-								<Map highlighted={highlighted} />
-							</div>
-						</div>
-					)}
 				</Main>
 			</Content>
 		</>
@@ -255,7 +256,7 @@ const InlineH1 = styled.h1`
 
 const Main = styled.main`
 	padding-top: 20px;
-	max-width: 1200px;
+	max-width: 1000px;
 	margin: 0 auto;
 `;
 

src/components/Map.jsx

@@ -11,10 +11,6 @@ export default function Map({ highlighted }) {
 					height: '500px',
 				}}
 			>
-				<SvgProxy
-					selector='.liege-namur, .namur-liege'
-					fill={highlighted.LN}
-				/>
 				<SvgProxy selector='.ghent' fill={highlighted.ghent} />
 				<SvgProxy selector='.brussels' fill={highlighted.brussels} />
 				<SvgProxy selector='.antwerp' fill={highlighted.antwerp} />