Improve styling

src/App.js

@@ -1,22 +1,12 @@
 import React from 'react';
-import { Layout } from 'antd';
 import HomeView from './components/HomeView';
-import 'antd/dist/antd.css';
-import styled from 'styled-components';
 
 function App() {
   return (
-    <MainSection>
-      <h1>Dijkstra</h1>
-      <p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
+    <>
       <HomeView/>
-    </MainSection>
+    </>
   );
 }
 
 export default App;
-
-const MainSection = styled.main`
-  max-width: 800px;
-  margin: 0 auto;
-`

src/components/HomeView.jsx

@@ -1,13 +1,16 @@
-import React, { useState ,useEffect } from "react";
+import React, { useState ,useEffect } from 'react';
 import { fetchRoads, fetchCities, getShortestPath } from './requests';
 import { Select, Button, Icon } from 'antd';
-import Graph from "react-graph-vis";
+import Graph from 'react-graph-vis';
+import styled from 'styled-components';
+import 'antd/dist/antd.css';
+import arrow from '../assets/arrow-right.png';
 
 const { Option } = Select;
 
 function HomeView() {
-    const [startingPoint, setStartingPoint] = useState();
-    const [destination, setDestination] = useState();
+    const [startingPoint, setStartingPoint] = useState(1);
+    const [destination, setDestination] = useState(9);
     const [errorSelect, setError] = useState({ message: '', flag: false });
     const [shortestPath, setShortestPath] = useState();
     
@@ -33,7 +36,7 @@ function HomeView() {
         ));
 
         let edges = roads.map(edge => (
-            { from: edge.start_city_id, to: edge.end_city_id, length: edge.distance }
+            { from: edge.start_city_id, to: edge.end_city_id, length: edge.distance * 2 }
         ))
 
         setGraph({nodes, edges})
@@ -69,6 +72,7 @@ function HomeView() {
 
     function handleSubmit() {
         if (startingPoint === destination) {
+            setError({ message: 'Please select a start and a destination', flag: true});
             return
         } else 
         if (startingPoint && destination) {
@@ -117,14 +121,16 @@ function HomeView() {
     // setGraph({...graph, edges: updatedEdges});
 
     return(
-        <main>
-            <section>
-                <h2>Select Starting Point</h2>
+        <Main>
+            <h1>Dijkstra</h1>
+            <p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
+            <Section>
+                <h2>Starting Point</h2>
                 <div>
-                    <Select defaultValue="Belgium"  disabled>
-                    </Select>
+                    <StyledSelect defaultValue="Belgium"  disabled>
+                    </StyledSelect>
                     <Select 
-                        defaultValue="Choose a city"
+                        defaultValue="Select a city"
                         onChange={handleStart}
                         style={{ width: 139 }}
                     >
@@ -133,14 +139,14 @@ function HomeView() {
                         ))}
                     </Select>
                 </div>
-            </section>
-            <section>
-                <h2>Select Destination</h2>
+            </Section>
+            <Section>
+                <h2>Destination</h2>
                 <div>
-                    <Select defaultValue="Belgium"  disabled>
-                    </Select>
+                    <StyledSelect defaultValue="Belgium"  disabled>
+                    </StyledSelect>
                     <Select
-                        defaultValue="Choose a city"
+                        defaultValue="Select a city"
                         onChange={handleDestination}
                         style={{ width: 139 }}
                     >
@@ -149,8 +155,8 @@ function HomeView() {
                         ))}
                     </Select>
                 </div>
-            </section>
-            <section>
+            </Section>
+            <Section>
                 <Button
                     type="primary"
                     onClick={handleSubmit}
@@ -161,17 +167,17 @@ function HomeView() {
                 {errorSelect.flag &&
                 <p>{errorSelect.message}</p>
                 }
-            </section>
+            </Section>
             {
             shortestPath && 
-            <section>
+            <Section>
                 <h2>Shortest path from {startingPoint.name} to {destination.name} ({shortestPath.distance}km)</h2>
-                <div>{shortestPath.path.map(city => (
-                    <p key={city.id}><Icon type="right" /><span>{city.name}</span></p>
+                <StyledP>{shortestPath.path.map(city => (
+                    <StyledSpan key={city.id} class="cityPath">{city.name}</StyledSpan>
                     ))}
-                </div>
+                </StyledP>
 
-            </section>
+            </Section>
             }
             { graph.nodes.length > 0 &&
 
@@ -184,8 +190,47 @@ function HomeView() {
                 }}
                 />
             }
-        </main>
+        </Main>
     );
 }
 
 export default HomeView
+
+const Main = styled.main`
+    padding-top: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+`
+
+const Section = styled.section`
+    margin: 20px 0;
+`
+
+const StyledSelect = styled(Select)`
+    margin-right:10px;
+`
+
+const StyledSpan = styled.span`
+    ::after {
+        content: "";
+        background-image: url(${arrow});
+        background-size: 13px 17px;
+        display: inline-block;
+        width: 13px;
+        height: 17px;
+        margin-right: 10px;
+        margin-left: 10px;
+        padding-top: 10px;
+        bottom: -10px;
+    }
+    font-size:1.5rem;
+    color: #40a9ff;
+`
+
+const StyledP = styled.p`
+    span:last-child {
+        ::after {
+            background-image: none;
+        }
+    }
+`