fix(frontend): dry alert styles

adfinis · Nov 25, 2024 · dcd7c7f · dcd7c7f
1 parent a54adbe
commit dcd7c7f
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 15 deletions.
diff --git a/frontend/app/components/alert.hbs b/frontend/app/components/alert.hbs
@@ -1,6 +1,3 @@
-<div
-  class="rounded border border-[color-mix(in_srgb,currentColor_60%,transparent)] bg-[color-mix(in_srgb,currentColor_30%,transparent)] p-4"
-  ...attributes
->
+<div class="alert rounded border" ...attributes>
   {{yield}}
 </div>
diff --git a/frontend/app/components/filter-sidebar/template.hbs b/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>

diff --git a/frontend/app/components/magic-link-modal/template.hbs b/frontend/app/components/magic-link-modal/template.hbs
@@ -79,12 +79,12 @@
         data-test-magic-link-string
       />
       {{#if this.statusMsg}}
-        <Alert class="text-success">
+        <Alert class="alert-success">
           {{this.statusMsg}}
         </Alert>
       {{/if}}
       {{#if this.errorMsg}}
-        <Alert class="text-danger">
+        <Alert class="alert-danger">
           {{this.errorMsg}}
         </Alert>
       {{/if}}

diff --git a/frontend/app/styles/components/alert.css b/frontend/app/styles/components/alert.css
@@ -1,11 +1,15 @@
-.ember-notify.alert-danger {
-  @apply bg-danger text-foreground-primary border-danger/80;
+.alert {
+  @apply rounded p-4;
 }
 
-.ember-notify.alert-info {
-  @apply bg-primary text-foreground-primary border-primary/80;
+.alert-danger {
+  @apply bg-danger-light text-foreground-primary !border-danger/80;
 }
 
-.ember-notify.alert-success {
-  @apply bg-success text-foreground-primary border-success/80;
+.alert-info {
+  @apply bg-primary text-foreground-primary !border-primary/80;
+}
+
+.alert-success {
+  @apply bg-success-light text-foreground-primary !border-success/80;
 }
diff --git a/frontend/config/tailwind.config.js b/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",
   ],

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml