Updated member details screen design

no issue

app/controllers/member.js

@@ -32,8 +32,9 @@ export default Controller.extend({
     }),
 
     subscribedAt: computed('member.createdAt', function () {
+        let memberSince = moment(this.member.createdAt).from(moment());
         let createdDate = moment(this.member.createdAt).format('MMM DD, YYYY');
-        return `Subscribed ${createdDate}`;
+        return `${createdDate} (${memberSince})`;
     }),
 
     actions: {

app/styles/app-dark.css

@@ -53,7 +53,6 @@
 @import "layouts/user.css";
 @import "layouts/about.css";
 @import "layouts/tags.css";
-@import "layouts/member.css";
 @import "layouts/members.css";
 @import "layouts/error.css";
 @import "layouts/apps.css";

app/styles/app.css

@@ -53,7 +53,6 @@
 @import "layouts/user.css";
 @import "layouts/about.css";
 @import "layouts/tags.css";
-@import "layouts/member.css";
 @import "layouts/members.css";
 @import "layouts/error.css";
 @import "layouts/apps.css";

app/styles/layouts/member.css

@@ -1,13 +0,0 @@
-.member-detail-main-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 30px;
-}
-
-.member-basic-info-form input:disabled {
-    background: var(--lightgrey);
-}
-
-.member-basic-info-form textarea:disabled {
-    background: var(--lightgrey);
-}

app/styles/layouts/members.css

@@ -1,3 +1,6 @@
+/* Members list
+/* ----------------------------------------- */
+
 .view-actions input.gh-members-list-searchfield {
     min-width: 220px;
     padding-left: 30px;
@@ -15,4 +18,13 @@ p.gh-members-list-email {
 .gh-members-placeholder {
     width: 118px;
     margin: -30px 0 15px;
+}
+
+
+/* Member details
+/* ----------------------------------------- */
+
+textarea.gh-member-details-textarea {
+    max-width: 100%;
+    height: 123px;
 }

app/styles/patterns/forms.css

@@ -178,6 +178,12 @@ textarea {
     resize: vertical;
 }
 
+.gh-input[disabled] {
+    background: var(--whitegrey-l2);
+    color: var(--midlightgrey);
+    border-color: var(--whitegrey);
+}
+
 
 /* Radio / Checkboxes
 /* ---------------------------------------------------------- */

app/templates/components/gh-member-settings-form.hbs

@@ -1,6 +1,6 @@
 <h4 class="midlightgrey f-small fw5 ttu">Basic info</h4>
-<div class="pa5 pt4 br4 shadow-1 bg-grouped-table mt2 flex flex-column flex-row-ns items-start justify-between gh-tag-basic-settings-form">
-    <div class="order-1 flex flex-column items-start mr5 w-100 w-50-m w-two-thirds-l">
+<div class="pa5 pb0 pt4 br4 shadow-1 bg-grouped-table mt2 flex flex-column flex-row-ns items-start justify-between gh-tag-basic-settings-form">
+    <div class="flex flex-column items-start mr8 w-100 w-50-ns">
         {{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="name"}}
         <label for="member-name">Name</label>
         {{gh-text-input
@@ -27,14 +27,14 @@
         {{/gh-form-group}}
 
     </div>
-    <div class="order-0 mb6 mb0-ns order-2-ns w-100 w-50-m w-third-l">
+    <div class="mb6 mb0-ns w-100 w-50-ns">
         {{#gh-form-group errors=member.errors hasValidated=tag.hasValidated property="note"}}
             <label for="member-description">Note</label>
             {{gh-textarea
                         disabled=true
                         id="member-description"
                         name="description"
-                        class="gh-tag-details-textarea"
+                        class="gh-member-details-textarea"
                         tabindex="3"
                         value=(readonly scratchDescription)
                         input=(action (mut scratchDescription) value="target.value")

app/templates/components/gh-members-list-item.hbs

@@ -16,8 +16,8 @@
     </div>
 {{/link-to}}
 
-{{#link-to "member" member class="gh-flex-list-data gh-members-list-subscribed-at middarkgrey f8 nowrap" title="Subscribed at" }}
-    Subscribed at {{this.subscribedAt}}
+{{#link-to "member" member class="gh-flex-list-data gh-members-list-subscribed-at middarkgrey f8 nowrap" title="Subscribed on" }}
+    Subscribed on {{this.subscribedAt}}
 {{/link-to}}
 
 {{#link-to "member" member class="gh-flex-list-data" title="Member details"}}

app/templates/member.hbs

@@ -4,14 +4,25 @@
             <h2 class="gh-canvas-title" data-test-screen-title>
                 {{#link-to "members" data-test-link="members-back"}}Members{{/link-to}}
                 <span>{{svg-jar "arrow-right"}}</span>
-                {{member.email}}
+                {{#if member.name}}
+                    {{member.name}}
+                {{else}}
+                    {{member.email}}
+                {{/if}}
             </h2>
         </GhCanvasHeader>
-        <div class="member-detail-main-info">
-            <GhMemberAvatar @member={{member}} @sizeClass={{'f-headline fw6'}} class="w16 h16 mr4" />
-            <div class="apps-card-meta">
-                <h3 class="apps-card-app-title">{{member.email}}</h3>
-                <p class="apps-card-app-desc">{{this.subscribedAt}}</p>
+        <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
+            <GhMemberAvatar @member={{member}} @sizeClass={{'f-headline fw4 lh-zero'}} class="w18 h18 mr4" />
+            <div>
+                <h3 class="f2 fw5 ma0 pa0">
+                    {{if member.name member.name member.email}}
+                </h3>
+                <p class="f6 pa0 ma0 midgrey">
+                    {{#if member.name}}
+                        <span class="darkgrey">{{member.email}}</span> – 
+                    {{/if}}
+                    Subscribed on {{this.subscribedAt}}
+                </p>
             </div>
         </div>
         {{gh-member-settings-form member=member