Updated UserPanel to shrink header if no header image available

• Updated:
- UserPanel to shrink header if no header image available

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)}
+            !headerMissing &&
-            className={_s.h122PX}
+            <Image
-            src={account.get('header_static')}
+              alt={intl.formatMessage(messages.headerPhoto)}
-          />
+              className={_s.h122PX}
+              src={account.get('header_static')}
+            />
+          }
           <Button
             color='secondary'
             backgroundColor='secondary'

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; }