From cae2f4ff63800ac07a928484066b217c5613d87e Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 30 Sep 2020 12:06:37 -0400
Subject: [PATCH 1/8] feautre: enable dark mode

---
 .../styles/rose/variables/color/_css.scss     | 119 +++++++++---------
 ui/core/app/styles/app.scss                   |   2 +-
 2 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index 6817be7a4..d4fbf61bb 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -79,64 +79,63 @@
   --ui-header-subtler: #{color(ui-cool-gray, 700)};
 }
 
-// NOTE:  dark mode is disabled for now.
 // Dark Mode
-// @media (prefers-color-scheme: dark) {
-//   :root {
-//     // poles
-//     --subtle: #{darken(color(ui-gray, 900), 2%)};
-//     --stark: var(--white);
-//     --stark-components: 255, 255, 255;
-//
-//     // theme colors
-//     --info-subtler-3: #{color(blue, 800)};
-//     --info-subtler-2: #{color(blue, 700)};
-//     --info-subtler-1: #{color(blue, 600)};
-//     --info: #{color(blue)};
-//     --info-starker-1: #{color(blue, 300)};
-//     --info-starker-2: #{color(blue, 200)};
-//
-//     --alert-subtler-2: #{color(orange, 900)};
-//     --alert-subtler-1: #{color(orange, 800)};
-//     --alert: #{color(orange)};
-//     --alert-starker-1: #{color(orange, 200)};
-//
-//     --warning-subtler-2: #{color(yellow, 900)};
-//     --warning-subtler-1: #{color(yellow, 800)};
-//     --warning: #{color(yellow)};
-//     --warning-starker-1: #{color(yellow, 200)};
-//
-//     --failure-subtler-2: #{color(red, 900)};
-//     --failure-subtler-1: #{color(red, 800)};
-//     --failure: #{lighten(color(red, 400), 2.5%)};
-//     --failure-starker-1: #{color(red, 300)};
-//
-//     --success-subtler-2: #{color(green, 900)};
-//     --success-subtler-1: #{color(green, 800)};
-//     --success: #{color(green)};
-//     --success-starker-1: #{color(green, 200)};
-//
-//     --action-subtler-2: #{color(blue, 900)};
-//     --action-subtler-1h: #{color(blue, 800)};
-//     --action-subtler-1: #{color(blue, 800)};
-//     --action: #{color(blue, 300)};
-//     --action-starker-1: #{color(blue, 200)};
-//
-//     --ui-border-subtler-1: #{color(ui-gray, 800)};
-//     --ui-border: #{color(ui-gray, 700)};
-//
-//     --ui-gray-subtler-6: #{color(ui-gray, 900)};
-//     --ui-gray-subtler-5: #{color(ui-gray, 800)};
-//     --ui-gray-subtler-4: #{color(ui-gray, 700)};
-//     --ui-gray-subtler-3: #{color(ui-gray, 600)};
-//     --ui-gray-subtler-2: #{color(ui-gray, 500)};
-//     --ui-gray-subtler-1: #{color(ui-gray, 400)};
-//     --ui-gray: #{color(ui-gray, 300)};
-//     --ui-gray-starker-1: #{color(ui-gray, 200)};
-//     --ui-gray-starker-2: #{color(ui-gray, 100)};
-//     --ui-gray-starker-3: #{color(ui-gray, 050)};
-//     --ui-gray-starker-4: #{color(ui-gray, 010)};
-//
-//     --ui-header-subtler: #{color(ui-cool-gray, 100)};
-//   }
-// }
+@media (prefers-color-scheme: dark) {
+  :root {
+    // poles
+    --subtle: #{darken(color(ui-gray, 900), 2%)};
+    --stark: var(--white);
+    --stark-components: 255, 255, 255;
+
+    // theme colors
+    --info-subtler-3: #{color(blue, 800)};
+    --info-subtler-2: #{color(blue, 700)};
+    --info-subtler-1: #{color(blue, 600)};
+    --info: #{color(blue)};
+    --info-starker-1: #{color(blue, 300)};
+    --info-starker-2: #{color(blue, 200)};
+
+    --alert-subtler-2: #{color(orange, 900)};
+    --alert-subtler-1: #{color(orange, 800)};
+    --alert: #{color(orange)};
+    --alert-starker-1: #{color(orange, 200)};
+
+    --warning-subtler-2: #{color(yellow, 900)};
+    --warning-subtler-1: #{color(yellow, 800)};
+    --warning: #{color(yellow)};
+    --warning-starker-1: #{color(yellow, 200)};
+
+    --failure-subtler-2: #{color(red, 900)};
+    --failure-subtler-1: #{color(red, 800)};
+    --failure: #{lighten(color(red, 400), 2.5%)};
+    --failure-starker-1: #{color(red, 300)};
+
+    --success-subtler-2: #{color(green, 900)};
+    --success-subtler-1: #{color(green, 800)};
+    --success: #{color(green)};
+    --success-starker-1: #{color(green, 200)};
+
+    --action-subtler-2: #{color(blue, 900)};
+    --action-subtler-1h: #{color(blue, 800)};
+    --action-subtler-1: #{color(blue, 800)};
+    --action: #{color(blue, 300)};
+    --action-starker-1: #{color(blue, 200)};
+
+    --ui-border-subtler-1: #{color(ui-gray, 800)};
+    --ui-border: #{color(ui-gray, 700)};
+
+    --ui-gray-subtler-6: #{color(ui-gray, 900)};
+    --ui-gray-subtler-5: #{color(ui-gray, 800)};
+    --ui-gray-subtler-4: #{color(ui-gray, 700)};
+    --ui-gray-subtler-3: #{color(ui-gray, 600)};
+    --ui-gray-subtler-2: #{color(ui-gray, 500)};
+    --ui-gray-subtler-1: #{color(ui-gray, 400)};
+    --ui-gray: #{color(ui-gray, 300)};
+    --ui-gray-starker-1: #{color(ui-gray, 200)};
+    --ui-gray-starker-2: #{color(ui-gray, 100)};
+    --ui-gray-starker-3: #{color(ui-gray, 050)};
+    --ui-gray-starker-4: #{color(ui-gray, 010)};
+
+    --ui-header-subtler: #{color(ui-cool-gray, 100)};
+  }
+}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 9e72b055f..3acf2edab 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -68,7 +68,7 @@
       right: 0;
       height: 3px;
 
-      background: repeating-linear-gradient(to right, #fff, #fff, var(--info), #fff, #fff);
+      background: repeating-linear-gradient(to right, var(--subtle), var(--subtle), var(--info), var(--subtle), var(--subtle));
       background-size: 200% auto;
       background-position: 0 100%;
       animation: gradient 1s linear infinite;

From bdcb908ca714c30483f9deaf89765425ce1bd140 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 30 Sep 2020 12:15:18 -0400
Subject: [PATCH 2/8] chore: use stark/subtle instead of black/white

---
 .../rose/addon/styles/rose/components/dropdown/_button.scss   | 4 ++--
 .../rose/addon/styles/rose/components/dropdown/_dropdown.scss | 2 +-
 addons/rose/addon/styles/rose/components/dropdown/_link.scss  | 4 ++--
 addons/rose/addon/styles/rose/components/form/_checkbox.scss  | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
index 7da5009a9..2fe195562 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_button.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
@@ -25,11 +25,11 @@
   }
 
   &.rose-dropdown-button-danger {
-    --background-color: var(--white);
+    --background-color: var(--subtle);
     --color: var(--failure);
 
     &:hover {
-      --color: var(--white);
+      --color: var(--subtle);
       --background-color: var(--failure);
     }
   }
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index b3467aff9..66d3d7188 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
@@ -17,7 +17,7 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     align-items: center;
     $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
     padding: $yPadding sizing.rems(m) $yPadding sizing.rems(l);
-    color: var(--black);
+    color: var(--stark);
     border-radius: sizing.rems(xxxs);
 
     // Hide default twistie triangle
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_link.scss b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
index 5174ebbaf..6fd5d039f 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_link.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
@@ -25,11 +25,11 @@
   }
 
   &.rose-dropdown-link-danger {
-    --background-color: var(--white);
+    --background-color: var(--subtle);
     --color: var(--failure);
 
     &:hover {
-      --color: var(--white);
+      --color: var(--subtle);
       --background-color: var(--failure);
     }
   }
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index d18e8b7d9..2b5008a0b 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
@@ -77,7 +77,7 @@
       &:focus {
         ~ .rose-form-checkbox-label {
           &::before {
-            border-color: var(--info);
+            border-color: var(--action);
           }
         }
       }
@@ -85,7 +85,7 @@
       &:checked {
         ~ .rose-form-checkbox-label {
           &::before {
-            border-color: var(--info);
+            border-color: var(--action);
           }
           &::after {
             background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8'><path fill='%231563ff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");

From 2600411c700b29d0c88cf73a0cb4241aed0249b1 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 30 Sep 2020 12:57:30 -0400
Subject: [PATCH 3/8] refactor: Fix sass lint errors in ui/core

---
 ui/core/app/styles/_notify.scss |  8 ++++----
 ui/core/app/styles/app.scss     | 25 +++++++++++++------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/ui/core/app/styles/_notify.scss b/ui/core/app/styles/_notify.scss
index 438f0950c..784bc746f 100644
--- a/ui/core/app/styles/_notify.scss
+++ b/ui/core/app/styles/_notify.scss
@@ -61,19 +61,19 @@
 .ember-notify-show {
   -webkit-animation-duration: 500ms;
   -webkit-animation-name: ember-notify-show;
-  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
   animation-duration: 500ms;
   animation-name: ember-notify-show;
-  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
 }
 
 .ember-notify-hide {
   -webkit-animation-duration: 250ms;
   -webkit-animation-name: ember-notify-hide;
-  -webkit-animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  -webkit-animation-timing-function: cubic-bezier(.6, -.28, .735, .045);
   animation-duration: 250ms;
   animation-name: ember-notify-hide;
-  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  animation-timing-function: cubic-bezier(.6, -.28, .735, .045);
 
   &:hover {
     -moz-animation-play-state: paused;
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 9e72b055f..8aad37e0b 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -61,17 +61,16 @@
 
   &.loading {
     &::after {
-      content: " ";
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      height: 3px;
-
-      background: repeating-linear-gradient(to right, #fff, #fff, var(--info), #fff, #fff);
-      background-size: 200% auto;
-      background-position: 0 100%;
       animation: gradient 1s linear infinite;
+      background: repeating-linear-gradient(to right, var(--white), var(--white), var(--info), var(--white), var(--white));
+      background-position: 0 100%;
+      background-size: 200% auto;
+      content: ' ';
+      height: 3px;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 100%;
 
       @keyframes gradient {
         0%   { background-position: 0 0; }
@@ -81,6 +80,8 @@
   }
 }
 
-.copyable .copyable-button {
-  padding: 0rem;
+.copyable {
+  .copyable-button {
+    padding: 0;
+  }
 }

From 346f76404d9a0c90dedbccdd3d2c228572eb5ec1 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 30 Sep 2020 13:17:23 -0400
Subject: [PATCH 4/8] chore: tweak colors to match waypoint and for a11y

---
 .../styles/rose/components/nav/_sidebar.scss   |  2 +-
 .../styles/rose/components/nav/_tabs.scss      |  2 +-
 .../styles/rose/variables/color/_css.scss      | 18 +++++++++---------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
index 7dae497d6..90e84159a 100644
--- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
@@ -13,7 +13,7 @@
     line-height: $lineHeight;
     padding: 0 sizing.rems(m);
     margin-bottom: $threePX;
-    border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+    border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
   }
 
   .rose-nav-link {
diff --git a/addons/rose/addon/styles/rose/components/nav/_tabs.scss b/addons/rose/addon/styles/rose/components/nav/_tabs.scss
index 2e2ca44f3..4d71816d1 100644
--- a/addons/rose/addon/styles/rose/components/nav/_tabs.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_tabs.scss
@@ -5,7 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: sizing.rems(m);
-  box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-gray-subtler-2);
+  box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border);
 
   .rose-nav-link {
     --color: var(--ui-gray-starker-1);
diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index d4fbf61bb..cb000c5df 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -83,8 +83,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     // poles
-    --subtle: #{darken(color(ui-gray, 900), 2%)};
-    --stark: var(--white);
+    --subtle: #{darken(color(ui-gray, 900), 3%)};
+    --stark: #{color(ui-gray, 100)};
     --stark-components: 255, 255, 255;
 
     // theme colors
@@ -107,18 +107,18 @@
 
     --failure-subtler-2: #{color(red, 900)};
     --failure-subtler-1: #{color(red, 800)};
-    --failure: #{lighten(color(red, 400), 2.5%)};
-    --failure-starker-1: #{color(red, 300)};
+    --failure: #{color(red, 300)};
+    --failure-starker-1: #{color(red, 200)};
 
     --success-subtler-2: #{color(green, 900)};
     --success-subtler-1: #{color(green, 800)};
-    --success: #{color(green)};
-    --success-starker-1: #{color(green, 200)};
+    --success: #{color(green, 700)};
+    --success-starker-1: #{color(green, 400)};
 
-    --action-subtler-2: #{color(blue, 900)};
-    --action-subtler-1h: #{color(blue, 800)};
+    --action-subtler-2: #{darken(color(blue, 900), 10%)};
+    --action-subtler-1h: #{darken(color(blue, 900), 5%)};
     --action-subtler-1: #{color(blue, 800)};
-    --action: #{color(blue, 300)};
+    --action: #{color(blue, 400)};
     --action-starker-1: #{color(blue, 200)};
 
     --ui-border-subtler-1: #{color(ui-gray, 800)};

From c3152eb41365813e463f452e854a46d031703466 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 30 Sep 2020 13:30:36 -0400
Subject: [PATCH 5/8] chore: tweak contrast for nav dark mode

---
 addons/rose/addon/styles/rose/components/nav/_tabs.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/nav/_tabs.scss b/addons/rose/addon/styles/rose/components/nav/_tabs.scss
index 4d71816d1..19f112bd1 100644
--- a/addons/rose/addon/styles/rose/components/nav/_tabs.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_tabs.scss
@@ -22,13 +22,17 @@
 
     &:hover {
       --box-shadow-color: var(--ui-gray-subtler-2);
-      --background: var(--ui-gray-subtler-5);
+      --background: var(--ui-gray-subtler-6);
     }
 
     &:active,
     &.active {
       --color: var(--action);
       --box-shadow-color: currentColor;
+
+      &:hover {
+        --color: var(--action-starker-1);
+      }
     }
   }
 }

From 67581a01e5e00de14c46b89bbcb35ee2a870d155 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 30 Sep 2020 15:31:55 -0400
Subject: [PATCH 6/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20initial=20bou?=
 =?UTF-8?q?ndary-icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/templates/application.hbs             |  2 +-
 ui/core/app/templates/scopes/scope.hbs            | 15 +++++++++++++++
 .../scopes/scope/projects/project/_sidebar.hbs    |  9 +++++++++
 ui/core/public/boundary-icons/action-session.svg  |  4 ++++
 ui/core/public/boundary-icons/auth-method.svg     |  4 ++++
 ui/core/public/boundary-icons/gear.svg            |  4 ++++
 ui/core/public/boundary-icons/group.svg           |  3 +++
 ui/core/public/boundary-icons/host-catalogs.svg   |  3 +++
 ui/core/public/boundary-icons/org.svg             |  3 +++
 ui/core/public/boundary-icons/project.svg         |  3 +++
 ui/core/public/boundary-icons/roles.svg           |  3 +++
 ui/core/public/boundary-icons/target.svg          |  3 +++
 ui/core/public/boundary-icons/user-profile.svg    |  3 +++
 ui/core/public/boundary-icons/users.svg           |  3 +++
 14 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 ui/core/public/boundary-icons/action-session.svg
 create mode 100644 ui/core/public/boundary-icons/auth-method.svg
 create mode 100644 ui/core/public/boundary-icons/gear.svg
 create mode 100644 ui/core/public/boundary-icons/group.svg
 create mode 100644 ui/core/public/boundary-icons/host-catalogs.svg
 create mode 100644 ui/core/public/boundary-icons/org.svg
 create mode 100644 ui/core/public/boundary-icons/project.svg
 create mode 100644 ui/core/public/boundary-icons/roles.svg
 create mode 100644 ui/core/public/boundary-icons/target.svg
 create mode 100644 ui/core/public/boundary-icons/user-profile.svg
 create mode 100644 ui/core/public/boundary-icons/users.svg

diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index b38e02f4d..f8de5b3f9 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -17,7 +17,7 @@
           <utilities.dropdown
             @text="user@example.net"
             @iconOnly={{true}}
-            @icon="user-square-fill" as |dropdown|
+            @icon="boundary-icons/user-profile" as |dropdown|
           >
             <dropdown.link @route="account.change-password">
               {{t 'actions.change-password'}}
diff --git a/ui/core/app/templates/scopes/scope.hbs b/ui/core/app/templates/scopes/scope.hbs
index 04b437e4d..718ce849e 100644
--- a/ui/core/app/templates/scopes/scope.hbs
+++ b/ui/core/app/templates/scopes/scope.hbs
@@ -5,21 +5,36 @@
     <sidebarLayout.sidebar>
       <Rose::Nav::Sidebar @title={{t "titles.general"}} as |nav|>
         <nav.link @route="scopes.scope.projects">
+          <Rose::Icon
+            @name="boundary-icons/project"
+            @size="medium" />
           {{t "resources.project.title_plural"}}
         </nav.link>
       </Rose::Nav::Sidebar>
 
       <Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
         <nav.link @route="scopes.scope.users">
+          <Rose::Icon
+            @name="boundary-icons/users"
+            @size="medium" />
           {{t "resources.user.title_plural"}}
         </nav.link>
         <nav.link @route="scopes.scope.groups">
+          <Rose::Icon
+            @name="boundary-icons/group"
+            @size="medium" />
           {{t "resources.group.title_plural"}}
         </nav.link>
         <nav.link @route="scopes.scope.roles">
+          <Rose::Icon
+            @name="boundary-icons/roles"
+            @size="medium" />
           {{t "resources.role.title_plural"}}
         </nav.link>
         <nav.link @route="scopes.scope.auth-methods">
+          <Rose::Icon
+            @name="boundary-icons/auth-method"
+            @size="medium" />
           {{t "resources.auth-method.title_plural"}}
         </nav.link>
       </Rose::Nav::Sidebar>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs b/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
index b9d440b7c..5f7845697 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
@@ -1,11 +1,20 @@
 <Rose::Nav::Sidebar @title={{t "titles.resources"}} as |nav|>
   <nav.link @route="scopes.scope.projects.project.sessions">
+    <Rose::Icon
+      @name="boundary-icons/action-session"
+      @size="medium" />
     {{t "resources.session.title_plural"}}
   </nav.link>
   <nav.link @route="scopes.scope.projects.project.targets">
+    <Rose::Icon
+      @name="boundary-icons/target"
+      @size="medium" />
     {{t "resources.target.title_plural"}}
   </nav.link>
   <nav.link @route="scopes.scope.projects.project.host-catalogs">
+    <Rose::Icon
+      @name="boundary-icons/host-catalogs"
+      @size="medium" />
     {{t "resources.host-catalog.title_plural"}}
   </nav.link>
 </Rose::Nav::Sidebar>
diff --git a/ui/core/public/boundary-icons/action-session.svg b/ui/core/public/boundary-icons/action-session.svg
new file mode 100644
index 000000000..6a9d8ca21
--- /dev/null
+++ b/ui/core/public/boundary-icons/action-session.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.78339 14.5C11.3732 14.5 14.2834 11.5899 14.2834 8C14.2834 4.41015 11.3732 1.5 7.78339 1.5C5.61088 1.5 3.6873 2.56583 2.50703 4.20312H0.740068C2.09209 1.70035 4.73917 0 7.78339 0C12.2017 0 15.7834 3.58172 15.7834 8C15.7834 12.4183 12.2017 16 7.78339 16C4.66999 16 1.97198 14.2215 0.649902 11.625H2.38728C3.55457 13.3592 5.53576 14.5 7.78339 14.5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.32991 7.20313L7.03211 4.90533L8.09277 3.84467L12.2481 7.99999L8.09277 12.1553L7.03211 11.0947L9.42364 8.70313H0V7.20313H9.32991Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/auth-method.svg b/ui/core/public/boundary-icons/auth-method.svg
new file mode 100644
index 000000000..8e3768084
--- /dev/null
+++ b/ui/core/public/boundary-icons/auth-method.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4211 5.60361H16V7.10361H10.4211V5.60361ZM10.4211 8.76566H16V10.2657H10.4211V8.76566ZM16 11.9277H10.4211V13.4277H16V11.9277Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.72412 5.35944V3.73138C1.72412 2.35067 2.84341 1.23138 4.22412 1.23138H4.77561C6.15632 1.23138 7.27561 2.35067 7.27561 3.73138V5.35944H9V13.6719H0V5.35944H1.72412ZM5.76994 3.62429C5.77369 3.65948 5.77561 3.69521 5.77561 3.73138V5.12429H3.22412V3.73138C3.22412 3.69521 3.22604 3.65948 3.22979 3.62429C3.28323 3.12236 3.70801 2.73138 4.22412 2.73138H4.77561C5.29172 2.73138 5.71651 3.12236 5.76994 3.62429ZM7.5 6.85944V12.1719H1.5V6.85944H7.5ZM3.74976 8.44012V10.5912H5.24976V8.44012H3.74976Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/gear.svg b/ui/core/public/boundary-icons/gear.svg
new file mode 100644
index 000000000..d2bca3dc7
--- /dev/null
+++ b/ui/core/public/boundary-icons/gear.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.94246 0H10.0691L10.4813 2.74643C10.706 2.86098 10.9213 2.98933 11.1279 3.1302L13.7956 2.20814L15.8584 5.8437L13.3258 7.67296V8.32704L15.8584 10.1563L13.784 13.8124L11.2211 12.8199C11.0167 12.9579 10.8018 13.0867 10.5757 13.2021L10.0442 16H5.94469L5.46307 13.1994C5.23939 13.0859 5.02508 12.9588 4.81941 12.8192L2.21391 13.8087L0.141602 10.1563L2.67417 8.32704V7.67296L0.141602 5.8437L2.22032 2.18L4.8305 3.23078C5.03053 3.09607 5.24058 2.97008 5.46135 2.85692L5.94246 0ZM7.21098 1.5L6.80637 3.90261L6.42448 4.06206C6.06265 4.21314 5.71961 4.42319 5.3882 4.67642L5.04889 4.93568L2.87741 4.06151L2.10958 5.4148L4.17417 6.90604V9.09396L2.10958 10.5852L2.88381 11.9498L5.06229 11.1225L5.39546 11.3836C5.71672 11.6353 6.05737 11.839 6.42448 11.9923L6.8048 12.1511L7.20875 14.5H8.80233L9.24919 12.1478L9.6217 11.9923C9.98353 11.8412 10.3266 11.6312 10.658 11.378L10.9921 11.1227L13.1183 11.9461L13.8904 10.5852L11.8258 9.09396V6.90604L13.8904 5.4148L13.1066 4.03336L10.8611 4.80949L10.5395 4.55751C10.2183 4.30575 9.87761 4.10206 9.51051 3.94878L9.12051 3.78595L8.77743 1.5H7.21098Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.65356 8.00001C6.65356 8.79715 7.28506 9.40001 8.00011 9.40001C8.71516 9.40001 9.34665 8.79715 9.34665 8.00001C9.34665 7.20286 8.71516 6.60001 8.00011 6.60001C7.28506 6.60001 6.65356 7.20286 6.65356 8.00001ZM5.15356 8.00001C5.15356 9.59915 6.43044 10.9 8.00011 10.9C9.56977 10.9 10.8467 9.59915 10.8467 8.00001C10.8467 6.40086 9.56977 5.10001 8.00011 5.10001C6.43044 5.10001 5.15356 6.40086 5.15356 8.00001Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/group.svg b/ui/core/public/boundary-icons/group.svg
new file mode 100644
index 000000000..2d2966c5a
--- /dev/null
+++ b/ui/core/public/boundary-icons/group.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.04165 3.95312L9.04294 3.95515H9.86719H13.5V6H15V3.95515V2.45515H13.5H9.86719L8.30774 0H7.05H0V1.5V1.83333V13.5V15H1.5H3.71899V13.5H3.69834H3.66922H3.6401H3.61095H3.5818H3.55264H3.52346H3.49427H3.46506H3.43585H3.40662H3.37738H3.34813H3.31886H3.28958H3.26029H3.23098H3.20166H3.17233H3.14298H3.11362H3.08425H3.05486H3.02546H2.99605H2.96662H2.93717H2.90771H2.87824H2.84876H2.81926H2.78974H2.76021H2.73067H2.70111H2.67153H2.64194H2.61234H2.58272H2.55308H2.52343H2.49377H2.46408H2.43439H2.40467H2.37495H2.3452H2.31544H2.28566H2.25587H2.22606H2.19624H2.16639H2.13654H2.10666H2.07677H2.04686H2.01693H1.98699H1.95703H1.92705H1.89706H1.86705H1.83702H1.80697H1.77691H1.74683H1.71673H1.68661H1.65648H1.62632H1.59615H1.56596H1.53575H1.50553H1.5V3.95312H9.04165ZM8.08889 2.45312H1.5V1.83333V1.82742V1.82151V1.8156V1.8097V1.80381V1.79791V1.79202V1.78614V1.78026V1.77439V1.76852V1.76265V1.75679V1.75093V1.74508V1.73924V1.73339V1.72756V1.72172V1.7159V1.71007V1.70425V1.69844V1.69263V1.68683V1.68103V1.67524V1.66945V1.66367V1.65789V1.65211V1.64635V1.64058V1.63483V1.62907V1.62333V1.61758V1.61185V1.60612V1.60039V1.59467V1.58895V1.58325V1.57754V1.57184V1.56615V1.56046V1.55478V1.5491V1.54343V1.53777V1.53211V1.52646V1.52081V1.51517V1.50953V1.5039V1.5H7.05H7.051H7.05203H7.05307H7.05413H7.05522H7.05633H7.05745H7.0586H7.05977H7.06095H7.06216H7.06339H7.06464H7.0659H7.06719H7.0685H7.06982H7.07117H7.07254H7.07392H7.07533H7.07675H7.07819H7.07965H7.08113H7.08263H7.08415H7.08569H7.08724H7.08881H7.0904H7.09201H7.09364H7.09529H7.09695H7.09864H7.10033H7.10205H7.10379H7.10554H7.10731H7.1091H7.1109H7.11272H7.11456H7.11642H7.11829H7.12018H7.12209H7.12401H7.12595H7.12791H7.12988H7.13187H7.13387H7.1359H7.13793H7.13999H7.14205H7.14414H7.14624H7.14836H7.15049H7.15263H7.1548H7.15697H7.15916H7.16137H7.16359H7.16583H7.16808H7.17035H7.17263H7.17493H7.17724H7.17956H7.1819H7.18425H7.18662H7.189H7.19139H7.1938H7.19623H7.19866H7.20111H7.20357H7.20605H7.20854H7.21104H7.21355H7.21608H7.21862H7.22118H7.22374H7.22632H7.22892H7.23152H7.23414H7.23676H7.23941H7.24206H7.24472H7.2474H7.25009H7.25279H7.2555H7.25822H7.26096H7.2637H7.26646H7.26923H7.27201H7.2748H7.2776H7.28042H7.28324H7.28607H7.28892H7.29177H7.29464H7.29751H7.3004H7.30329H7.3062H7.30911H7.31204H7.31497H7.31792H7.32087H7.32384H7.32681H7.32979H7.33278H7.33578H7.33879H7.34181H7.34484H7.34788H7.35092H7.35398H7.35704H7.36011H7.36319H7.36627H7.36937H7.37247H7.37558H7.3787H7.38183H7.38496H7.3881H7.39125H7.39441H7.39757H7.40074H7.40392H7.40711H7.4103H7.4135H7.4167H7.41992H7.42314H7.42636H7.42959H7.43283H7.43608H7.43933H7.44258H7.44585H7.44912H7.45239H7.45567H7.45896H7.46225H7.46554H7.46885H7.47215H7.47546H7.47878H7.4821H7.48349L8.08889 2.45312ZM7.26562 8.75684C7.26562 7.38438 8.37754 6.27246 9.75 6.27246C11.1225 6.27246 12.2344 7.38438 12.2344 8.75684C12.2344 10.1293 11.1225 11.2412 9.75 11.2412C8.37754 11.2412 7.26562 10.1293 7.26562 8.75684ZM9.75 7.77246C9.20597 7.77246 8.76562 8.21281 8.76562 8.75684C8.76562 9.30087 9.20597 9.74121 9.75 9.74121C10.294 9.74121 10.7344 9.30087 10.7344 8.75684C10.7344 8.21281 10.294 7.77246 9.75 7.77246ZM14 16V12.125H5.5V16H7V13.625H12.5V16H14Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/host-catalogs.svg b/ui/core/public/boundary-icons/host-catalogs.svg
new file mode 100644
index 000000000..18372da0c
--- /dev/null
+++ b/ui/core/public/boundary-icons/host-catalogs.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.5H14.4375V10.5625H15.9375V0H6.5V1.5ZM11.5938 3.9375H3.65625V2.4375H13.0938V13.875H11.5938V3.9375ZM8.125 6.5625H1.5V14.5H8.125V6.5625ZM0 5.0625V16H9.625V5.0625H0ZM6.5 9.1875H2.75V7.6875H6.5V9.1875ZM4.0625 13.375H5.5625V11.875H4.0625V13.375Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/org.svg b/ui/core/public/boundary-icons/org.svg
new file mode 100644
index 000000000..238cc8435
--- /dev/null
+++ b/ui/core/public/boundary-icons/org.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15625 12.1875H5V16H0V0H12V5.125H15.5V16H12H10.5H7.15625V12.1875ZM10.5 14.5H8.65625V10.6875H3.5V14.5H1.5V1.5H10.5V5.125V14.5ZM12 14.5H14V6.625H12V14.5ZM3 3H4.88235V5H3V3ZM4.88235 7H3V9H4.88235V7ZM7 3H8.88235V5H7V3ZM8.88235 7H7V9H8.88235V7Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/project.svg b/ui/core/public/boundary-icons/project.svg
new file mode 100644
index 000000000..5b9515d08
--- /dev/null
+++ b/ui/core/public/boundary-icons/project.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 1.5H5.50461V5.63615H1.5V1.5ZM0 7.13615V0H7.00461V7.13615H0ZM1.5 10.3639H5.50461V14.5H1.5V10.3639ZM0 16V8.86386H7.00461V16H0ZM14.5 1.5H10.4954V5.63615H14.5V1.5ZM8.99536 0V7.13615H16V0H8.99536ZM10.4954 10.3639H14.5V14.5H10.4954V10.3639ZM8.99536 16V8.86386H16V16H8.99536Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/roles.svg b/ui/core/public/boundary-icons/roles.svg
new file mode 100644
index 000000000..a0b92dd37
--- /dev/null
+++ b/ui/core/public/boundary-icons/roles.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 2.2641H1.5V13.6315H2.6875V10.3063H9.1875V13.6315H14.5V2.2641ZM7.6875 13.6315V11.8063H4.1875V13.6315H7.6875ZM0 0.764099V15.1315H16V0.764099H0ZM3.1875 6.98122C3.1875 5.45447 4.40519 4.19366 5.9375 4.19366C7.46981 4.19366 8.6875 5.45447 8.6875 6.98122C8.6875 8.50797 7.46981 9.76878 5.9375 9.76878C4.40519 9.76878 3.1875 8.50797 3.1875 6.98122ZM5.9375 5.69366C5.25981 5.69366 4.6875 6.25647 4.6875 6.98122C4.6875 7.70598 5.25981 8.26878 5.9375 8.26878C6.61519 8.26878 7.1875 7.70598 7.1875 6.98122C7.1875 6.25647 6.61519 5.69366 5.9375 5.69366ZM10.025 5.33713L13.625 5.33713V6.83713L10.025 6.83713L10.025 5.33713ZM13.625 8.62527H11.125V10.1253H13.625V8.62527Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/target.svg b/ui/core/public/boundary-icons/target.svg
new file mode 100644
index 000000000..1889f89e5
--- /dev/null
+++ b/ui/core/public/boundary-icons/target.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 6V3.94293C5.57242 4.25072 4.25072 5.57241 3.94293 7.25H6V8.75H3.94293C4.25072 10.4276 5.57241 11.7493 7.25 12.0571V10H8.75V12.0571C10.4276 11.7493 11.7493 10.4276 12.0571 8.75H10V7.25H12.0571C11.7493 5.57241 10.4276 4.25072 8.75 3.94293V6H7.25ZM13.5755 7.25C13.2417 4.74255 11.2574 2.75829 8.75 2.42452V0H7.25V2.42452C4.74255 2.75829 2.75829 4.74255 2.42452 7.25H0V8.75H2.42452C2.75829 11.2575 4.74255 13.2417 7.25 13.5755V16H8.75V13.5755C11.2575 13.2417 13.2417 11.2575 13.5755 8.75H16V7.25H13.5755Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/user-profile.svg b/ui/core/public/boundary-icons/user-profile.svg
new file mode 100644
index 000000000..f70d94404
--- /dev/null
+++ b/ui/core/public/boundary-icons/user-profile.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 1.5H1.5V14.5H4V10H12V14.5H14.5V1.5ZM16 16H0V0H16V16ZM10.25 5.75C10.25 6.995 9.245 8 8 8C6.755 8 5.75 6.995 5.75 5.75C5.75 4.505 6.755 3.5 8 3.5C9.245 3.5 10.25 4.505 10.25 5.75Z" fill="currentColor"/>
+</svg>
diff --git a/ui/core/public/boundary-icons/users.svg b/ui/core/public/boundary-icons/users.svg
new file mode 100644
index 000000000..e086f6503
--- /dev/null
+++ b/ui/core/public/boundary-icons/users.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.875 0C1.50254 0 0.390625 1.11192 0.390625 2.48438C0.390625 3.85683 1.50254 4.96875 2.875 4.96875C4.24746 4.96875 5.35938 3.85683 5.35938 2.48438C5.35938 1.11192 4.24746 0 2.875 0ZM1.89062 2.48438C1.89062 1.94035 2.33097 1.5 2.875 1.5C3.41903 1.5 3.85938 1.94035 3.85938 2.48438C3.85938 3.0284 3.41903 3.46875 2.875 3.46875C2.33097 3.46875 1.89062 3.0284 1.89062 2.48438ZM9.69536 2.48022C8.14523 2.48022 6.8894 3.73605 6.8894 5.28618C6.8894 6.83631 8.14523 8.09214 9.69536 8.09214C11.2455 8.09214 12.5013 6.83631 12.5013 5.28618C12.5013 3.73605 11.2455 2.48022 9.69536 2.48022ZM8.3894 5.28618C8.3894 4.56448 8.97366 3.98022 9.69536 3.98022C10.4171 3.98022 11.0013 4.56448 11.0013 5.28618C11.0013 6.00788 10.4171 6.59214 9.69536 6.59214C8.97366 6.59214 8.3894 6.00788 8.3894 5.28618ZM4.5 10.2872H14.8906V16H13.3906V11.7872H6V16H4.5V10.2872ZM5.26562 6.59213H0V11.79H1.5V8.09213H5.26562V6.59213Z" fill="currentColor"/>
+</svg>

From 19cc18c4f69f7974aa5b077fd065a32b80a96a46 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 30 Sep 2020 15:59:57 -0400
Subject: [PATCH 7/8] chore: increase right margin on sidebar icons

---
 ui/core/app/styles/app.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 3acf2edab..c05790a04 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -25,6 +25,10 @@
   & + .rose-nav-sidebar {
     margin-top: 0;
   }
+
+  .rose-icon {
+    margin-right: sizing.rems(xs);
+  }
 }
 
 .rose-form {

From a5a69b06742d0879e5f7e021e0e40c7ca5b9b7e5 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 30 Sep 2020 16:00:11 -0400
Subject: [PATCH 8/8] chore: remove underline on sidebar nav hover

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

diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
index 90e84159a..010a3bd52 100644
--- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
@@ -32,7 +32,7 @@
     }
 
     &:hover {
-      text-decoration: underline;
+      //text-decoration: underline;
       color: var(--action);
       background-color: var(--action-subtler-1h);
     }