updating profile layout

net/web/src/User/Profile/Profile.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { ProfileWrapper, CloseButton, ModalFooter, SelectButton } from './Profile.styled';
+import { EditIcon, ProfileWrapper, CloseButton, ModalFooter, SelectButton } from './Profile.styled';
 import { UserOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons';
 import { useProfile } from './useProfile.hook';
 import { Button, Modal } from 'antd'
@@ -79,19 +79,25 @@ export function Profile(props) {
         <div class="title">{ state.handle }</div>
         <CloseButton type="text" class="close" size={'large'} onClick={() => actions.close()} icon={<CloseOutlined />} />
       </div>
-      <div class="profile">
-        <div class="avatar" onClick={() => setLogoVisible(true)}>
-          <Logo />
-          <div class="logoedit">
-            <EditOutlined />
+      <div class="container">
+        <div class="profile">
+          <div class="avatar" onClick={() => setLogoVisible(true)}>
+            <Logo />
+            <div class="logoedit">
+              <EditIcon />
+            </div>
+          </div>
+          <div class="block" onClick={() => setInfoVisible(true)}>
+            <span class="label">detail:</span>
+            <EditIcon class="detailedit" />
+          </div>
+          <div class="details">
+            <div class="name"><Name /></div>
+            <div class="location"><Location /></div>
+            <div class="description"><Description /></div>
           </div>
         </div>
-        <div class="details">
-          <div class="name"><Name /></div>
-          <div class="location"><Location /></div>
-          <div class="description"><Description /></div>
-          <Button type="text" onClick={() => setInfoVisible(true)} icon={<EditOutlined />} />
-        </div>
+        <div class="contact"></div>
       </div>
       <Modal title="Profile Info" centered visible={infoVisible} okText="Save"
           onOk={() => onProfileSave()} onCancel={() => setInfoVisible(false)}>

net/web/src/User/Profile/Profile.styled.js

@@ -1,5 +1,6 @@
 import { Input, Button, Spin } from 'antd';
 import styled from 'styled-components';
+import { EditOutlined } from '@ant-design/icons';
 
 export const ProfileWrapper = styled.div`
   display: flex;
@@ -33,12 +34,26 @@ export const ProfileWrapper = styled.div`
     color: #aaaaaa;
   }
 
-  .profile {
+  .container {
     display: flex;
     flex-direction: row;
     padding: 1em;
-    width: 66%;
     margin-top: 32px;
+    width: 100%;
+  }
+
+  .profile {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    flex: 2
+  }
+
+  .contact {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-begin;
+    flex: 3
   }
 
   .logo {
@@ -66,8 +81,8 @@ export const ProfileWrapper = styled.div`
   .logoedit {
     align-self: flex-end;
     font-size: 16px;
-    position: relative;
-    left: -24px;
+    position: absolute;
+    padding-right: 8px;
     cursor: pointer;
   }
 
@@ -80,25 +95,49 @@ export const ProfileWrapper = styled.div`
     color: #dddddd;
   }
 
+
+  .label {
+    padding-right: 8px;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #888888;
+  }
+
   .details {
-    padding-left: 2em;
-    margin-left: 2em;
-    border-left: 0.5px solid #aaaaaa;
+    padding: 16px;
+    border-right: 0.5px solid #aaaaaa;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
   }
 
   .name {
     font-size: 1.5em;
-    padding-left: 8px;
+    padding-bottom: 16px;
+    text-align: right;
   }
 
   .location {
     font-size: 1.2em;
-    padding-left: 8px;
+    padding-bottom: 16px;
+    text-align: right;
   }
 
   .description {
     font-size: 1em;
-    padding-left: 8px;
+    padding-bottom: 16px;
+    text-align: right;
+  }
+
+  .block {
+    border-bottom: 0.5px solid #aaaaaa;
+    display: flex;
+    flex-direction: row;
+    margin-top: 32px;
+    align-items: center;
+    justify-content: flex-end;
+    width: 50%;
+    cursor: pointer;
   }
 `;
 
@@ -117,3 +156,7 @@ export const CloseButton = styled(Button)`
   color: #aaaaaa;
 `;
 
+export const EditIcon = styled(EditOutlined)`
+    color: #1890ff;
+`;
+

net/web/src/User/SideBar/Identity/useIdentity.hook.js

@@ -33,14 +33,12 @@ export function useIdentity() {
   useEffect(() => {
     if (app?.state?.Data?.profile) {
       let profile = app.state.Data.profile;
-      if (profile.name != null) {
-        updateState({ name: profile.name });
-      }
-      if (profile.image != null) {
+      if (profile.image != null && profile.image != '') {
         updateState({ imageUrl: app.actions.profileImageUrl() })
       } else {
         updateState({ imageUrl: '' })
       }
+      updateState({ name: profile.name });
       updateState({ handle: profile.handle });
       updateState({ domain: profile.node });
     }