fix(frontend): imporve alert styling and use notify for magic link al…

…erts

frontend/app/components/filter-sidebar/template.hbs

@@ -53,7 +53,7 @@
         <FaIcon @icon="sliders" @prefix="fas" />
         {{#if @appliedCount}}
           <span
-            class="filter-sidebar-toggle-icon-badge bg-success text-foreground-primary absolute right-2 top-2 rounded-[50%] px-1 py-0.5 font-mono text-xs shadow-sm duration-300"
+            class="filter-sidebar-toggle-icon-badge bg-success-light text-foreground-primary absolute right-2 top-2 rounded-[50%] px-1 py-0.5 font-mono text-xs shadow-sm duration-300"
           >{{@appliedCount}}</span>
         {{/if}}
       </span>

frontend/app/components/magic-link-modal/component.js

@@ -13,6 +13,7 @@ export default class MagicLinkModal extends Component {
   @tracked errorMsg;
 
   @service router;
+  @service notify;
 
   @action
   onSetTask(task) {
@@ -37,11 +38,11 @@ export default class MagicLinkModal extends Component {
   copyToClipboard() {
     try {
       navigator.clipboard.writeText(this.magicLinkString);
-      this.statusMsg =
-        "Magic link copied to clipboard. You can now send it to a friendly coworker!";
+      this.notify.success(
+        "Magic link copied to clipboard.\nYou can now send it to a friendly coworker!",
+      );
     } catch {
-      /* istanbul ignore next */
-      this.errorMsg = "Could not copy to clipboard";
+      this.notify.error("Could not copy to clipboard");
     }
   }
 }

frontend/app/components/magic-link-modal/template.hbs

@@ -78,16 +78,6 @@
         aria-label="magic link string"
         data-test-magic-link-string
       />
-      {{#if this.statusMsg}}
-        <Alert class="text-success">
-          {{this.statusMsg}}
-        </Alert>
-      {{/if}}
-      {{#if this.errorMsg}}
-        <Alert class="text-danger">
-          {{this.errorMsg}}
-        </Alert>
-      {{/if}}
     </modal.body>
     <modal.footer class="flex justify-end">
       <button

frontend/app/styles/components/alert.css

@@ -1,11 +1,15 @@
+.ember-notify.alert {
+  @apply rounded;
+}
+
 .ember-notify.alert-danger {
-  @apply bg-danger text-foreground-primary border-danger/80;
+  @apply bg-danger-light text-foreground-primary border-danger/80;
 }
 
 .ember-notify.alert-info {
-  @apply bg-primary text-foreground-primary border-primary/80;
+  @apply bg-primary-light text-foreground-primary border-primary/80;
 }
 
 .ember-notify.alert-success {
-  @apply bg-success text-foreground-primary border-success/80;
+  @apply bg-success-light text-foreground-primary border-success/80;
 }

frontend/config/tailwind.config.js

@@ -131,8 +131,9 @@ module.exports = {
   },
   plugins: [forms()],
   safelist: [
-    { pattern: /noUi-/ },
+    { pattern: /alert-/ },
     { pattern: /ember-/ },
+    { pattern: /noUi-/ },
     { pattern: /shepherd-/ },
     "invalid-feedback",
   ],