From 068e4a44d0b0e7a954043b514c426bcb48d3bd19 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 6 Nov 2020 13:15:26 -0500
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20tweak=20dropdown=20radi?=
 =?UTF-8?q?o=20styles,=20grant=20scopes,=20and=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/dropdown/_item.scss       |  2 +-
 .../rose/components/dropdown/_section.scss    |  5 +++--
 ui/core/app/components/form/role/index.hbs    | 11 +++++-----
 ui/core/app/styles/app.scss                   | 21 +++++++++++++++++--
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 5a4ef556f..f76689a0a 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -5,7 +5,7 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
 
 .rose-dropdown-item {
   @include type.type(s);
-  min-width: (sizing.rems(m)) * 16;
+  min-width: (sizing.rems(m)) * 20;
   $line-height: 36 / 14;
   line-height: $line-height;
 
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_section.scss b/addons/rose/addon/styles/rose/components/dropdown/_section.scss
index 1d3e314c0..ec3dcee3b 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_section.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_section.scss
@@ -3,11 +3,12 @@
 
 .rose-dropdown-section {
   .rose-dropdown-section-title {
-    @include type.type(s, bold);
+    @include type.type(xs, normal);
+    text-transform: uppercase;
     padding: 0 sizing.rems(s);
     margin: 0;
     $line-height: 36 / 14;
     line-height: $line-height;
-    color: var(--ui-gray)
+    color: var(--ui-gray-subtler-1)
   }
 }
diff --git a/ui/core/app/components/form/role/index.hbs b/ui/core/app/components/form/role/index.hbs
index 2530f4dbb..7f81d2296 100644
--- a/ui/core/app/components/form/role/index.hbs
+++ b/ui/core/app/components/form/role/index.hbs
@@ -60,31 +60,32 @@
         as |dropdown|>
           <ul>
             {{#each @grantScopes as |grantScope|}}
-              <li>
+              <li class={{if grantScope.model.isProject "is-project"}}>
                 <dropdown.item>
                   <radioGroup.radio
                     @label={{grantScope.model.displayName}}
                     @value={{grantScope.model.id}}
-                    @icon={{if grantScope.model.isOrg "app-icons/org" (if grantScope.model.isGlobal "app-icons/global")}}
+                    @icon={{concat "app-icons/" grantScope.model.type}}
                   />
                 </dropdown.item>
                 <ul class="indent-label-1">
                   {{#each grantScope.subScopes as |subScope|}}
-                    <li>
+                    <li class={{if subScope.model.isProject "is-project"}}>
                       <dropdown.item>
                         <radioGroup.radio
                           @label={{subScope.model.displayName}}
                           @value={{subScope.model.id}}
-                          @icon={{unless subScope.model.isProject "app-icons/org"}}
+                          @icon={{concat "app-icons/" subScope.model.type}}
                         />
                       </dropdown.item>
                       <ul class="indent-label-2">
                         {{#each subScope.subScopes as |subSubScope|}}
-                          <li>
+                          <li class={{if subSubScope.isProject "is-project"}}>
                             <dropdown.item>
                               <radioGroup.radio
                                 @label={{subSubScope.displayName}}
                                 @value={{subSubScope.id}}
+                                @icon={{concat "app-icons/" subSubScope.type}}
                               />
                             </dropdown.item>
                           </li>
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 7f85fddc0..a41d1236f 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -44,15 +44,32 @@
   }
 
   .rose-dropdown {
+    $iconWidth: sizing.rems(m) + sizing.rems(s);
+    $indent:  $iconWidth + sizing.rems(xs);
+
+    .rose-form-radio-label {
+      display: flex;
+
+      .rose-icon {
+        padding-right: sizing.rems(xxs);
+      }
+    }
+
     .indent-label-1 {
       .rose-form-radio-label {
-        padding-left: sizing.rems(l) * 1.5;
+        padding-left: $indent;
       }
     }
 
     .indent-label-2 {
       .rose-form-radio-label {
-        padding-left: sizing.rems(l) * 3;
+        padding-left: $indent + $iconWidth;
+      }
+    }
+
+    .is-project {
+      .rose-icon {
+        visibility: hidden;
       }
     }
   }