Add close icon to notifications

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 8ccf6cbdc3b8b2cd141e86c37616dc28c3bf3685..6ef53b7193d60825627fc194765d73eabb5e5499 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -15,7 +15,7 @@
   transition: transform ease-in-out 280ms;
   transform: translateX(580px);
   display: grid;
   transition: transform ease-in-out 280ms;
   transform: translateX(580px);
   display: grid;

-  grid-template-columns: 42px 1fr;
+  grid-template-columns: 42px 1fr 12px;

   color: #444;
   font-weight: 700;
   span, svg {
   color: #444;
   font-weight: 700;
   span, svg {


@@ -29,6 +29,13 @@
     padding-right: $-s;
     fill: currentColor;
   }
     padding-right: $-s;
     fill: currentColor;
   }

+  .dismiss {
+    margin-top: -8px;
+    svg {
+      height: 1.0rem;
+      color: #444;
+    }
+  }

   span {
     vertical-align: middle;
     line-height: 1.3;
   span {
     vertical-align: middle;
     line-height: 1.3;

diff --git a/resources/views/partials/notifications.blade.php b/resources/views/partials/notifications.blade.php
index 52687149928b299777276912b6e1870c4d9c90e7..752920917570a9a11d974f7088bf7e572a5e6a0f 100644 (file)
--- a/resources/views/partials/notifications.blade.php
+++ b/resources/views/partials/notifications.blade.php
@@ -1,11 +1,11 @@
 <div notification="success" style="display: none;" data-autohide class="pos" role="alert" @if(session()->has('success')) data-show @endif>
 <div notification="success" style="display: none;" data-autohide class="pos" role="alert" @if(session()->has('success')) data-show @endif>

-    @icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span>
+    @icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span><div class="dismiss">@icon('close')</div>

 </div>
 
 <div notification="warning" style="display: none;" class="warning" role="alert" @if(session()->has('warning')) data-show @endif>
 </div>
 
 <div notification="warning" style="display: none;" class="warning" role="alert" @if(session()->has('warning')) data-show @endif>

-    @icon('info') <span>{!! nl2br(htmlentities(session()->get('warning'))) !!}</span>
+    @icon('info') <span>{!! nl2br(htmlentities(session()->get('warning'))) !!}</span><div class="dismiss">@icon('close')</div>

 </div>
 
 <div notification="error" style="display: none;" class="neg" role="alert" @if(session()->has('error')) data-show @endif>
 </div>
 
 <div notification="error" style="display: none;" class="neg" role="alert" @if(session()->has('error')) data-show @endif>

-    @icon('danger') <span>{!! nl2br(htmlentities(session()->get('error'))) !!}</span>
+    @icon('danger') <span>{!! nl2br(htmlentities(session()->get('error'))) !!}</span><div class="dismiss">@icon('close')</div>

 </div>
 </div>