Add 'Edit profile' button to profile page (selective) and change post icon

src/components/AppLayout/AppLayout.tsx

@@ -10,7 +10,7 @@ import PublicIcon from '@material-ui/icons/Public';
 import GroupIcon from '@material-ui/icons/Group';
 import SettingsIcon from '@material-ui/icons/Settings';
 import InfoIcon from '@material-ui/icons/Info';
-import EditIcon from '@material-ui/icons/Edit';
+import AddCommentIcon from '@material-ui/icons/AddComment';
 //import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import {styles} from './AppLayout.styles';
@@ -395,7 +395,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
         </Dialog>
         <Tooltip title="Create a new post">
           <LinkableFab to="/compose" className={classes.composeButton} color="secondary" aria-label="Compose">
-            <EditIcon/>
+            <AddCommentIcon/>
           </LinkableFab>
         </Tooltip>
     </div>

src/pages/PageLayout.styles.tsx

@@ -82,8 +82,14 @@ export const styles = (theme: Theme) => createStyles({
         paddingLeft: '25%',
         paddingRight: '25%',
       },
+      position: "relative",
       zIndex: 1
     },
+    pageHeroToolbar: {
+      position: "absolute",
+      right: theme.spacing.unit * 2,
+      marginTop: -16,
+    },
     pageListConstraints: {
         paddingLeft: theme.spacing.unit,
         paddingRight: theme.spacing.unit,

src/pages/ProfilePage.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {withStyles, Typography, Avatar, Divider, Button, CircularProgress, Paper, Tooltip, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions} from '@material-ui/core';
+import {withStyles, Typography, Avatar, Divider, Button, CircularProgress, Paper, Tooltip, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, IconButton} from '@material-ui/core';
 import {styles} from './PageLayout.styles';
 import Mastodon from 'megalodon';
 import { Account } from '../types/Account';
@@ -7,9 +7,11 @@ import { Status } from '../types/Status';
 import { Relationship } from '../types/Relationship';
 import Post from '../components/Post';
 import {withSnackbar} from 'notistack';
-import { LinkableButton } from '../interfaces/overrides';
+import { LinkableButton, LinkableIconButton } from '../interfaces/overrides';
 import { emojifyString } from '../utilities/emojis';
 
+import EditIcon from '@material-ui/icons/Edit';
+
 interface IProfilePageState {
     account?: Account;
     relationship?: Relationship;
@@ -89,6 +91,14 @@ class ProfilePage extends Component<any, IProfilePageState> {
         this.getAccountData(params.profileId);
     }
 
+    isItMe(): boolean {
+        if (this.state.account) {
+            return this.state.account.id === JSON.parse(localStorage.getItem('account') as string).id;
+        } else {
+            return false;
+        }
+    }
+
     getRelationships() {
         this.client.get("/accounts/relationships", {id: this.props.match.params.profileId }).then((resp: any) => {
             let relationship: Relationship = resp.data[0];
@@ -216,6 +226,14 @@ class ProfilePage extends Component<any, IProfilePageState> {
                 <div className={classes.pageHeroBackground}>
                     <div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: this.state.account? `url("${this.state.account.header}")`: `url("")`}}/>
                     <div className={classes.pageHeroContent}>
+                        {
+                            this.isItMe()?
+                            <Tooltip title="Edit profile">
+                                <LinkableIconButton to="/you" color="inherit" className={classes.pageHeroToolbar}>
+                                    <EditIcon/>
+                                </LinkableIconButton>
+                            </Tooltip>: null
+                        }
                         <Avatar className={classes.pageProfileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
                         <Typography variant="h4" color="inherit" dangerouslySetInnerHTML={{__html: this.state.account? emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji): ""}}></Typography>
                         <Typography variant="caption" color="inherit">{this.state.account ? '@' + this.state.account.acct: ""}</Typography>