Fix nonexisting info being displayed oddly

src/components/NavigationDrawer.js

@@ -67,10 +67,10 @@ class NavigationDrawer extends Component {
                         <span>example@gmail.com</span>
                     </header>
                     <div id="navList">
-                        <SelectUserButton path={"user1"} username="user1"/>
+                        <SelectUserButton path={"user1"} username="Användare 1"/>
-                        <SelectUserButton path={"user2"} username="user2"/>
+                        <SelectUserButton path={"user2"} username="Användare 2"/>
-                        <SelectUserButton path={"user3"} username="user3"/>
+                        <SelectUserButton path={"user3"} username="Användare 3"/>
-                        <SelectUserButton path={"user4"} username="user4"/>
+                        <SelectUserButton path={"user4"} username="Användare 4"/>
                         <Button onClick={[this.showPopup, this.close]}><span>Generera Störning</span></Button>
                     </div>
                     <hr />

src/components/SelectUserButton.js

@@ -50,7 +50,7 @@ class SelectUserButton extends Button {
 		return (
 			<Button onClick={[this.selectUser, this.updatePage]} className="disruptBtn">
 				<img src={disruptIcon} alt="" />
-				<span>{this.props.username}</span>
+				{this.props.username}
 			</Button>
 		);
 	}

src/components/StopTitle.js

@@ -4,24 +4,28 @@ import './css/StopTitle.css';
 
 class StopTitle extends Component {
     render() {
+        console.log(this.props.stop);
+
         return (
             <div id="stopTitle">
                 <h1>{this.props.stop.name !== undefined ?
-                        this.props.stop.name
+                    this.props.stop.name
-                        : "Hållplats saknas"
+                    : "Hållplats saknas"
-                    }</h1>
+                }</h1>
-                <div>
+
-                    {this.props.stop.locations !== undefined ?
+                {this.props.stop.name !== undefined && this.props.stop.locations !== undefined ?
-                        <>
+                    <div>
-                            <h3>
+                        <h3>
-                                <span>{this.props.stop.locations[0]}</span>
+                            <span>{this.props.stop.locations[0]}</span>
-                            </h3>
+                        </h3>
-                            <button>Byt Läge</button>
+                        <button>Byt Läge</button>
-                        </>
+                    </div>
-                        :
+                    :
-                        <h3>Vänligen aktivera platsåtkomst</h3>
+                    (this.props.stop.name !== undefined ?
-                    }
+                        <></>
-                </div>
+                        : <h3>Vänligen aktivera platsåtkomst</h3>
+                    )
+                }
             </div>
         );
     }

src/components/css/StopTitle.css

@@ -8,6 +8,7 @@
     justify-content: space-evenly;
     padding: 0 5vw;
     z-index: 4;
+    max-width: 80vw;
 }
 
 #stopTitle h1, #stopTitle h3 {

src/components/pages/TrafficInfo.js

@@ -10,10 +10,6 @@ import globalData from '../../GlobalData.js';
 
 
 class TrafficInfo extends Component {
-    state = {
-        stop: globalData.stop
-    };
-    
     render() {
         globalData.currentPage = this;
 
@@ -21,10 +17,10 @@ class TrafficInfo extends Component {
             <>
                 <Header title="Trafikinfo" />
                 <TopMenu>
-                    <StopTitle stop={this.state.stop} />
+                    <StopTitle stop={globalData.stop} />
                 </TopMenu>
                 <MainArea>
-                    <TrafficList departures={this.state.stop.departures} />
+                    <TrafficList departures={globalData.stop.departures} />
                 </MainArea>
             </>
         );