Updated members list screen UI

app/components/gh-members-chart.hbs

@@ -3,9 +3,9 @@
 >
 
     {{!-- Chart title/filter graph --}}
-    <div class="flex-auto gh-content-box gh-members-chart-box">
+    <div class="flex-auto gh-content-box black gh-members-chart-box">
         <div class="flex justify-between items-center gh-members-chart-header">
-            <h2 class="f-small ttu white fw5 mb0">Total members</h2>
+            <h2 class="gh-members-chart-summary-heading">Total members</h2>
             <div class="view-actions">
                 <div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
                     <PowerSelect
@@ -45,19 +45,19 @@
     {{!-- Summary --}}
     <div class="gh-content-box grey gh-members-chart-summary flex flex-column justify-between">
         <div class="flex-auto flex flex-column justify-center items-start pa4">
-            <h3 class="f-small ttu black fw5">Total Members</h3>
+            <h3 class="gh-members-chart-summary-heading">Total Members</h3>
             <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
         </div>
         <div class="flex-auto flex flex-column justify-center items-start pa4">
             {{#if (eq this.selectedRange.days "all-time")}}
-                <h3 class="f-small ttu black fw5">All time signups</h3>
+                <h3 class="gh-members-chart-summary-heading">All time signups</h3>
             {{else}}
-                <h3 class="f-small ttu black fw5">Signed up in the last {{this.selectedRange.days}} days</h3>
+                <h3 class="gh-members-chart-summary-heading">Signed up in the last {{this.selectedRange.days}} days</h3>
             {{/if}}
             <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
         </div>
         <div class="flex-auto flex flex-column justify-center items-start pa4">
-            <h3 class="f-small ttu black fw5">Signed up today</h3>
+            <h3 class="gh-members-chart-summary-heading">Signed up today</h3>
             <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
         </div>
     </div>

app/components/gh-members-chart.js

@@ -101,10 +101,10 @@ export default Component.extend({
                 cubicInterpolationMode: 'monotone',
                 data: dateValues,
                 fill: false,
-                backgroundColor: 'rgba(181,255,24,1.0)',
+                backgroundColor: '#B5FF18',
                 pointRadius: 0,
                 pointHitRadius: 10,
-                borderColor: 'rgba(181,255,24,1.0)',
+                borderColor: '#B5FF18',
                 borderJoinStyle: 'miter'
             }]
         });
@@ -133,7 +133,7 @@ export default Component.extend({
                 intersect: false,
                 mode: 'index',
                 displayColors: false,
-                backgroundColor: '#343f44',
+                backgroundColor: '#24272B',
                 xPadding: 7,
                 yPadding: 7,
                 cornerRadius: 5,
@@ -165,8 +165,8 @@ export default Component.extend({
                     labelString: 'Date',
                     gridLines: {
                         drawTicks: false,
-                        color: (this.nightShift ? '#333F44' : '#3E3F41'),
-                        zeroLineColor: (this.nightShift ? '#333F44' : '#3E3F41')
+                        color: (this.nightShift ? '#333F44' : '#394047'),
+                        zeroLineColor: (this.nightShift ? '#333F44' : '#394047')
                     },
                     ticks: {
                         display: false,

app/styles/components/lists.css

@@ -5,7 +5,7 @@
     background: var(--white);
     display: table;
     width: 100%;
-    border-bottom: var(--main-area-divider-color) 1px solid;
+    border-bottom: var(--main-color-area-divider) 1px solid;
 }
 
 .gh-list.tabbed {
@@ -44,7 +44,7 @@
 .gh-list-header {
     display: table-cell;
     vertical-align: middle;
-    border-bottom: var(--main-area-divider-color) 1px solid;
+    border-bottom: var(--main-color-area-divider) 1px solid;
     font-size: 1.2rem;
     font-weight: 500;
     letter-spacing: 0.1px;

app/styles/layouts/apps.css

@@ -15,7 +15,7 @@
 
 .integrations-wrapper {
     background: linear-gradient(315deg,var(--whitegrey-l1),var(--whitegrey-l2));
-    padding: var(--main-area-padding) 0;
+    padding: var(--main-layout-area-padding) 0;
 }
 
 .integrations-directory {

app/styles/layouts/content.css

@@ -74,6 +74,12 @@
     background: var(--whitegrey-l1);
 }
 
+.gh-canvas-header.grey .gh-contentfilter-menu-trigger,
+.gh-canvas-header.grey .gh-contentfilter-menu-trigger:focus,
+.gh-canvas-header.grey .gh-contentfilter-menu-trigger--active {
+    background: var(--main-color-content-greybg);
+}
+
 .gh-contentfilter-menu-trigger svg path {
     stroke: var(--black);
 }

app/styles/layouts/main.css

@@ -4,7 +4,7 @@
     --mainmenu-color-active: var(--black);
     --mainmenu-color-active-bg: var(--whitegrey);
     --mainmenu-width: 340px;
-    --mainmenu-padding: var(--main-area-padding);
+    --mainmenu-padding: var(--main-layout-area-padding);
 }
 
 /* Global Layout
@@ -113,14 +113,14 @@
     min-width: 0;
     /* background: linear-gradient(315deg,var(--whitegrey-l2),var(--white)); */
     transform: translateX(0);
-    border-right: 1px solid var(--main-area-divider-color);
+    border-right: 1px solid var(--main-color-area-divider);
 }
 
 .gh-nav-menu {
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    height: var(--main-vertical-panel-height);
+    height: var(--main-layout-vpanel-height);
     padding: var(--mainmenu-padding);
 }
 
@@ -356,7 +356,7 @@
     padding: 7px calc(var(--mainmenu-padding) - 2px) 7px calc(var(--mainmenu-padding) + 5px); */
 }
 
-.gh-nav-list .active::after {
+/* .gh-nav-list .active::after {
     content: "";
     position: absolute;
     width: 4px;
@@ -364,7 +364,7 @@
     bottom: 0;
     left: 0;
     background: var(--black);
-}
+} */
 
 .gh-nav-list a:not(.active):hover,
 .gh-nav-list button.main-menu-item:hover {
@@ -917,8 +917,9 @@
     border-color: transparent;
 }
 
+.gh-canvas-header.grey,
 .gh-main-grey .gh-canvas-header {
-    background: var(--whitegrey-l2);
+    background: var(--main-color-content-greybg);
 }
 
 .gh-main-grey-gradient .gh-canvas-header {
@@ -927,7 +928,7 @@
 }
 
 .gh-canvas-header-content {
-    height: calc(var(--main-vertical-panel-height) - 1px);
+    height: calc(var(--main-layout-vpanel-height) - 1px);
     position: relative;
     flex-shrink: 0;
     display: flex;
@@ -937,9 +938,9 @@
 
 .gh-main-width {
     width: 100%;
-    max-width: var(--main-content-maxwidth);
+    max-width: var(--main-layout-content-maxwidth);
     margin: 0 auto;
-    padding: 0 var(--main-content-sidepadding);
+    padding: 0 var(--main-layout-content-sidepadding);
 }
 
 .gh-main-white .gh-canvas-header {
@@ -994,6 +995,7 @@
     opacity: 1.0;
 }
 
+
 /* What's new badges
 /* ---------------------------------------------------- */
 .gh-whats-new-badge-account {
@@ -1061,7 +1063,7 @@
     position: relative;
     flex-grow: 1;
     padding-top: 0;
-    padding-bottom: var(--main-area-padding);
+    padding-bottom: var(--main-layout-area-padding);
 }
 
 .view-content {
@@ -1075,17 +1077,17 @@
 
 .view-actions input[type="text"] {
     padding: 8px 8px 9px;
-    height: 35px;
+    height: 33px;
     font-size: 1.35rem;
 }
 
-.view-actions .gh-btn {
+.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue) {
     border: none;
     box-shadow: none;
     background: color-mod(var(--whitegrey-l1) l(-3%));
 }
 
-.view-actions .gh-btn:hover {
+.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):hover {
     background: var(--whitegrey);
 }
 
@@ -1134,6 +1136,41 @@
     animation-duration: 0.01s;
 }
 
+.gh-canvas-header.black {
+    background: var(--black);
+}
+
+.gh-canvas-header.black .gh-canvas-title,
+.gh-canvas-header.black .gh-canvas-title a {
+    color: var(--whitegrey);
+}
+
+.gh-canvas-header.black .view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green),
+.gh-canvas-header.black .view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):hover {
+    background: var(--darkgrey);
+}
+
+.gh-canvas-header.black .view-actions .gh-btn.gh-btn-primary,
+.gh-canvas-header.black .view-actions .gh-btn.gh-btn-primary:hover {
+    background: var(--white) !important;
+    color: var(--black) !important;
+}
+
+.gh-canvas-header.black .view-actions .gh-btn svg {
+    fill: var(--whitegrey);
+}
+
+.gh-canvas-header.black .gh-contentfilter-menu-trigger, 
+.gh-canvas-header.black .gh-contentfilter-menu-trigger--active, 
+.gh-canvas-header.black .gh-contentfilter-menu-trigger:focus {
+    background: var(--black);
+    color: var(--whitegrey);
+}
+
+.gh-canvas-header.black .gh-contentfilter-menu-trigger svg path {
+    stroke: var(--whitegrey);
+}
+
 @media (max-width: 400px) {
     .view-header {
         padding: 0 7px;

app/styles/layouts/members.css

@@ -93,7 +93,16 @@
     min-width: 220px;
     padding-left: 32px;
     border: none;
-    background: var(--whitegrey-l1);
+    background: color-mod(var(--whitegrey) l(+1%));
+}
+
+.members-header.grey .view-actions .gh-btn,
+.members-header.grey .view-actions input.gh-members-list-searchfield {
+    background: color-mod(var(--whitegrey) l(-1%));
+}
+
+.members-header .view-actions input.gh-members-list-searchfield:focus {
+    background: var(--white);
 }
 
 .members-header .view-actions .gh-input-search-icon {
@@ -101,6 +110,11 @@
     height: 16px;
     top: 9px;
     left: 9px;
+    fill: var(--middarkgrey);
+}
+
+.members-header.black .view-actions input.gh-members-list-searchfield {
+    background: var(--darkgrey-d1);
 }
 
 .gh-members-list-searchfield.active {
@@ -159,19 +173,17 @@ p.gh-members-list-email {
 }
 
 .gh-members-chart {
-    padding-bottom: var(--main-area-padding);
+    padding-bottom: var(--main-layout-area-padding);
 }
 
 .gh-members-chart-box {
-    background: var(--black);
-    border: none;
-    margin-right: var(--main-area-padding);
+    margin-right: var(--main-layout-area-padding);
 }
 
 .gh-members-chart-header {
     padding: 12px 7px 12px 12px;
     margin-bottom: 10px;
-    border-bottom: var(--darkgrey) 1px solid;
+    border-bottom: var(--main-color-area-divider) 1px solid;
 }
 
 .gh-members-chart-header .gh-contentfilter {
@@ -181,11 +193,11 @@ p.gh-members-list-email {
 
 .gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger {
     border-radius: 4px;
-    box-shadow: 0 0 0 1px var(--darkgrey);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     height: 16px;
     padding: 0 8px;
-    background: var(--black);
-    color: var(--white);
+    background: var(--white);
+    color: var(--black);
 }
 
 .gh-members-chart-dropdown {
@@ -203,6 +215,16 @@ p.gh-members-list-email {
     min-width: 244px;
 }
 
+.gh-members-chart-summary-heading {
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+    margin: 0;
+    padding: 0;
+    color: var(--black);
+}
+
 .gh-members-chart-summary-data {
     font-size: 3.9rem;
     color: var(--black);
@@ -210,6 +232,41 @@ p.gh-members-list-email {
     font-weight: 600;
 }
 
+.gh-members-chart.black {
+    background: var(--black);
+}
+
+.gh-members-chart.black .gh-members-chart-header {
+    border-color: var(--darkgrey);
+}
+
+.gh-members-chart.black .gh-members-chart-summary-heading {
+    color: var(--midlightgrey);
+}
+
+.gh-members-chart.black .gh-members-chart-summary-data {
+    color: var(--whitegrey);
+}
+
+.gh-members-chart.black .gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger,
+.gh-members-chart-box.black .gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger {
+    background: transparent;
+    border: 1px solid var(--darkgrey);
+    color: var(--whitegrey);
+}
+
+.gh-members-chart.black .gh-contentfilter-menu-trigger svg path {
+    stroke: var(--whitegrey) !important;
+}
+
+.gh-members-chart-box.black .gh-members-chart-summary-heading {
+    color: var(--lightgrey);
+}    
+
+.gh-members-chart-box.black .gh-members-chart-header {
+    border-color: var(--darkgrey);
+}
+
 .members-header .gh-contentfilter {
     margin-right: 0;
 }
@@ -229,6 +286,9 @@ p.gh-members-list-email {
     width: 205px;
 }
 
+.gh-members-chart + .content-list .members-list {
+    margin-top: var(--main-layout-area-padding);
+}
 
 @media (max-width: 1100px) {
     .gh-members-chart-summary-data {

app/styles/layouts/settings.css

@@ -149,7 +149,7 @@
     letter-spacing: 0.35px;
     font-size: 1.2rem;
     padding: 8px 0;
-    border-bottom: 1px solid var(--main-area-divider-color);
+    border-bottom: 1px solid var(--main-color-area-divider);
 }
 
 .gh-first-header {

app/styles/patterns/boxes.css

@@ -65,12 +65,24 @@
 }
 
 .gh-content-box {
-    border: 1px solid var(--main-area-divider-color);
+    border: 1px solid var(--whitegrey);
     border-radius: 4px;
     background: var(--white);
 }
 
 .gh-content-box.grey {
     border: none;
-    background: var(--whitegrey-l1);
+    background: var(--main-color-content-greybg);
+}
+
+.gh-content-box.darkgrey {
+    border: none;
+    background: color-mod(var(--black) l(+6%) s(+2%));
+    color: var(--white);
+}
+
+.gh-content-box.black {
+    border: none;
+    background: var(--black);
+    color: var(--white);
 }

app/styles/patterns/buttons.css

@@ -69,9 +69,9 @@ fieldset[disabled] .gh-btn {
 /* ---------------------------------------------------------- */
 .gh-btn-primary,
 .gh-btn-black {
-    background: var(--black) !important;
+    background: var(--black);
     border: none;
-    color: var(--white) !important;
+    color: var(--white);
     font-weight: 600;
     box-shadow: none;
 }

app/styles/patterns/global.css

@@ -129,18 +129,20 @@
 
     /* Global, high-level UI colors */
     --main-bg-color: rgb(255, 255, 255);
-    --main-area-divider-color: var(--whitegrey-d1);
-    --main-area-padding: 32px;
-    --list-divider-color: color-mod(var(--black) a(5%));
-    --main-vertical-panel-height: 96px;
-    --main-content-maxwidth: 1320px;
-    --main-content-sidepadding: 48px;
-    --main-content-sidedistance: calc((100vw - var(--mainmenu-width) - var(--main-content-maxwidth)) / 2) - var(--main-area-padding);
+    --main-color-area-divider: var(--whitegrey-d1);
+    --main-color-content-greybg: color-mod(var(--whitegrey-l2) l(-1%));
+
+    --list-color-divider: color-mod(var(--black) a(5%));
     
     /* Special colours */
     --transparent:transparent;
     --errorbg-lightred: rgba(240, 82, 48, 0.05);
-
+    
+    /* Global layout values */
+    --main-layout-content-sidepadding: 48px;
+    --main-layout-content-maxwidth: 1320px;
+    --main-layout-area-padding: 32px;
+    --main-layout-vpanel-height: 96px;
     
     /* Style values */
     --border-radius: 4px;