user profile avatar

src/components/main/Header/index.tsx

@@ -11,9 +11,13 @@ import { Group } from '~/components/containers/Group';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { DIALOGS } from '~/redux/modal/constants';
 import { pick } from 'ramda';
+import { Icon } from '~/components/input/Icon';
+import { url } from 'inspector';
+import { getURL } from '~/utils/dom';
+import path from 'ramda/es/path';
 
 const mapStateToProps = state => ({
-  user: pick(['username', 'is_user'])(selectUser(state)),
+  user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
 });
 
 const mapDispatchToProps = {
@@ -23,7 +27,7 @@ const mapDispatchToProps = {
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user }, showDialog }) => {
+const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, showDialog }) => {
   const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
@@ -41,7 +45,9 @@ const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user }, showDialog
       {is_user && (
         <Group horizontal className={style.user_button}>
           <div>{username}</div>
-          <div className={style.user_avatar} />
+          <div className={style.user_avatar} style={{ backgroundImage: `url('${getURL(photo)}')` }}>
+            {(!photo || !photo.id) && <Icon icon="profile" />}
+          </div>
         </Group>
       )}
 

src/components/main/Header/style.scss

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: flex-end;
   font-weight: 500;
-  height: 80px;
+  height: 120px;
 }
 
 .spacer {
@@ -65,17 +65,31 @@
 .user_button {
   align-items: center;
   border-radius: $input_radius;
-  font: $font_16_medium;
+  font: $font_16_semibold;
   text-transform: uppercase;
   flex: 0 !important;
-  opacity: 0.3;
   cursor: pointer;
   margin-left: $gap;
 }
 
 .user_avatar {
+  @include outer_shadow();
+
   width: 32px;
   height: 32px;
   background: white;
   border-radius: $radius;
+  margin-left: ($gap + 2px) !important;
+  background: 50% 50% no-repeat $wisegreen;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+
+  svg {
+    fill: #222222;
+    stroke: #222222;
+    width: 24px;
+    height: 24px;
+  }
 }

src/sprites/Sprites.tsx

@@ -93,6 +93,11 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" />
     </g>
+
+    <g id="profile" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+    </g>
   </svg>
 );