From cf9f2bb824236062e2f6479fbdd249831b58c984 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Wed, 30 Dec 2020 12:20:39 -0500
Subject: [PATCH] Updated UserPanel to shrink header if no header image
 available
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- UserPanel to shrink header if no header image available
---
 .../gabsocial/components/panel/user_panel.js  | 29 ++++++++++++++-----
 app/javascript/styles/global.css              |  1 +
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/javascript/gabsocial/components/panel/user_panel.js b/app/javascript/gabsocial/components/panel/user_panel.js
index 4859f718..1c5d21ed 100644
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@@ -12,6 +12,7 @@ import { openModal } from '../../actions/modal'
 import {
   CX,
   MODAL_EDIT_PROFILE,
+  PLACEHOLDER_MISSING_HEADER_SRC,
 } from '../../constants'
 import PanelLayout from './panel_layout'
 import Avatar from '../avatar'
@@ -50,29 +51,41 @@ class UserPanel extends ImmutablePureComponent {
     } = this.props
     const { hovering } = this.state
 
+    const acct = account.get('acct')
+    const headerSrc = !!account ? account.get('header') : undefined
+    const headerMissing = !headerSrc ? true : headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
+
     const buttonClasses = CX({
       posAbs: 1,
-      mt10: 1,
       mr10: 1,
       top0: 1,
       right0: 1,
+      mt10: 1,
       displayNone: !hovering,
     })
 
-    const acct = account.get('acct')
+    const headerContainerClasses = CX({
+      d: 1,
+      h122PX: !headerMissing,
+      h55PX: headerMissing,
+      bgSecondary: headerMissing,
+    })
 
     return (
       <PanelLayout noPadding>
         <div
-          className={[_s.d, _s.h122PX].join(' ')}
+          className={headerContainerClasses}
           onMouseEnter={this.handleOnMouseEnter}
           onMouseLeave={this.handleOnMouseLeave}
         >
-          <Image
-            alt={intl.formatMessage(messages.headerPhoto)}
-            className={_s.h122PX}
-            src={account.get('header_static')}
-          />
+          {
+            !headerMissing &&
+            <Image
+              alt={intl.formatMessage(messages.headerPhoto)}
+              className={_s.h122PX}
+              src={account.get('header_static')}
+            />
+          }
           <Button
             color='secondary'
             backgroundColor='secondary'
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index ae16e401..af089ed2 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -569,6 +569,7 @@ pre {
 .h158PX { height: 158px; }
 .h122PX { height: 122px; }
 .h60PX { height: 60px; }
+.h55PX { height: 55px; }
 .h53PX { height: 53px; }
 .h40PX { height: 40px; }
 .h24PX { height: 24px; }