slight improvement to <LogoIcon /> component and styling for it

fleetbase · Jul 30, 2024 · 2d32d72 · 2d32d72
1 parent d40d6c9
commit 2d32d72
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/addon/components/logo-icon.js b/addon/components/logo-icon.js
@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
 import { isBlank } from '@ember/utils';
+import { task } from 'ember-concurrency';
 
 export default class LogoIconComponent extends Component {
     @service store;
@@ -29,7 +30,7 @@ export default class LogoIconComponent extends Component {
         this.size = this.getSize();
 
         if (isBlank(this.args.brand)) {
-            this.loadIcon();
+            this.loadIcon.perform();
         } else {
             this.brand = this.args.brand;
             this.ready = true;
@@ -46,14 +47,12 @@ export default class LogoIconComponent extends Component {
         return this.size;
     }
 
-    loadIcon() {
-        this.store
-            .findRecord('brand', 1)
-            .then((brand) => {
-                this.brand = brand;
-            })
-            .finally(() => {
-                this.ready = true;
-            });
+    @task *loadIcon() {
+        try {
+            this.brand = yield this.store.findRecord('brand', 1);
+            this.ready = true;
+        } catch {
+            this.ready = true;
+        }
     }
 }
diff --git a/addon/styles/layout/legacy.css b/addon/styles/layout/legacy.css
@@ -103,6 +103,20 @@ video {
 a.navbar-logo {
     width: 32px;
     height: 32px;
+    margin-right: 1rem;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    border-radius: 0.25rem;
+    transition: opacity 200ms ease-in-out;
+}
+
+a.navbar-logo:hover {
+    opacity: .9;
+}
+
+a.navbar-logo > img {
+    width: 32px;
+    height: 32px;
+    border-radius: 0.25rem;
 }
 
 .leaflet-container a {