small user list improvements (#27)

* - fix header height when not expanded
- fix user list alignment

* fix typo

Author: antonbaumann

src/components/UserListElement.scss

@@ -16,4 +16,8 @@
   }
 }
 
+.UserListElement_score {
+  text-align: right;
+}
+
 

src/containers/Header.scss

@@ -75,7 +75,7 @@
   transition: margin-top;
   transition-duration: 100ms;
   &.closed {
-    margin-top: -3em;
+    margin-top: calc(-3em - 4px);
     visibility: hidden;
   }
 

src/containers/UserList.js

@@ -8,9 +8,11 @@ import './UserList.scss';
 const UserList = (props) => {
   const {user, userList, error} = props;
 
+  const {spotifySynchronized} = user;
+
   useEffect(() => {
     props.dispatch(fetchUserList(user))
-  }, []);
+  }, [spotifySynchronized]);
 
   return (
     <div className="UserList">

src/containers/UserList.scss

@@ -10,5 +10,6 @@
 }
 
 .UserList__col {
-  margin-right: 3em;
+  margin-right: 4em;
+  width: 250px;
 }