chore: 🤖 tweak dropdown radio styles, grant scopes, and theme

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;
 

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)
   }
 }

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>

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;
       }
     }
   }