Refactor alert shortcode (#858)

Signed-off-by: hossainemruz <[email protected]>

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;
+        }
+      }
+    }
+  }
 }

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;
+}

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,
+  ),
+);

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>