From 0344a84543243eb4165b9ad3ae2beee91900deb0 Mon Sep 17 00:00:00 2001
From: Damian Wajer <damian@damianwajer.com>
Date: Wed, 18 Jan 2023 18:08:49 +0100
Subject: [PATCH] [frio] Larger clickable area for batch actions

---
 view/theme/frio/css/style.css                    | 10 ++++------
 view/theme/frio/templates/calendar/calendar.tpl  |  2 +-
 view/theme/frio/templates/contact/entry.tpl      | 16 ++++++++--------
 .../frio/templates/settings/profile/index.tpl    |  2 +-
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 3a137875b8..a7ee81b565 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -2545,20 +2545,18 @@ ul.viewcontact_wrapper > li {
 }
 .contact-wrapper .contact-actions {
 	display: flex;
+	position: relative;
+	margin: -8px -8px 0 0;
 }
 .contact-wrapper .contact-action-link,
 .contact-wrapper .contact-action-link:hover,
 .textcomplete-item .contact-wrapper .contact-action-link {
-	padding: 0 5px;
 	color: $font_color_darker;
 	border: 0;
 }
 .contact-wrapper .contact-action-link {
-	opacity: 0.1;
-	transition: all 0.25s ease-in-out;
-}
-ul li:hover .contact-wrapper .contact-action-link {
-	opacity: 0.8;
+	background-color: transparent;
+	opacity: 0.3;
 	transition: all 0.25s ease-in-out;
 }
 ul li:hover .contact-wrapper .contact-action-link:hover {
diff --git a/view/theme/frio/templates/calendar/calendar.tpl b/view/theme/frio/templates/calendar/calendar.tpl
index f233866f0b..0872ce0c5c 100644
--- a/view/theme/frio/templates/calendar/calendar.tpl
+++ b/view/theme/frio/templates/calendar/calendar.tpl
@@ -17,7 +17,7 @@
 			{{* The dropdown to change the callendar view *}}
 			<ul class="nav nav-pills">
 				<li class="dropdown pull-right">
-					<button class="btn btn-link btn-sm dropdown-toggle" type="button" id="event-calendar-views" data-toggle="dropdown" aria-expanded="false">
+					<button class="btn btn-link dropdown-toggle" type="button" id="event-calendar-views" data-toggle="dropdown" aria-expanded="false">
 						<i class="fa fa-angle-down" aria-hidden="true"></i> {{$view}}
 					</button>
 					<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="event-calendar-views">
diff --git a/view/theme/frio/templates/contact/entry.tpl b/view/theme/frio/templates/contact/entry.tpl
index de6faa2204..da777b952d 100644
--- a/view/theme/frio/templates/contact/entry.tpl
+++ b/view/theme/frio/templates/contact/entry.tpl
@@ -12,7 +12,7 @@
 				</div>
 
 				{{* For very small displays we use a dropdown menu for contact relating actions *}}
-				<button type="button" class="btn btn-link dropdown-toggle visible-xs" id="contact-photo-menu-button-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<button type="button" class="btn btn-default dropdown-toggle visible-xs" id="contact-photo-menu-button-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					{{* use a smaller picture on very small displays (e.g. mobiles) *}}
 					<div class="contact-photo-image-wrapper visible-xs">
 						<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
@@ -44,29 +44,29 @@
 		<div class="media-body">
 			{{if $contact.photo_menu}}
 			{{* The contact actions like private mail, delete contact, edit contact and so on *}}
-			<div class="contact-actions pull-right nav-pills preferences hidden-xs">
+			<div class="btn-group contact-actions pull-right nav-pills preferences hidden-xs" role="group">
 				{{if $contact.photo_menu.pm}}
-				<button type="button" class="contact-action-link btn-link" onclick="addToModal('{{$contact.photo_menu.pm.1}}'); return false;" data-toggle="tooltip" title="{{$contact.photo_menu.pm.0}}">
+				<button type="button" class="contact-action-link btn btn-default" onclick="addToModal('{{$contact.photo_menu.pm.1}}'); return false;" data-toggle="tooltip" title="{{$contact.photo_menu.pm.0}}">
 					<i class="fa fa-envelope" aria-hidden="true"></i>
 				</button>
 				{{/if}}
 				{{if $contact.photo_menu.network}}
-				<a class="contact-action-link btn-link" href="{{$contact.photo_menu.network.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.network.0}}">
+				<a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.network.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.network.0}}">
 					<i class="fa fa-cloud" aria-hidden="true"></i>
 				</a>
 				{{/if}}
 				{{if $contact.photo_menu.follow}}
-				<a class="contact-action-link btn-link" href="{{$contact.photo_menu.follow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.follow.0}}">
+				<a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.follow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.follow.0}}">
 					<i class="fa fa-user-plus" aria-hidden="true"></i>
 				</a>
 				{{/if}}
 				{{if $contact.photo_menu.unfollow}}
-				<a class="contact-action-link btn-link" href="{{$contact.photo_menu.unfollow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.unfollow.0}}">
+				<a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.unfollow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.unfollow.0}}">
 					<i class="fa fa-user-times" aria-hidden="true"></i>
 				</a>
 				{{/if}}
 				{{if $contact.photo_menu.hide}}
-				<a class="contact-action-link btn-link" href="{{$contact.photo_menu.hide.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.hide.0}}">
+				<a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.hide.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.hide.0}}">
 					<i class="fa fa-times" aria-hidden="true"></i>
 				</a>
 				{{/if}}
@@ -76,7 +76,7 @@
 			{{* The button to add or remove contacts from a contact group - group edit page *}}
 			{{if $contact.change_member}}
 			<div class="contact-group-actions pull-right nav-pills preferences">
-				<button type="button" class="contact-action-link contact-group-link btn-link" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}">
+				<button type="button" class="contact-action-link btn contact-group-link btn-default" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}">
 					{{if $contact.label == "members"}}
 					<i class="fa fa-times-circle" aria-hidden="true"></i>
 					{{elseif $contact.label == "contacts"}}
diff --git a/view/theme/frio/templates/settings/profile/index.tpl b/view/theme/frio/templates/settings/profile/index.tpl
index 3c3834c311..862d189c8e 100644
--- a/view/theme/frio/templates/settings/profile/index.tpl
+++ b/view/theme/frio/templates/settings/profile/index.tpl
@@ -5,7 +5,7 @@
 	<div id="profile-edit-links">
 		<ul class="nav nav-pills preferences">
 			<li class="dropdown pull-right">
-				<button type="button" class="btn btn-link btn-sm dropdown-toggle" id="profile-edit-links-dropdown" data-toggle="dropdown" aria-expanded="false">
+				<button type="button" class="btn btn-link dropdown-toggle" id="profile-edit-links-dropdown" data-toggle="dropdown" aria-expanded="false">
 					<i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;{{$profile_action}}
 				</button>
 				<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="profile-edit-links-dropdown">