chore: 🤖 improve projects demo appearance

addons/rose/addon/styles/rose/components/card/_link.scss

@@ -24,8 +24,13 @@
   }
 
   &:hover {
+    $s: sizing.rems(s); // 12
+    $xs: sizing.rems(xs); // 8
+    $xxs: sizing.rems(xxs); // 4
     border-color: var(--ui-gray);
     background-color: var(--ui-gray-subtler-5);
+    box-shadow: 0 $xs $s rgba(var(--stark-components), var(--opacity-3)),
+      0 $xxs $xxs rgba(var(--stark-components), var(--opacity-4));
   }
 
   &:active {

addons/rose/addon/styles/rose/components/header/_brand.scss

@@ -20,6 +20,7 @@
   .rose-header-brand-text {
     @include type.type(m, normal);
     margin: 0;
+    margin-left: sizing.rems(s);
     white-space: nowrap;
     position: absolute;
     top: -1000px;

ui/core/app/templates/application.hbs

@@ -2,6 +2,25 @@
   <page.header>
     <Rose::Header as |header|>
       <header.brand @logo="logo" @text={{app-name}} />
+      <header.nav as |nav|>
+        <nav.dropdown @text={{t 'dev.default-org'}} as |dropdown|>
+          <dropdown.link @route="index">{{t 'dev.menu-item'}}</dropdown.link>
+          <dropdown.link @route="orgs">{{t 'dev.menu-item'}}</dropdown.link>
+          <dropdown.button>{{t 'dev.button-menu-item'}}</dropdown.button>
+        </nav.dropdown>
+        <nav.link @route="orgs">{{t 'dev.section'}}</nav.link>
+        <nav.link @route="index">{{t 'dev.section'}}</nav.link>
+      </header.nav>
+      <header.utilities as |utilities|>
+        <utilities.dropdown
+          @text="user@example.net"
+          @iconOnly={{true}}
+          @icon="user-square-fill" as |dropdown|
+        >
+          <dropdown.link @route="index">{{t 'dev.menu-item'}}</dropdown.link>
+          <dropdown.button>{{t 'dev.button-menu-item'}}</dropdown.button>
+        </utilities.dropdown>
+      </header.utilities>
     </Rose::Header>
   </page.header>
 

ui/core/config/environment.js

@@ -41,7 +41,7 @@ module.exports = function (environment) {
       'frame-src': ["'self'"],
       'font-src': ["'self'"],
       'connect-src': ["'self'"],
-      'img-src': ["'self'"],
+      'img-src': ["'self'", "data:"],
       'style-src': ["'self'"],
       'media-src': ["'self'"],
       'manifest-src': ["'self'"],

ui/core/package.json

@@ -60,6 +60,7 @@
     "ember-intl": "^5.1.1",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-modifier": "^1.0.3",
     "ember-page-title": "^5.2.1",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",

ui/core/translations/en-us.yaml

@@ -10,3 +10,8 @@ form:
   label:
     name: Name
     description: Description
+dev:
+  default-org: Default Org
+  menu-item: Menu item
+  button-menu-item: Button menu item
+  section: Section