From 660ed2c79db8456ad7f80472fbeac3efb1cb0a38 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 10 Feb 2021 21:05:54 +0100
Subject: [PATCH] Updated account menu

---
 .../components/gh-member-activity-feed.hbs    |  4 +-
 .../components/gh-member-settings-form.hbs    |  6 +-
 .../app/components/gh-nav-menu/footer.hbs     | 27 ++++--
 ghost/admin/app/styles/layouts/main.css       | 97 +++++++++++++------
 ghost/admin/app/styles/layouts/members.css    |  1 +
 5 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/ghost/admin/app/components/gh-member-activity-feed.hbs b/ghost/admin/app/components/gh-member-activity-feed.hbs
index 5a879806ec..12be3e2b1a 100644
--- a/ghost/admin/app/components/gh-member-activity-feed.hbs
+++ b/ghost/admin/app/components/gh-member-activity-feed.hbs
@@ -1,5 +1,5 @@
 <div class="gh-member-feed" ...attributes>
-    <div class="flex-auto flex flex-column justify-between items-stretch">
+    <div class="flex-auto flex flex-column items-stretch {{if this.activities "justify-between" "h-100 justify-center"}}">
         <div>
             {{#if this.activities}}
                 {{#each this.firstActivities as |activity|}}
@@ -23,7 +23,7 @@
                     </button>
                 {{/if}}
             {{else}}
-                <p class="ma0 pa12 tc midgrey fw3">No member activity yet</p>
+                <p class="ma0 pa12 tc midgrey">No member activity yet</p>
             {{/if}}
         </div>
     </div>
diff --git a/ghost/admin/app/components/gh-member-settings-form.hbs b/ghost/admin/app/components/gh-member-settings-form.hbs
index b21474bf5c..e484f1a6b1 100644
--- a/ghost/admin/app/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form.hbs
@@ -123,16 +123,16 @@
 
 
     <section class="gh-main-section columns-2">
-        <div class="gh-main-section-block">
+        <div class="gh-main-section-block stretch-height">
             <h4 class="gh-main-section-header small bn">Member activity</h4>
-            <div class="gh-main-section-content grey">
+            <div class="gh-main-section-content grey stretch-height">
                 <GhMemberActivityFeed @emailRecipients={{this.member.emailRecipients}} />
             </div>
         </div>
         {{#if this.canShowStripeInfo}}
         <div class="gh-main-section-block">
             <h4 class="gh-main-section-header small bn">Stripe info</h4>
-            <div class="gh-main-section-content padding-top-s grey">
+            <div class="gh-main-section-content stretch-height grey">
                 <div class="gh-member-stripe">
                     {{#if this.isLoading}}
                         <div class="flex justify-center flex-auto">
diff --git a/ghost/admin/app/components/gh-nav-menu/footer.hbs b/ghost/admin/app/components/gh-nav-menu/footer.hbs
index 7c8e41829a..ae0f0df90e 100644
--- a/ghost/admin/app/components/gh-nav-menu/footer.hbs
+++ b/ghost/admin/app/components/gh-nav-menu/footer.hbs
@@ -13,14 +13,23 @@
 
                 <dropdown.Content class="gh-nav-menu-dropdown">
                     <ul class="dropdown-menu dropdown-triangle-top" role="menu" {{action dropdown.actions.close on="click" preventDefault=false}}>
+                        <li role="presentation">
+                            <div class="gh-account-menu-header">
+                                <span class="user-menu-signout" data-tooltip="Logout"><LinkTo @route="signout" @classNames="dropdown-item" @role="menuitem" @tabindex="-1">{{svg-jar "signout"}}</LinkTo></span>
+                                <div class="gh-user-avatar relative" style={{background-image-style this.session.user.profileImageUrl}}></div>
+                                <h4 class="gh-user-name">{{this.session.user.name}}</h4>
+                                <span class="gh-user-email">{{this.session.user.email}}</span>
+                            </div>
+                        </li>
+                        <li class="divider" role="separator"></li>
                         <li role="presentation">
                             <LinkTo @route="about" @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="about">
-                                {{svg-jar "store"}} About Ghost
+                                About Ghost
                             </LinkTo>
                         </li>
                         <li role="presentation">
                             <button class="dropdown-item" role="menuitem" tabindex="-1" {{on "click" this.whatsNew.showModal}}>
-                                {{svg-jar "gift"}} What's new?
+                                What's new?
                                 {{#if this.whatsNew.hasNew}}
                                     <div class="flex-grow-1 flex justify-end"><span class="dib w2 h2 top-0 right-0 bg-blue br-100"></span></div>
                                 {{/if}}
@@ -29,12 +38,12 @@
                         <li class="divider" role="separator"></li>
                         <li role="presentation">
                             <LinkTo @route="staff.user" @model={{this.session.user.slug}} @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="user-profile">
-                                {{svg-jar "user-circle"}} Your Profile
+                                Your Profile
                             </LinkTo>
                         </li>
                         <li role="presentation">
                             <a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/docs/" target="_blank">
-                                {{svg-jar "ambulance"}} Support Center
+                                Support Center
                             </a>
                         </li>
                         <li role="presentation">
@@ -42,15 +51,15 @@
                                 href="https://twitter.com/intent/tweet?text=%40Ghost+Hi%21+Can+you+help+me+with+&related=Ghost"
                                 onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"
                             >
-                                {{svg-jar "twitter"}} Tweet @Ghost!
+                                Tweet @Ghost!
                             </a>
                         </li>
                         <li role="presentation">
                             <a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/help/topic/setting-up/" target="_blank">
-                                {{svg-jar "book-open"}} How to Use Ghost
+                                How to Use Ghost
                             </a>
                         </li>
-                        <li class="divider" role="separator"></li>
+                        {{!-- <li class="divider" role="separator"></li> --}}
 
                         {{#if this.showDropdownExtension}}
                             {{#each this.config.clientExtensions.dropdown.items as |menuItem| }}
@@ -66,11 +75,11 @@
                             {{/each}}
                         {{/if}}
 
-                        <li role="presentation">
+                        {{!-- <li role="presentation">
                             <LinkTo @route="signout" @classNames="dropdown-item user-menu-signout" @role="menuitem" @tabindex="-1">
                                 {{svg-jar "signout"}} Sign Out
                             </LinkTo>
-                        </li>
+                        </li> --}}
                     </ul>
                 </dropdown.Content>
             </GhBasicDropdown>
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 899db122f7..88b5602336 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -81,32 +81,6 @@
     border: 1px solid color-mod(var(--main-bg-color) l(-8%));
 }
 
-.gh-user-name {
-    margin: -2px 8px 2px 0;
-    padding: 0 0 3px 0;
-    word-break: break-all;
-    font-weight: 600;
-    line-height: 1.1em;
-    max-width: 160px;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    white-space: nowrap;
-}
-
-.gh-user-email {
-    margin: -1px 8px -3px 0;
-    padding: 0 0 3px 0;
-    word-break: break-all;
-    font-size: 1.25rem;
-    font-weight: 400;
-    line-height: 1.1em;
-    color: var(--middarkgrey);
-    max-width: 160px;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    white-space: nowrap;
-}
-
 /* Global Nav
 /* ---------------------------------------------------------- */
 
@@ -131,12 +105,12 @@
 }
 
 .gh-nav-menu-dropdown .dropdown-menu {
-    top: -344px;
+    top: -440px;
     left: 20px;
     margin: 10px 0 0;
     box-shadow: var(--box-shadow-m);
-    min-width: 280px;
-    padding: 6px 0;
+    min-width: 290px;
+    padding: 6px 0 12px;
 }
 
 .gh-nav-menu-dropdown .dropdown-menu>li>a,
@@ -144,7 +118,7 @@
     font-size: 1.4rem;
     margin: 0;
     width: unset;
-    padding: 10px 24px 11px;
+    padding: 8px 24px 9px;
 }
 
 .gh-nav-menu-dropdown .dropdown-menu>li>button {
@@ -216,6 +190,54 @@
     padding: 0;
 }
 
+.gh-account-menu-header {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px 24px 24px;
+}
+
+.gh-account-menu-header .gh-user-avatar {
+    width: 56px;
+    height: 56px;
+    margin: 0;
+    padding: 0;
+}
+
+.gh-account-menu-header .user-menu-signout {
+    position: absolute;
+    top: 16px;
+    right: 12px;
+}
+
+.gh-user-name {
+    margin: 8px 0 0;
+    padding: 0;
+    word-break: break-all;
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.2em;
+    max-width: 160px;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+}
+
+.gh-user-email {
+    margin: 4px 0 0;
+    padding: 0;
+    word-break: break-all;
+    font-size: 1.3rem;
+    font-weight: 400;
+    line-height: 1.2em;
+    color: var(--middarkgrey);
+    max-width: 160px;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+}
+
 /* Global search
 /* ---------------------------------------------------------- */
 
@@ -1042,10 +1064,15 @@
     padding: 0;
 }
 
+.gh-main-section-block.with-margin,
 .gh-main-section-block:not(:last-of-type) {
     margin-bottom: 32px;
 }
 
+.gh-main-section-block.no-margin {
+    margin-bottom: 0;
+}
+
 .gh-main-section-block.bt { border-top: 1px solid var(--whitegrey); }
 .gh-main-section-block.br { border-right: 1px solid var(--whitegrey); }
 .gh-main-section-block.bb { border-bottom: 1px solid var(--whitegrey); }
@@ -1082,6 +1109,16 @@
     padding-top: 16px;
 }
 
+.gh-main-section-block.stretch-height {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.gh-main-section-block.stretch-height .gh-main-section-content {
+    flex-grow: 1;
+}
+
 /* Expandable options */
 .gh-expandable {
     background: var(--main-color-content-greybg);
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 2b2b51efe5..5f577b25a8 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -534,6 +534,7 @@ textarea.gh-member-details-textarea {
     align-items: center;
     justify-content: flex-start;
     min-height: 24px;
+    margin-top: -8px;
 }
 
 .gh-member-stripe-info {