From fdfee4d3bb98d1d2e3a06d668e4bd7074beedaa7 Mon Sep 17 00:00:00 2001
From: Emruz Hossain <hossainemruz@gmail.com>
Date: Mon, 1 Jan 2024 14:58:11 +0600
Subject: [PATCH] Refactor alert shortcode (#858)

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/components/misc.scss | 31 ++++++++++++++++++++++++++++++
 assets/styles/mixins.scss          | 20 +++++++++++++++++++
 assets/styles/variables.scss       | 27 ++++++++++++++++++++++++++
 layouts/shortcodes/alert.html      | 17 ++++++++++++++--
 4 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/assets/styles/components/misc.scss b/assets/styles/components/misc.scss
index 55803c771..4276c780a 100644
--- a/assets/styles/components/misc.scss
+++ b/assets/styles/components/misc.scss
@@ -31,6 +31,24 @@ pre {
     }
   }
 }
+ $alert-types: ('success', 'info', 'warning', 'danger');
+
+.alert {
+  @each $type in $alert-types {
+    &.#{$type} {
+      background: get-alert-bg-color($type, 'light');
+      svg {
+        width: 1.25rem;
+        height: 1.25rem;
+        color: get-alert-text-color($type, 'light') !important;
+      }
+      strong {
+        padding-left: 0.5rem;
+        color: get-alert-text-color($type, 'light') !important;
+      }
+    }
+  }
+}
 
 html[data-theme='dark'] {
   .paginator {
@@ -45,4 +63,17 @@ html[data-theme='dark'] {
       }
     }
   }
+  .alert {
+    @each $type in $alert-types {
+      &.#{$type} {
+        background: get-alert-bg-color($type, 'dark');
+        svg {
+          color: get-alert-text-color($type, 'dark') !important;
+        }
+        strong {
+          color: get-alert-text-color($type, 'dark') !important;
+        }
+      }
+    }
+  }
 }
diff --git a/assets/styles/mixins.scss b/assets/styles/mixins.scss
index e9731a6ae..28139f36d 100644
--- a/assets/styles/mixins.scss
+++ b/assets/styles/mixins.scss
@@ -50,3 +50,23 @@
     color: get-dark-color('text-over-accent-color');
   }
 }
+
+@function get-alert-bg-color($type, $mode) {
+  $colors: map-get($alerts, $type);
+  @if $mode == 'light' {
+    @return map-get($colors, 'bg-color');
+  } @else {
+    @return map-get($colors, 'text-color');
+  }
+  @return red;
+}
+
+@function get-alert-text-color($type, $mode) {
+  $colors: map-get($alerts, $type);
+  @if $mode == 'light' {
+    @return map-get($colors, 'text-color');
+  } @else {
+    @return map-get($colors, 'bg-color');
+  }
+  @return red;
+}
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
index 1fd02af55..e49d1b71a 100644
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@@ -93,3 +93,30 @@ $brand-colors: (
   'diaspora': #1e1e1e,
   'whatsapp': #25d366,
 );
+
+$alerts: (
+  'success': (
+    // green 100
+    'bg-color': #dcfce7,
+    // green 800
+    'text-color': #166534,
+  ),
+  'info': (
+    // sky 100
+    'bg-color': #e0f2fe,
+    // sky 800
+    'text-color': #075985,
+  ),
+  'warning': (
+    // yellow 100
+    'bg-color': #fef9c3,
+    // yellow 800
+    'text-color': #854d0e,
+  ),
+  'danger': (
+    // red 100
+    'bg-color': #fee2e2,
+    // red 800
+    'text-color': #991b1b,
+  ),
+);
diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html
index ee1eb0225..16074b5bf 100644
--- a/layouts/shortcodes/alert.html
+++ b/layouts/shortcodes/alert.html
@@ -1,3 +1,16 @@
-<div class="alert alert-{{ .Get "type"}}">
-    <strong>{{.Inner | markdownify }}</strong>
+{{ $type := .Get "type"}}
+{{ $icon := "alert-circle"}}
+{{ if eq $type "success" }}
+    {{ $icon = "check-circle"}}
+{{ else if eq $type "warning" }}
+    {{ $icon = "alert-triangle"}}
+{{ else if eq $type "danger" }}
+    {{ $icon = "alert-octagon"}}
+{{ else if eq $type "info" }}
+    {{ $icon = "info"}}
+{{ end }}
+
+<div class="alert {{ $type }}">
+    <span><i data-feather="{{$icon}}"></i></span>
+    <span><strong>{{.Inner | markdownify }}</strong></span>
 </div>