From 7c869b623f3965f9b4a9fa0b5a797f8febf10e72 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 13:15:45 -0400
Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20org=20nav=20?=
 =?UTF-8?q?to=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/auth/addon/authenticators/password.js  | 17 ++++++++--
 .../rose/components/dropdown/_button.scss     |  3 +-
 .../rose/components/dropdown/_link.scss       |  3 +-
 ui/core/app/routes/scopes/scope.js            |  2 ++
 ui/core/app/styles/app.scss                   |  6 ++++
 ui/core/app/templates/application.hbs         | 32 +++++++++++++++----
 6 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/addons/auth/addon/authenticators/password.js b/addons/auth/addon/authenticators/password.js
index 814fffc22..7403eae65 100644
--- a/addons/auth/addon/authenticators/password.js
+++ b/addons/auth/addon/authenticators/password.js
@@ -64,7 +64,7 @@ export default class PasswordAuthenticator extends BaseAuthenticator {
       case 404:
         return reject();
     }
-    return resolve(data);
+    return resolve(this.normalizeData(data));
   }
 
   /**
@@ -93,7 +93,20 @@ export default class PasswordAuthenticator extends BaseAuthenticator {
     const authEndpointURL = this.buildAuthEndpointURL(options);
     const response = await fetch(authEndpointURL, { method: 'post', body });
     const json = await response.json();
-    return response.status < 400 ? resolve(json) : reject();
+    return response.status < 400 ? resolve(this.normalizeData(json)) : reject();
+  }
+
+  /**
+   * Normalizes the auth data.  Adds convenience booleans depending on the
+   * scope within which the session is authenticated:  isGlobal, isOrg.
+   * @param {object} data
+   * @return {object}
+   */
+  normalizeData(data) {
+    // Add booleans indicated the scope type
+    data.isGlobal = (data?.scope?.type === 'global');
+    data.isOrg = (data?.scope?.type === 'org');
+    return data;
   }
 
   /**
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
index 2fe195562..b15bb016e 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_button.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
@@ -6,8 +6,7 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
-  // Targeting min-width of ~200
-  min-width: (sizing.rems(m)) * 10;
+  min-width: (sizing.rems(m)) * 13;
   border: 0;
   padding: 0 sizing.rems(s);
   text-decoration: none;
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_link.scss b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
index 6fd5d039f..695b2e4ba 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_link.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
@@ -6,8 +6,7 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
-  // Targeting min-width of ~200
-  min-width: (sizing.rems(m)) * 10;
+  min-width: (sizing.rems(m)) * 13;
   border: 0;
   padding: 0 sizing.rems(s);
   text-decoration: none;
diff --git a/ui/core/app/routes/scopes/scope.js b/ui/core/app/routes/scopes/scope.js
index 2cbe96d88..ef8aa1273 100644
--- a/ui/core/app/routes/scopes/scope.js
+++ b/ui/core/app/routes/scopes/scope.js
@@ -38,6 +38,8 @@ export default class ScopesScopeRoute extends Route {
    * Set scope in application controller
    */
   afterModel() {
+    const orgScopes = this.modelFor('scopes').filterBy('isOrg', true);
+    this.controllerFor('application').set('orgScopes', orgScopes);
     const scope = this.modelFor('scopes.scope');
     this.controllerFor('application').set('scope', scope);
   }
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 6a13be697..108e7c619 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -67,6 +67,12 @@
     display: none;
   }
 
+  .rose-dropdown {
+    .rose-icon {
+      transform: scale(0.7);
+    }
+  }
+
   &.loading {
     &::after {
       animation: gradient 1s linear infinite;
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index a40b1dcba..80472c19a 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -6,16 +6,34 @@
   <layout.header>
     <Rose::Header class="{{if (is-loading) " loading"}}" as |header|>
       <header.brand @logo="logo-boundary" @text={{app-name}} />
+
       {{#if this.session.isAuthenticated}}
-        <header.nav as |nav|>
-          {{#if this.scope.isOrg}}
-            <nav.link @route="scopes.scope" @model={{this.scope}}>{{this.scope.displayName}}</nav.link>
-          {{/if}}
-        </header.nav>
+        {{#if this.scope.isOrg}}
+          <header.nav as |nav|>
+            <nav.dropdown
+              @text={{this.scope.displayName}}
+              @icon="boundary-icons/org" as |dropdown|
+            >
+              {{#if this.session.data.authenticated.isGlobal}}
+                <dropdown.link @route="scopes.scope" @model="global">
+                  {{t "titles.global"}}
+                </dropdown.link>
+                {{#each this.orgScopes as |scope|}}
+                  <dropdown.link @route="scopes.scope" @model={{scope.id}}>
+                    {{scope.displayName}}
+                  </dropdown.link>
+                {{/each}}
+              {{else}}
+                <dropdown.link @route="scopes.scope" @model={{this.scope.id}}>
+                  {{this.scope.displayName}}
+                </dropdown.link>
+              {{/if}}
+            </nav.dropdown>
+          </header.nav>
+        {{/if}}
 
         <header.utilities as |utilities|>
           <utilities.dropdown
-            @text="user@example.net"
             @iconOnly={{true}}
             @icon="boundary-icons/user-profile" as |dropdown|
           >
@@ -29,7 +47,9 @@
             </dropdown.button>
           </utilities.dropdown>
         </header.utilities>
+
       {{/if}}
+
     </Rose::Header>
   </layout.header>
 

From 26b1632d4ddcb84f248c6ab6faef2883570a676a Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 13:48:41 -0400
Subject: [PATCH 02/11] =?UTF-8?q?style:=20=F0=9F=92=84=20tweak=20the=20sid?=
 =?UTF-8?q?ebar=20to=20better=20align=20with=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/nav/sidebar/index.hbs |  1 +
 .../addon/styles/rose/components/nav/_sidebar.scss   | 12 +++++++++++-
 ui/core/app/styles/app.scss                          |  5 ++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/addons/rose/addon/components/rose/nav/sidebar/index.hbs b/addons/rose/addon/components/rose/nav/sidebar/index.hbs
index 40e3e9eaf..28250c8d6 100644
--- a/addons/rose/addon/components/rose/nav/sidebar/index.hbs
+++ b/addons/rose/addon/components/rose/nav/sidebar/index.hbs
@@ -2,6 +2,7 @@
   ...attributes
   class="rose-nav-sidebar"
   id={{this.id}}
+  title={{@title}}
   aria-labelledby={{if @title (concat "title-" this.id)}}>
 
   {{#if @title}}
diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
index 010a3bd52..101f3753f 100644
--- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
@@ -3,10 +3,20 @@
 
 .rose-nav-sidebar {
   $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs);
+  $yPadding: sizing.rems(xs);
 
+  padding-top: $yPadding;
+  padding-bottom: $yPadding;
+  border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  // TODO revisit the title
   .rose-nav-title {
     @include type.type(xs, semibold);
-    display: block;
+    display: none;
     color: var(--ui-gray);
     text-transform: uppercase;
     $lineHeight: 20 / 12;
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 108e7c619..fbdbea206 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -19,7 +19,6 @@
 }
 
 .rose-nav-sidebar {
-  margin-bottom: sizing.rems(l);
   margin-top: sizing.rems(xxl);
 
   & + .rose-nav-sidebar {
@@ -96,9 +95,9 @@
 
 .copyable {
   .copyable-button {
+    margin: 0;
+    padding: 0 sizing.rems(xxs);
     position: relative;
     top: -2px;
-    padding: 0 sizing.rems(xxs);
-    margin: 0;
   }
 }

From 816efec6ed3838b26c29144b3ac771c4f4821efa Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 14:15:20 -0400
Subject: [PATCH 03/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20show=20login=20na?=
 =?UTF-8?q?me=20in=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/auth/addon/authenticators/password.js | 9 +++++++--
 ui/core/app/templates/application.hbs        | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/addons/auth/addon/authenticators/password.js b/addons/auth/addon/authenticators/password.js
index 7403eae65..aa0b13e87 100644
--- a/addons/auth/addon/authenticators/password.js
+++ b/addons/auth/addon/authenticators/password.js
@@ -93,19 +93,24 @@ export default class PasswordAuthenticator extends BaseAuthenticator {
     const authEndpointURL = this.buildAuthEndpointURL(options);
     const response = await fetch(authEndpointURL, { method: 'post', body });
     const json = await response.json();
-    return response.status < 400 ? resolve(this.normalizeData(json)) : reject();
+    return response.status < 400
+      ? resolve(this.normalizeData(json, login_name))
+      : reject();
   }
 
   /**
    * Normalizes the auth data.  Adds convenience booleans depending on the
    * scope within which the session is authenticated:  isGlobal, isOrg.
+   * If a `username` is provided, appends this to the data.
    * @param {object} data
+   * @param {string} username
    * @return {object}
    */
-  normalizeData(data) {
+  normalizeData(data, username) {
     // Add booleans indicated the scope type
     data.isGlobal = (data?.scope?.type === 'global');
     data.isOrg = (data?.scope?.type === 'org');
+    if (username) data.username = username;
     return data;
   }
 
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 80472c19a..29dfe48eb 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -34,7 +34,7 @@
 
         <header.utilities as |utilities|>
           <utilities.dropdown
-            @iconOnly={{true}}
+            @text={{this.session.data.authenticated.username}}
             @icon="boundary-icons/user-profile" as |dropdown|
           >
             {{!-- <dropdown.link @route="account.change-password">

From 9f43a4b276d36596a08ba9acf2f6bd045773e6af Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 16:19:53 -0400
Subject: [PATCH 04/11] chore: tweak styles to align with design

---
 addons/rose/addon/styles/rose/components/card/_link.scss    | 4 ++++
 addons/rose/addon/styles/rose/components/header/_index.scss | 3 ++-
 addons/rose/addon/styles/rose/variables/color/_css.scss     | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index a62df13f8..c31ccbdbd 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -1,6 +1,8 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+$xxxs: sizing.rems(xxxs); // 2
+
 .rose-card-link {
   @include type.type(s);
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
@@ -9,6 +11,8 @@
   display: inline-flex;
   flex-direction: column;
   margin: 0 sizing.rems(m) sizing.rems(m) 0;
+  box-shadow: 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)),
+    0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4));
 
   a {
     text-decoration: none;
diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss
index 6ba8aba30..f464a4f80 100644
--- a/addons/rose/addon/styles/rose/components/header/_index.scss
+++ b/addons/rose/addon/styles/rose/components/header/_index.scss
@@ -12,7 +12,8 @@
   display: grid;
   grid-template-areas: 'brand nav utilities';
   grid-template-columns: 0.01fr auto 1fr;
-  background: var(--black) linear-gradient(90deg, #191a1c 0%, #1b212d 100%);
+  background: var(--black);
+  box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
 }
 
 @media (max-width: media.width(small)) {
diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index cb000c5df..5c910e93a 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -83,7 +83,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     // poles
-    --subtle: #{darken(color(ui-gray, 900), 3%)};
+    --subtle: var(--black);
     --stark: #{color(ui-gray, 100)};
     --stark-components: 255, 255, 255;
 

From 5200f03417d561cf2a24e8caf42efab3833e4d14 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 16:31:39 -0400
Subject: [PATCH 05/11] chore: generate more realistic scope IDs

---
 ui/core/mirage/factories/org.js     | 3 ---
 ui/core/mirage/factories/project.js | 3 ---
 ui/core/mirage/factories/scope.js   | 6 ++++++
 3 files changed, 6 insertions(+), 6 deletions(-)
 delete mode 100644 ui/core/mirage/factories/org.js
 delete mode 100644 ui/core/mirage/factories/project.js

diff --git a/ui/core/mirage/factories/org.js b/ui/core/mirage/factories/org.js
deleted file mode 100644
index fe119cba6..000000000
--- a/ui/core/mirage/factories/org.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import factory from '../generated/factories/org';
-
-export default factory.extend();
diff --git a/ui/core/mirage/factories/project.js b/ui/core/mirage/factories/project.js
deleted file mode 100644
index 2a3aae2be..000000000
--- a/ui/core/mirage/factories/project.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import factory from '../generated/factories/project';
-
-export default factory.extend();
diff --git a/ui/core/mirage/factories/scope.js b/ui/core/mirage/factories/scope.js
index d60486d15..e008c8249 100644
--- a/ui/core/mirage/factories/scope.js
+++ b/ui/core/mirage/factories/scope.js
@@ -1,10 +1,16 @@
 import factory from '../generated/factories/scope';
 import { trait } from 'ember-cli-mirage';
+import { random } from 'faker';
 
 export default factory.extend({
 
   type: 'global',
 
+  id() {
+    const id = new Array(10).fill(0).map(() => random.alphaNumeric()).join('');
+    return `s_${id}`;
+  },
+
   withChildren: trait({
     afterCreate(record, server) {
       if (record.type === 'global') {

From f2d6960ad915981c777ac2d14c036122cf27a4ac Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 16:40:55 -0400
Subject: [PATCH 06/11] chore: improve loading animation

---
 addons/rose/addon/styles/rose/components/header/_index.scss | 4 ++++
 ui/core/app/styles/app.scss                                 | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss
index f464a4f80..8885c0207 100644
--- a/addons/rose/addon/styles/rose/components/header/_index.scss
+++ b/addons/rose/addon/styles/rose/components/header/_index.scss
@@ -14,6 +14,10 @@
   grid-template-columns: 0.01fr auto 1fr;
   background: var(--black);
   box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
+
+  @media (prefers-color-scheme: light) {
+    box-shadow: none;
+  }
 }
 
 @media (max-width: media.width(small)) {
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index fbdbea206..052ca77c0 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -76,7 +76,7 @@
     &::after {
       animation: gradient 1s linear infinite;
       background: repeating-linear-gradient(to right, var(--subtle), var(--subtle), var(--info), var(--subtle), var(--subtle));
-      background-position: 0 100%;
+      background-position: -100% 0;
       background-size: 200% auto;
       content: ' ';
       height: 3px;
@@ -86,7 +86,7 @@
       top: 100%;
 
       @keyframes gradient {
-        0%   { background-position: 0 0; }
+        0%   { background-position: -100% 0; }
         100% { background-position: -200% 0; }
       }
     }

From b2052382a871a0f6a814b1c96aa102cd4a0e2df7 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 16:51:16 -0400
Subject: [PATCH 07/11] fix: mock IDs should be deterministic

---
 ui/core/mirage/factories/scope.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/core/mirage/factories/scope.js b/ui/core/mirage/factories/scope.js
index e008c8249..1b3b868b1 100644
--- a/ui/core/mirage/factories/scope.js
+++ b/ui/core/mirage/factories/scope.js
@@ -6,9 +6,14 @@ export default factory.extend({
 
   type: 'global',
 
-  id() {
-    const id = new Array(10).fill(0).map(() => random.alphaNumeric()).join('');
-    return `s_${id}`;
+  /**
+   * Generates realistic-ish IDs while still being deterministic.
+   */
+  id(i) {
+    let id = 'tv6fv3yz8p';
+    if (i % 3) id = 'xk1i4dk50v';
+    if (i % 2) id = 's9n819zgko';
+    return `s_${id}${i}`;
   },
 
   withChildren: trait({

From 7a4c6cf5fbb92fdfb708f1be5a49d847846d8dec Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 17:38:47 -0400
Subject: [PATCH 08/11] chore: swap position of card description and ID

---
 ui/core/app/templates/scopes/scope/orgs/index.hbs     | 4 ++--
 ui/core/app/templates/scopes/scope/projects/index.hbs | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/core/app/templates/scopes/scope/orgs/index.hbs b/ui/core/app/templates/scopes/scope/orgs/index.hbs
index ed79b4e04..f073d3dcf 100644
--- a/ui/core/app/templates/scopes/scope/orgs/index.hbs
+++ b/ui/core/app/templates/scopes/scope/orgs/index.hbs
@@ -30,8 +30,8 @@
         {{#each @model as |org|}}
           <cards.link
             @title={{org.name}}
-            @subtitle={{org.id}}
-            @description={{org.description}}
+            @subtitle={{org.description}}
+            @description={{org.id}}
             @route="scopes.scope"
             @model={{org.id}}
           />
diff --git a/ui/core/app/templates/scopes/scope/projects/index.hbs b/ui/core/app/templates/scopes/scope/projects/index.hbs
index 0d05ddf30..5995e29fe 100644
--- a/ui/core/app/templates/scopes/scope/projects/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/index.hbs
@@ -30,8 +30,8 @@
         {{#each @model as |project|}}
           <cards.link
             @title={{project.name}}
-            @subtitle={{project.id}}
-            @description={{project.description}}
+            @subtitle={{project.description}}
+            @description={{project.id}}
             @route="scopes.scope.projects.project"
             @model={{project.id}}
           />

From 362d31ec4014ac227fdb144a0f08a5ad8a03e333 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 17:42:55 -0400
Subject: [PATCH 09/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20prevent=20unneces?=
 =?UTF-8?q?sary=20auth-method=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

which prevents unnecessary loading indicator jank
---
 .../app/routes/scopes/scope/authenticate.js   | 22 +++++++++----------
 ui/core/mirage/factories/scope.js             |  1 -
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/ui/core/app/routes/scopes/scope/authenticate.js b/ui/core/app/routes/scopes/scope/authenticate.js
index d011a6b45..883bbb704 100644
--- a/ui/core/app/routes/scopes/scope/authenticate.js
+++ b/ui/core/app/routes/scopes/scope/authenticate.js
@@ -9,6 +9,17 @@ export default class ScopesScopeAuthenticateRoute extends Route {
 
   // =methods
 
+  beforeModel() {
+    if (this.session.isAuthenticated) {
+      const scope = this.modelFor('scopes.scope');
+      if (scope.isGlobal) {
+        this.transitionTo('scopes.scope.orgs');
+      } else {
+        this.transitionTo('scopes.scope.projects');
+      }
+    }
+  }
+
   /**
    * Returns all auth methods for the current scope, along with the current
    * scope and all scopes (for org navigation).
@@ -28,15 +39,4 @@ export default class ScopesScopeAuthenticateRoute extends Route {
       // }])
     });
   }
-
-  redirect() {
-    if (this.session.isAuthenticated) {
-      const scope = this.modelFor('scopes.scope');
-      if (scope.isGlobal) {
-        this.transitionTo('scopes.scope.orgs');
-      } else {
-        this.transitionTo('scopes.scope.projects');
-      }
-    }
-  }
 }
diff --git a/ui/core/mirage/factories/scope.js b/ui/core/mirage/factories/scope.js
index 1b3b868b1..a14dbc719 100644
--- a/ui/core/mirage/factories/scope.js
+++ b/ui/core/mirage/factories/scope.js
@@ -1,6 +1,5 @@
 import factory from '../generated/factories/scope';
 import { trait } from 'ember-cli-mirage';
-import { random } from 'faker';
 
 export default factory.extend({
 

From 50b2a9cc8eab7d52a24be9b063f45fe3acd33437 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 17:46:23 -0400
Subject: [PATCH 10/11] style: tweak sidebar selection style to be more
 apparent

---
 addons/rose/addon/styles/rose/components/nav/_sidebar.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
index 101f3753f..fcc29ca45 100644
--- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
@@ -39,6 +39,7 @@
     &.active {
       color: var(--action);
       border-color: currentColor;
+      background-color: var(--action-subtler-1h);
     }
 
     &:hover {

From 731de5b7cb0fd8bf87a037f71311f2d8b4ab1866 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 18:59:31 -0400
Subject: [PATCH 11/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20enhance=20card=20?=
 =?UTF-8?q?link=20component=20to=20better=20match=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/card/link/index.hbs | 31 +++++--
 .../styles/rose/components/card/_link.scss    | 93 +++++++++++++++----
 .../components/rose/card/link-test.js         | 29 +++---
 .../app/templates/scopes/scope/orgs/index.hbs |  5 +-
 .../templates/scopes/scope/projects/index.hbs |  5 +-
 5 files changed, 118 insertions(+), 45 deletions(-)

diff --git a/addons/rose/addon/components/rose/card/link/index.hbs b/addons/rose/addon/components/rose/card/link/index.hbs
index 7f003a4a6..ead6f0ee9 100644
--- a/addons/rose/addon/components/rose/card/link/index.hbs
+++ b/addons/rose/addon/components/rose/card/link/index.hbs
@@ -4,17 +4,30 @@
     @route={{if @route @route "index"}}
     @model={{@model}}
   >
-    {{#if @title}}
-      <h2 class="rose-card-link-title">{{@title}}</h2>
-    {{/if}}
+    <div class="rose-card-link-header">
+      {{#if @title}}
+        <h2 class="rose-card-link-title">
+          {{#if @icon}}
+            <Rose::Icon
+              @name={{@icon}}
+              @size="medium" />
+          {{/if}}
+          <span class="rose-card-link-title-text">{{@title}}</span>
+        </h2>
+      {{/if}}
+    </div>
 
-    {{#if @subtitle}}
-      <p class="rose-card-link-subtitle">{{@subtitle}}</p>
-    {{/if}}
+    <div class="rose-card-link-body">
+      {{#if @description}}
+        <p class="rose-card-link-description">{{@description}}</p>
+      {{/if}}
+    </div>
 
-    {{#if @description}}
-      <p class="rose-card-link-description">{{@description}}</p>
-    {{/if}}
+    <div class="rose-card-link-footer">
+      {{#if @id}}
+        <p class="rose-card-link-footer-id">{{@id}}</p>
+      {{/if}}
+    </div>
   </LinkTo>
 
   {{yield}}
diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index c31ccbdbd..ad33c49c5 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use '../../variables/sizing';
+@use '../../variables/typography';
 @use '../../utilities/type';
 
 $xxxs: sizing.rems(xxxs); // 2
@@ -14,18 +16,18 @@ $xxxs: sizing.rems(xxxs); // 2
   box-shadow: 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)),
     0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4));
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--ui-gray-subtler-6);
+  }
+
   a {
     text-decoration: none;
     margin: 0;
     padding: 0;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
     height: 100%;
-    padding: sizing.rems(s);
     // TODO: Figure out better method of defining card dimensions
-    min-height: sizing.rems(m) * 6; //6 rems
-    width: sizing.rems(m) * 12; //12 rems
+    min-height: sizing.rems(m) * 8; //6 rems
+    width: sizing.rems(m) * 16; //12 rems
   }
 
   &:hover {
@@ -46,27 +48,78 @@ $xxxs: sizing.rems(xxxs); // 2
     border-color: var(--info);
   }
 
-  .rose-card-link-title {
-    $truncate-line-count: 3;
-    @include type.type(m, semibold);
-    color: var(--stark);
-    margin: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: $truncate-line-count;
-    overflow: hidden;
+  .rose-card-link-header,
+  .rose-card-link-body,
+  .rose-card-link-footer {
+    padding-left: sizing.rems(m);
+    padding-right: sizing.rems(m);
   }
 
-  .rose-card-link-subtitle {
-    color: var(--ui-gray);
+  .rose-card-link-header {
+    padding-top: sizing.rems(m);
+  }
+  .rose-card-link-footer {
+    margin-top: sizing.rems(xs) + sizing.rems(xxs);
+    padding-top: sizing.rems(xs) * 2;
+    padding-bottom: sizing.rems(xs) * 2;
+  }
+
+  .rose-card-link-footer {
+    border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+  }
+
+  .rose-card-link-title {
+    @include type.type(m, semibold);
+    display: flex;
+    color: var(--stark);
     margin: 0;
+    margin-bottom: sizing.rems(xs);
+
+    .rose-icon {
+      margin-right: sizing.rems(xs);
+
+      svg {
+        vertical-align: text-bottom;
+      }
+    }
+
+    .rose-card-link-title-text {
+      flex-grow: 1;
+      height: typography.line-height(m) * 2rem;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
   }
 
   .rose-card-link-description {
-    margin: auto 0 0;
     color: var(--ui-gray);
-    white-space: nowrap;
+    margin: 0;
+    height: typography.line-height(m) * 2rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
+
+  .rose-card-link-footer-id {
+    @include type.type(xs);
+    color: var(--ui-gray);
+    margin: 0;
+
+    &::before {
+      content: "ID";
+      color: var(--stark);
+      padding-right: sizing.rems(xs);
+    }
+  }
+
+  // .rose-card-link-description {
+  //   margin: auto 0 0;
+  //   color: var(--ui-gray);
+  //   white-space: nowrap;
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  // }
 }
diff --git a/addons/rose/tests/integration/components/rose/card/link-test.js b/addons/rose/tests/integration/components/rose/card/link-test.js
index 78a02af4b..288679791 100644
--- a/addons/rose/tests/integration/components/rose/card/link-test.js
+++ b/addons/rose/tests/integration/components/rose/card/link-test.js
@@ -10,9 +10,9 @@ module('Integration | Component | rose/card/link', function (hooks) {
     await render(hbs`<Rose::Card::Link />`);
     assert.ok(find('article'));
     assert.ok(find('.rose-card-link'));
-    assert.notOk(find('.rose-card-link-title'));
-    assert.notOk(find('.rose-card-link-subtitle'));
-    assert.notOk(find('.rose-card-link-description'));
+    assert.ok(find('.rose-card-link-header'));
+    assert.ok(find('.rose-card-link-body'));
+    assert.ok(find('.rose-card-link-footer'));
   });
 
   test('it renders with @title', async function (assert) {
@@ -24,22 +24,27 @@ module('Integration | Component | rose/card/link', function (hooks) {
     );
   });
 
-  test('it renders with @subtitle', async function (assert) {
-    await render(hbs`<Rose::Card::Link @subtitle="card subtitle" />`);
-    assert.equal(
-      find('.rose-card-link-subtitle').textContent.trim(),
-      'card subtitle'
-    );
-  });
-
   test('it renders with @description', async function (assert) {
     await render(hbs`<Rose::Card::Link @description="card description" />`);
     assert.equal(
-      find('.rose-card-link-description').textContent.trim(),
+      find('.rose-card-link-body').textContent.trim(),
       'card description'
     );
   });
 
+  test('it renders with @id', async function (assert) {
+    await render(hbs`<Rose::Card::Link @id="card_id" />`);
+    assert.equal(
+      find('.rose-card-link-footer-id').textContent.trim(),
+      'card_id'
+    );
+  });
+
+  test('it renders with @icon', async function (assert) {
+    await render(hbs`<Rose::Card::Link @title="foo" @icon="alert-circle-outline" />`);
+    assert.ok(find('.rose-icon'));
+  });
+
   test('it renders with attributes', async function (assert) {
     await render(hbs`<Rose::Card::Link id="card" />`);
     assert.ok(find('#card'));
diff --git a/ui/core/app/templates/scopes/scope/orgs/index.hbs b/ui/core/app/templates/scopes/scope/orgs/index.hbs
index f073d3dcf..30c211450 100644
--- a/ui/core/app/templates/scopes/scope/orgs/index.hbs
+++ b/ui/core/app/templates/scopes/scope/orgs/index.hbs
@@ -30,8 +30,9 @@
         {{#each @model as |org|}}
           <cards.link
             @title={{org.name}}
-            @subtitle={{org.description}}
-            @description={{org.id}}
+            @description={{org.description}}
+            @id={{org.id}}
+            @icon="boundary-icons/org"
             @route="scopes.scope"
             @model={{org.id}}
           />
diff --git a/ui/core/app/templates/scopes/scope/projects/index.hbs b/ui/core/app/templates/scopes/scope/projects/index.hbs
index 5995e29fe..6173aeffb 100644
--- a/ui/core/app/templates/scopes/scope/projects/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/index.hbs
@@ -30,8 +30,9 @@
         {{#each @model as |project|}}
           <cards.link
             @title={{project.name}}
-            @subtitle={{project.description}}
-            @description={{project.id}}
+            @description={{project.description}}
+            @id={{project.id}}
+            @icon="boundary-icons/project"
             @route="scopes.scope.projects.project"
             @model={{project.id}}
           />