Fix in case there is no name

Author: Ives van Hoorne

src/app/containers/Navigation/User.js

@@ -30,15 +30,15 @@ const Name = styled.div`
 `;
 
 const Username = styled.div`
-  color: rgba(255, 255, 255, 0.6);
-  font-size: .875em;
+  color: ${props => props.main ? 'white' : 'rgba(255, 255, 255, 0.6)'};
+  font-size: ${props => props.main ? 1 : .875}em;
 `;
 
 type Props = {
   user: {
     username: string,
     avatarUrl: string,
-    name: string,
+    name: ?string,
   },
   small: boolean,
   signOut: Function,
@@ -67,8 +67,8 @@ export default class User extends React.PureComponent {
       <Relative>
         <ClickableContainer onClick={menuOpen ? this.closeMenu : this.openMenu}>
           <ProfileInfo>
-            <Name>{user.name}</Name>
-            <Username>{user.username}</Username>
+            {user.name && <Name>{user.name}</Name>}
+            <Username main={!user.name}>{user.username}</Username>
           </ProfileInfo>
 
           <Tooltip title="User Menu">

src/app/containers/Navigation/UserMenu.js

@@ -15,9 +15,11 @@ const Container = styled.div`
   ${delayEffect(0)}
 
   top: 40px;
-  left: 0;
+  left: -20%;
   right: 0;
 
+  min-width: 150px;
+
   z-index: 20;
 `;
 

src/app/pages/Profile/Header/UserInfo/ProfileInfo.js

@@ -26,9 +26,9 @@ const Name = styled.div`
 const Username = styled.div`
   display: flex;
   align-items: center;
-  font-size: 1.25rem;
+  font-size: ${props => (props.main ? 1.5 : 1.25)}rem;
   font-weight: 200;
-  color: rgba(255, 255, 255, 0.6);
+  color: ${props => (props.main ? 'white' : 'rgba(255, 255, 255, 0.6)')};
   ${delayEffect(0.15)}
 
   margin-bottom: 1rem;
@@ -51,8 +51,8 @@ export default ({ username, name, avatarUrl }: Props) => (
     <ProfileImage alt={username} height={175} width={175} src={avatarUrl} />
     <Margin bottom={3}>
       <Column justifyContent="space-between">
-        <Name>{name}</Name>
-        <Username>
+        {name && <Name>{name}</Name>}
+        <Username main={!name}>
           {username}
           <a
             href={`https://github.com/${username}`}