small design changes

src/App.css

@@ -8,7 +8,7 @@ body{
   max-height: 80vh;
   overflow: hidden;
   position: relative;
-  top: 30px;
+  min-width: 250px;
   left: 30px;
 }
 
@@ -54,7 +54,7 @@ body{
 }
 
 #offline .person:hover, #online .person:hover {
-  background-color: #bbb;
+  background-color: #777;
 }
 
 .rank{
@@ -94,7 +94,12 @@ body{
   min-width: 300px;
 }
 
-
+.person .extend img{
+  width: 120px;
+  float: left;
+  margin-right: 20px;
+  margin-top: 10px;
+}
 
 #wrapper{
   float: left;

src/App.js

@@ -142,7 +142,7 @@ export default class App extends Component {
 // is called once when loading the page
   componentDidMount() {
     this.reloadLocations();
-    setInterval(this.updateLocation, 4000);
+    setInterval(this.updateLocation, 2000);
   }
   
   reloadLocations = () => {
@@ -189,7 +189,7 @@ export default class App extends Component {
     return (
 
       <div style={{textAlign: 'center', marginTop: 50, marginLeft: 0}}>
-        
+        <div style={{float: 'right', marginRight: 30}}>
         <div style={{maxWidth: 400, margin: '0 auto'}}>
           <Map
             limitBounds='edge'
@@ -233,7 +233,7 @@ export default class App extends Component {
 			
           </Map>
         </div>
-        <div>
+        <div style={{color: '#eee'}}>
 
           {' '}
           {Math.round(center[0] * 10000) / 10000} ({lat2tile(center[0], zoom)})
@@ -287,9 +287,9 @@ export default class App extends Component {
 			
             }}> Lukas </button>
       </div>
-	    
-	  
-	   <div id="wrapper">
+      </div>
+	   
+       <div id="wrapper">
         <Tables persons={this.state.persons}/>
        </div>
        </div>

src/Tables.js

@@ -32,13 +32,12 @@ function Tables({persons}) {
                   <div className='rank'>{index + 1}</div>
                   <div className='color' style={{backgroundColor: person.color}}>&nbsp;</div>
                   {person.shortName}
-                  
-                  <div className='speed'>{person.speed}</div>
                  
                   <div className='extend'> 
                     <img src='foto.png' alt={person.fullName}/>
                     <p>{person.fullName}</p>
-                    <p>Geschwindigkeit: {person.speed}</p>
+                    <p>L&auml;ngengrad: {person.longitude}<br/>
+                    Breitengrad: {person.latitude}</p>
                     <p>Status: {person.online ? "online" : "offline"}</p>
                   </div>
               </div>