From 692f91714a2dc4f25a189f54a2a85adf5e804da2 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Wed, 23 Dec 2020 03:26:29 -0500
Subject: [PATCH] [frio] Improve display of introduction action buttons on
 mobile

---
 view/theme/frio/css/style.css                     |  5 +++++
 .../theme/frio/templates/notifications/intros.tpl | 15 +++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 41ba31dc56..927d557b4c 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -198,6 +198,11 @@ blockquote {
     padding: 1px 5px;
     font-size: 12px;
 }
+.btn.btn-danger {
+	color: #FFFFFF;
+	background-color: #AE0F0F;
+}
+
 .btn.btn-primary {
     background: $nav_bg;
     color: $btn_primary_color;
diff --git a/view/theme/frio/templates/notifications/intros.tpl b/view/theme/frio/templates/notifications/intros.tpl
index 710cd4a38c..6e083201e0 100644
--- a/view/theme/frio/templates/notifications/intros.tpl
+++ b/view/theme/frio/templates/notifications/intros.tpl
@@ -38,14 +38,13 @@
 
 		{{* On mobile touch devices we use buttons for approve, ingnore && discard to have a better UX *}}
 		{{if $is_mobile}}
-		<div class="intro-action-buttons">
-			<form class="intro-form pull-left" action="notification/{{$intro_id}}" method="post">
-				<button class="btn btn-small btn-default intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}">{{$ignore}}</button>
-				{{if $discard}}<button class="btn btn-small btn-default intro-submit-discard" type="submit" name="submit" value="{{$discard}}">{{$discard}}</button>&nbsp;{{/if}}
-			</form>
-			<button class="btn btn-small btn-primary intro-submit-approve pull-right" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}')">{{$approve}}</button>
-		</div>
-		<div class="clear"></div>
+		<form class="intro-form" action="notification/{{$intro_id}}" method="post">
+			<button class="btn btn-small btn-primary" type="button" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');"><i class="fa fa-check" aria-hidden="true"></i> {{$approve}}</button>
+			{{if $discard}}
+				<button class="btn btn-small btn-warning intro-submit-discard" type="submit" name="submit" value="{{$discard}}"><i class="fa fa-trash-o" aria-hidden="true"></i> {{$discard}}</button>
+			{{/if}}
+			<button class="btn btn-small btn-danger intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}"><i class="fa fa-ban" aria-hidden="true"></i> {{$ignore}}</button>
+		</form>
 		{{else}}
 		{{* The intro actions like approve, ignore, discard intro*}}
 		<div class="intro-actions pull-right nav-pills preferences">