From 5f0011140137f91adc610c764739dc0fad9e5dce Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 6 Nov 2020 12:02:14 -0500
Subject: [PATCH 1/4] chore: tweak dropdown radio styles to look like radios
 instead of checks

---
 .../rose/components/dropdown/_item.scss       | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 8994f0e37..5a4ef556f 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -31,22 +31,36 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       padding-right: sizing.rems(xl);
       font-weight: normal;
 
-      &::before,
+      // &::before,
+      // &::after {
+      //   display: none;
+      // }
+
       &::after {
-        display: none;
+        top: calc(50% - 0.75rem);
+        right: sizing.rems(xs);
+        left: auto;
+        transform: scale(1.5);
       }
     }
 
     .rose-form-radio-field {
+      &:not(:checked) {
+        ~ .rose-form-radio-label {
+          &::after {
+            opacity: 0.25;
+          }
+        }
+      }
       &:checked {
         ~ .rose-form-radio-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
 
-          background-image: #{$checkmark};
-          background-repeat: no-repeat;
-          background-position: right sizing.rems(m) center;
-          background-size: sizing.rems(m);
+          // background-image: #{$checkmark};
+          // background-repeat: no-repeat;
+          // background-position: right sizing.rems(m) center;
+          // background-size: sizing.rems(m);
         }
       }
 

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 2/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20tweak=20dropdown=20?=
 =?UTF-8?q?radio=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;
       }
     }
   }

From bcdfb58798acf3244e5ce2df6494de91f3b22e9b Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 6 Nov 2020 13:32:12 -0500
Subject: [PATCH 3/4] chore: tweak dropdown radio position for better display
 of multi-line options

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

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index f76689a0a..0388ebdc9 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -37,7 +37,7 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       // }
 
       &::after {
-        top: calc(50% - 0.75rem);
+        top: sizing.rems(xxs) + sizing.rems(xxxs);
         right: sizing.rems(xs);
         left: auto;
         transform: scale(1.5);

From a43a9ff7e5fc1095d080e6b64842e94c434cd2b6 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 6 Nov 2020 13:45:42 -0500
Subject: [PATCH 4/4] fix: contrast ratio of dropdown section title

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

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_section.scss b/addons/rose/addon/styles/rose/components/dropdown/_section.scss
index ec3dcee3b..f23bbc0c1 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_section.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_section.scss
@@ -9,6 +9,6 @@
     margin: 0;
     $line-height: 36 / 14;
     line-height: $line-height;
-    color: var(--ui-gray-subtler-1)
+    color: var(--ui-gray)
   }
 }