Fixing missing avatar and adding toggled style to dropdown arrow in profile header

frontend/src/components/header/index.js

@@ -62,7 +62,7 @@ const StyledAvatarWrapper = styled.div`
   &:after {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 5px solid black;
+    border-${props => props.toggled ? 'bottom' : 'top'}: 5px solid black;
 
     ${pseudoEl({
       top: '50%',
@@ -77,6 +77,11 @@ const StyledTooltipWrapper = styled.div`
   bottom: -180px;
 `;
 
+const StyledName = styled.span`
+  position: relative;
+  top: -12px;
+`;
+
 const arrowPosition = {
   bottom: '100%',
   right: '10%'
@@ -110,16 +115,19 @@ const Header = ({
           >
             <StyledProfileWrapper>
 
-              <StyledAvatarWrapper>
+              <StyledAvatarWrapper toggled={accountUI.profile_tooltip}>
                 <Link
                   onClick={handleToggle}
                   to='/'
                 >
-                  <span>{account.name}</span>
+                  <StyledName>{account.name}</StyledName>
                   <Avatar
                     alt={account.name}
                     name={account.name}
                     src={account.avatar}
+                    style={{
+                      marginLeft: '12px'
+                    }}
                   />
                 </Link>
               </StyledAvatarWrapper>

frontend/src/mock-state.json

@@ -5,7 +5,7 @@
       "id": "nicola",
       "name": "Nicola",
       "email": "nicola@biztech.com",
-      "avatar": "./resources/avatar.png"
+      "avatar": "/src/resources/avatar.png"
     },
     "ui": {
       "profile_tooltip": false