Readability

frontend/components/Layout/components/HeaderBlock.js

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { color, layout } from 'styles/constants';
 import type { User, Team } from 'types';
 import Flex from 'components/Flex';
@@ -16,19 +15,19 @@ function HeaderBlock({ user, team, children }: Props) {
   return (
     <Header justify="space-between" align="center">
       <Flex align="center" column>
-        <LogoLink to="/">{team.name}</LogoLink>
-        <Name>{user.name}</Name>
+        <TeamName>{team.name}</TeamName>
+        <UserName>{user.name}</UserName>
       </Flex>
       {children}
     </Header>
   );
 }
 
-const Name = styled.div`
+const UserName = styled.div`
   font-size: 13px;
 `;
 
-const LogoLink = styled(Link)`
+const TeamName = styled.div`
   font-family: 'Atlas Grotesk';
   font-weight: bold;
   color: ${color.text};
@@ -43,6 +42,7 @@ const Header = styled(Flex)`
   cursor: pointer;
   width: 100%;
 
+  &:active,
   &:hover {
     background: rgba(0,0,0,.05);
   }