From d8f960f6ee3c9f0226d8b1387049c3397432c1d8 Mon Sep 17 00:00:00 2001
From: Facinorous <admin@blockshelf.ca>
Date: Sat, 17 Dec 2022 10:14:37 -0500
Subject: [PATCH] Update flash messages to appear in pills, resolving Style the
 login page system messages #19

---
 views/pages/admin/tabs/appsettings.ejs | 24 ++++++++++--------------
 views/pages/public/login.ejs           | 12 ++++++------
 views/pages/public/register.ejs        | 18 +++++++++---------
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/views/pages/admin/tabs/appsettings.ejs b/views/pages/admin/tabs/appsettings.ejs
index 6e66d80..bc42fb5 100644
--- a/views/pages/admin/tabs/appsettings.ejs
+++ b/views/pages/admin/tabs/appsettings.ejs
@@ -3,21 +3,17 @@
         <div class="flex flex-col flex-wrap">
             <div class="flex flex-col lg:gap-8 gap-3 ">
 
-                <% if(success_alert_message !='' ){ %>
-                    <div class="flex-1 bg-tertiary p-6 rounded-md">
-                        <p class="text-green-600 pb-2 text-center">
-                            <%= success_alert_message %>
-                        </p>
-                    </div>
-                <% } %>
+        		<% if(success_alert_message !='' ){ %>
+					<div class="p-2 mb-4 text-sm text-green-600 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
+						<span class="font-medium">Success!</span> <%= success_alert_message %>.
+					</div>
+        		<% } %>
 
-                <% if(error_message !='' ){ %>
-                    <div class="flex-1 bg-tertiary p-6 rounded-md">
-                        <p class="text-red-600 pb-2 text-center">
-                            <%= error_message %>
-                        </p>
-                    </div>
-                <% } %>
+        		<% if(error_message !='' ){ %>
+					<div class="p-2 mb-4 text-sm text-red-600 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
+						<span class="font-medium">Error!</span> <%= error_message %>.
+					</div>
+        		<% } %>
 
                 <form method="post" action="/admin/save/settings">
                     <!-- Main Setting -->
diff --git a/views/pages/public/login.ejs b/views/pages/public/login.ejs
index 369512e..5085e65 100644
--- a/views/pages/public/login.ejs
+++ b/views/pages/public/login.ejs
@@ -10,15 +10,15 @@
         		</p>
 
         		<% if(success_alert_message !='' ){ %>
-          			<p class="text-green-600 pb-2 text-center">
-           				<%= success_alert_message %>
-          			</p>
+					<div class="p-2 mb-4 text-sm text-green-600 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
+						<span class="font-medium">Success!</span> <%= success_alert_message %>.
+					</div>
         		<% } %>
 
         		<% if(error_message !='' ){ %>
-          			<p class="text-red-600 pb-2 text-center">
-            			<%= error_message %>
-          			</p>
+					<div class="p-2 mb-4 text-sm text-red-600 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
+						<span class="font-medium">Error!</span> <%= error_message %>.
+					</div>
         		<% } %>
 
         		<form class="flex flex-col" method="post" action="/auth/login">
diff --git a/views/pages/public/register.ejs b/views/pages/public/register.ejs
index 1e1911d..5f7f4bb 100644
--- a/views/pages/public/register.ejs
+++ b/views/pages/public/register.ejs
@@ -10,16 +10,16 @@
         		</p>
 
         		<% if(success_alert_message !='' ){ %>
-          			<p class="text-green-600 pb-2 text-center">
-            			<%= success_alert_message %>
-          			</p>
-          		<% } %>
+					<div class="p-2 mb-4 text-sm text-green-600 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
+						<span class="font-medium">Success!</span> <%= success_alert_message %>.
+					</div>
+        		<% } %>
 
-            	<% if(error_message !='' ){ %>
-              		<p class="text-red-600 pb-2 text-center">
-                		<%= error_message %>
-              		</p>
-              	<% } %>
+        		<% if(error_message !='' ){ %>
+					<div class="p-2 mb-4 text-sm text-red-600 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
+						<span class="font-medium">Error!</span> <%= error_message %>.
+					</div>
+        		<% } %>
 
                 <form class="flex flex-col" method="post" action="/auth/register">
                 	<label class="block text-sm">