Add appbar utility, finalize profile page styles

Signed-off-by: Marquis Kurt <software@marquiskurt.net>

package.json

@@ -69,7 +69,7 @@
   ],
   "build": {
     "appId": "net.marquiskurt.hyperspace",
-  	"afterSign": "desktop/notarize.js",
+    "afterSign": "desktop/notarize.js",
     "directories": {
       "buildResources": "desktop"
     },

src/pages/PageLayout.styles.tsx

@@ -1,5 +1,6 @@
 import { Theme, createStyles } from "@material-ui/core";
 import { isDarwinApp } from "../utilities/desktop";
+import { isAppbarExpanded } from "../utilities/appbar";
 
 export const styles = (theme: Theme) => createStyles({
     root: {
@@ -69,7 +70,8 @@ export const styles = (theme: Theme) => createStyles({
       backgroundColor: theme.palette.primary.dark,
       width: '100%',
       color: theme.palette.common.white,
-      zIndex: 1
+      zIndex: 1,
+      top: isAppbarExpanded()? 80: 64,
     },
     pageHeroBackgroundImage: {
       position: 'absolute',
@@ -80,12 +82,13 @@ export const styles = (theme: Theme) => createStyles({
       backgroundSize: 'cover',
       height: '100%',
       width: '100%',
-      opacity: 0.40,
-      zIndex: -1
+      opacity: 0.35,
+      zIndex: -1,
+      filter: 'blur(2px)'
     },
     pageHeroContent: {
       padding: 16,
-      paddingTop: 116,
+      paddingTop: 8,
       textAlign: 'center',
       width: '100%',
       height: '100%',
@@ -112,13 +115,15 @@ export const styles = (theme: Theme) => createStyles({
     },
     profileToolbar: {
         zIndex: 2,
-        paddingTop: 100,
+        paddingTop: 8,
     },
     profileContent: {
         padding: 16,
         [theme.breakpoints.up('md')]: {
             paddingLeft: '5%',
-            paddingRight: '5%'
+            paddingRight: '5%',
+            paddingBottom: 48,
+            paddingTop: 24,
         },
         width: '100%',
         height: '100%',
@@ -126,7 +131,7 @@ export const styles = (theme: Theme) => createStyles({
         zIndex: 1,
         display: 'flex',
         paddingBottom: 24,
-        paddingTop: 0
+        paddingTop: 24,
     },
     profileAvatar: {
         width: 64,
@@ -149,7 +154,8 @@ export const styles = (theme: Theme) => createStyles({
       backgroundColor: theme.palette.primary.main
     },
     pageProfileNameEmoji: {
-      height: theme.typography.h4.fontSize
+      height: theme.typography.h4.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
     },
     pageProfileStatsDiv: {
       display: 'inline-flex',
@@ -169,7 +175,7 @@ export const styles = (theme: Theme) => createStyles({
     pageContentLayoutConstraints: {
       paddingLeft: theme.spacing.unit,
       paddingRight: theme.spacing.unit,
-      paddingTop: theme.spacing.unit * 4,
+      paddingTop: theme.spacing.unit * 12,
       paddingBottom: theme.spacing.unit * 2,
       [theme.breakpoints.up('lg')]: {
         paddingLeft: theme.spacing.unit * 32,

src/pages/ProfilePage.tsx

@@ -23,7 +23,7 @@ import { Status } from '../types/Status';
 import { Relationship } from '../types/Relationship';
 import Post from '../components/Post';
 import {withSnackbar} from 'notistack';
-import { LinkableButton, LinkableIconButton } from '../interfaces/overrides';
+import { LinkableIconButton } from '../interfaces/overrides';
 import { emojifyString } from '../utilities/emojis';
 
 import AccountEditIcon from 'mdi-material-ui/AccountEdit';
@@ -31,7 +31,9 @@ import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import PersonAddDisabledIcon from '@material-ui/icons/PersonAddDisabled';
 import AccountMinusIcon from 'mdi-material-ui/AccountMinus';
 import ChatIcon from '@material-ui/icons/Chat';
-import CancelIcon from '@material-ui/icons/Cancel';
+import AccountRemoveIcon from 'mdi-material-ui/AccountRemove';
+import AccountHeartIcon from 'mdi-material-ui/AccountHeart';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 
 
 
@@ -257,7 +259,14 @@ class ProfilePage extends Component<any, IProfilePageState> {
                         </Tooltip>
                         <Tooltip title={this.state.relationship && this.state.relationship.blocking? "Unblock this account": "Block this account"}>
                             <IconButton color={"inherit"} disabled={this.isItMe()} onClick={() => this.toggleBlockDialog()}>
-                                <CancelIcon/>
+                                {
+                                    this.state.relationship && this.state.relationship.blocking? <AccountHeartIcon/>: <AccountRemoveIcon/>
+                                }
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Open in web">
+                            <IconButton href={this.state.account? this.state.account.url: ""} target="_blank" rel={"nofollower noreferrer noopener"} color={"inherit"}>
+                                <OpenInNewIcon/>
                             </IconButton>
                         </Tooltip>
                             {
@@ -272,9 +281,21 @@ class ProfilePage extends Component<any, IProfilePageState> {
                     <div className={classes.profileContent}>
                         <Avatar className={classes.profileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
                         <div className={classes.profileUserBox}>
-                            <Typography variant="h4" color="inherit" dangerouslySetInnerHTML={{__html: this.state.account? emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji): ""}}/>
+                            <Typography variant="h4" color="inherit" dangerouslySetInnerHTML={
+                                {__html: this.state.account?
+                                        this.state.account.display_name?
+                                            emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji)
+                                            : this.state.account.username
+                                        : ""}}
+                                        className={classes.pageProfileNameEmoji}/>
                             <Typography variant="caption" color="inherit">{this.state.account ? '@' + this.state.account.acct: ""}</Typography>
-                            <Typography paragraph color="inherit">{this.state.account ? this.state.account.note: ""}</Typography>
+                            <Typography paragraph color="inherit">{
+                                this.state.account ?
+                                    this.state.account.note?
+                                        this.state.account.note
+                                        : "No bio provided by user."
+                                    : "No bio available."
+                            }</Typography>
                             <Typography color={"inherit"}>
                                 {this.state.account? this.state.account.followers_count: 0} followers | {this.state.account? this.state.account.following_count: 0} following | {this.state.account? this.state.account.statuses_count: 0} posts
                             </Typography>

src/utilities/appbar.tsx

@@ -0,0 +1,11 @@
+import { isDarwinApp } from "./desktop";
+
+/**
+ * Determine whether the title bar is being displayed.
+ * This might be useful in cases where styles are dependent on the title bar's visibility, such as heights.
+ *
+ * @returns Boolean dictating if the title bar is visible
+ */
+export function isAppbarExpanded(): boolean {
+    return isDarwinApp() ||  process.env.NODE_ENV === "development";
+}