made things look better

src/Components/HistoryBox/HistoryBox.js

@@ -11,8 +11,8 @@ import DeleteIcon from '@material-ui/icons/Delete';
 const styles = {
  historyMenu:{
    position: "absolute",
-   right: "5%",
-   top: "2%",
+   left: "2%",
+   top: "10%",
    borderRadius: "3px",
    height: "250px",
    width: "150px",

src/Components/SideDrawer/SideDrawer.js

@@ -34,21 +34,21 @@ const rydsCentrumLine1 = [
 
 //rydsCentrumLine1[0].smallestP
 const rydsCentrum = [
-{line: '1', smallestP: "10%", lineDetails: rydsCentrumLine1},
-{line: '4', smallestP: "20%", lineDetails: rydsCentrumLine1},
-{line: '2', smallestP: "35%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
-{line: '3', smallestP: "56%", lineDetails: rydsCentrumLine1}
+{lineName: '1', smallestP: "10%", lineDetails: rydsCentrumLine1},
+{lineName: '4', smallestP: "20%", lineDetails: rydsCentrumLine1},
+{lineName: '2', smallestP: "35%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1},
+{lineName: '3', smallestP: "56%", lineDetails: rydsCentrumLine1}
 ];
 
 class sideDrawer extends React.PureComponent {
@@ -69,7 +69,7 @@ class sideDrawer extends React.PureComponent {
 
       savedLines: [],
       showHistory: false,
-      stopToDisplay: "Ryd Centrum",
+      stopToDisplay: "",
       
 
       citySelector: false,

src/Components/StopDisplay/StopDisplay.css

@@ -4,7 +4,7 @@
     position: relative;
     top: 0;
     width: 100%;
-    height: 50px;
+    height: 70px;
     z-index: 2;
     background-color: white;
     text-align: center;
@@ -38,6 +38,12 @@
 #closeBtnP{
     font-size: 20px;
 }
+#percentDesc{
+    position:absolute;
+    right: 5px;
+    bottom: 0;
+}
+
 .delayList{
     z-index: 3;
  
@@ -77,15 +83,15 @@
     height:100%;
 }
 
-.percentP{
-    
-}
-
 .percentDiv{
     position: absolute;
     right: 5%;
 }
 
+.percentP{
+    font-weight: bold;
+}
+
 .listElemDiv{
     width: 100%;
     height: 100%;
@@ -94,7 +100,7 @@
 }
 .listItem{
     width: 100%;
-    height: 80px;
+    height: 50px;
     z-index: 1;
     border-color: black;
     

src/Components/StopDisplay/StopDisplay.js

@@ -15,6 +15,23 @@ import './StopDisplay.css'
 class StopDisplay extends React.PureComponent{
     constructor(props){
     super(props);
+    this.state = {
+        selectedColor: "white"
+    }
+
+    }
+
+    lineSelected = () => {
+        if(this.state.selectedColor == "white"){
+            this.setState({
+            selectedColor: "grey"
+            });
+        }
+        else{
+            this.setState({
+                selectedColor: "white"
+             });
+        }
 
     }
 
@@ -29,26 +46,31 @@ class StopDisplay extends React.PureComponent{
                     <div id="closeBtnDiv">
                         <button id="closeBtn" onClick={() => this.props.closeDisplay("")}>X</button>
                     </div>
+                    <div id="percentDesc">
+                       Avg % of arriving on time
+                    </div>
                 </div>
                 <Divider/>
                 <div id="listAllDiv">
                 <List>
                     {this.props.connectedLines.map((line, i) => (
-                        <ExpansionPanel>
+                        <ExpansionPanel >
                         <ExpansionPanelSummary>
-                        <ListItem className="listItem">
+                        <ListItem className="listItem"
+                        onClick={this.lineSelected}
+                        >
                            
                                 <div className="listElemDiv">
                                 {/*}<Button className="lineBtn">{*/}
                                     <div className="lineDiv">
                                         <p className="lineP">
-                                            Linje {this.props.connectedLines[i].line}
+                                            Linje {line.lineName}
                                         </p>
                                     </div>
 
                                     <div className="percentDiv">
                                         <p className="percentP">
-                                            {this.props.connectedLines[i].smallestP}
+                                            {line.smallestP}
                                         </p>
                                     </div>
                                     {/*}</Button>{*/}
@@ -59,7 +81,7 @@ class StopDisplay extends React.PureComponent{
                         
                         <ExpansionPanelDetails>
                             <List className="test2">
-                                {this.props.connectedLines[i].lineDetails.map((lineDetail, j) =>(
+                                {line.lineDetails.map((lineDetail, j) =>(
                                     
                                     <ListItem className="listItemDetail">
                                         <div className="lineDetailsDiv">