Cosmetic Update (#753)

* UI changes

* New (header) style was missing on some pages

* Added/changed new localization strings

* Unify page titles / apply .title class everywhere

* Reduce spacing below page title

Co-authored-by: Bernd Bestel <bernd@berrnd.de>

localization/strings.pot

@@ -737,7 +737,7 @@ msgstr ""
 msgid "When not set, you will get logged out at latest after 30 days"
 msgstr ""
 
-msgid "Filter by status"
+msgid "Status"
 msgstr ""
 
 msgid "Below min. stock amount"
@@ -1430,7 +1430,7 @@ msgstr ""
 msgid "assigned to %s"
 msgstr ""
 
-msgid "Filter by assignment"
+msgid "Assignment"
 msgstr ""
 
 msgid "Consume product on chore execution"

public/css/grocy.css

@@ -430,3 +430,71 @@ canvas.drawingBuffer {
 	left: 0;
 	top: 0;
 }
+
+
+.warning-message,
+.error-message,
+.normal-message {
+  padding: 12px;
+  font-weight: bold;
+  width: fit-content;
+  border-top: 6px solid;
+}
+
+.warning-message {
+  background-color: #fffaeb;
+  color: #7c5e10;
+  border-top-color: #e9b949;
+}
+
+.error-message {
+  background-color: #ffeeee;
+  color: #780a0a;
+  border-top-color: #ba2525;
+}
+
+.normal-message {
+  background-color: #e0e8f9;
+  color: #2d3a8c;
+  border-top-color: #4c63b6;
+}
+
+.status-filter-message,
+.user-filter-message {
+  display: inline-block;
+  cursor: pointer;
+}
+
+#info-current-stock {
+  font-size: 1.5em;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.related-links .btn {
+  font-size: 14px;
+}
+
+.title {
+  display: inline-block;
+  margin-bottom: 0 !important;
+}
+
+.title-related-links {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.custom-control-label {
+  padding-top: 7px;
+  padding-left: 10px;
+}
+
+.custom-control-label::before,
+.custom-control-label::after {
+  top: 0.8rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}

public/viewjs/batteriesoverview.js

@@ -33,7 +33,7 @@ $("#status-filter").on("change", function()
 	batteriesOverviewTable.column(4).search(value).draw();
 });
 
-$(".status-filter-button").on("click", function()
+$(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
 	$("#status-filter").val(value);

public/viewjs/choresoverview.js

@@ -52,14 +52,14 @@ $("#user-filter").on("change", function()
 	}
 });
 
-$(".status-filter-button").on("click", function()
+$(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
 	$("#status-filter").val(value);
 	$("#status-filter").trigger("change");
 });
 
-$(".user-filter-button").on("click", function()
+$(".user-filter-message").on("click", function()
 {
 	var value = $(this).data("user-filter");
 	$("#user-filter").val(value);

public/viewjs/shoppinglist.js

@@ -68,7 +68,7 @@ $("#selected-shopping-list").on("change", function()
 	window.location.href = U('/shoppinglist?list=' + value);
 });
 
-$(".status-filter-button").on("click", function()
+$(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
 	$("#status-filter").val(value);

public/viewjs/stockoverview.js

@@ -47,7 +47,7 @@ $("#status-filter").on("change", function()
 	stockOverviewTable.column(5).search(value).draw();
 });
 
-$(".status-filter-button").on("click", function()
+$(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
 	$("#status-filter").val(value);

public/viewjs/tasks.js

@@ -37,7 +37,7 @@ $("#status-filter").on("change", function()
 	tasksTable.column(5).search(value).draw();
 });
 
-$(".status-filter-button").on("click", function()
+$(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
 	$("#status-filter").val(value);

views/about.blade.php

@@ -6,8 +6,8 @@
 @section('content')
 <div class="row">
 	<div class="col-xs-12 col-md-6 text-center">
-		<h1>@yield('title')</h1>
-
+		<h2 class="title">@yield('title')</h2>
+		<hr>
 		<ul class="nav nav-tabs justify-content-center mt-3">
 			<li class="nav-item">
 				<a class="nav-link active" id="system-info-tab" data-toggle="tab" href="#system-info">{{ $__t('System info') }}</a>

views/barcodescannertesting.blade.php

@@ -9,9 +9,14 @@
 @endpush
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
 
 		<form id="barcodescannertesting-form" novalidate>
 

views/batteries.blade.php

@@ -7,22 +7,32 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/battery/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=batteries') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+					{{ $__t('Configure userfields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/battery/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/batteriesjournal.blade.php

@@ -7,17 +7,25 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')</h1>
+		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
 
+<hr>
 <div class="row my-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="battery-filter">{{ $__t('Filter by battery') }}</label> <i class="fas fa-filter"></i>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="battery-filter">
 				<option value="all">{{ $__t('All') }}</option>
 			@foreach($batteries as $battery)
@@ -25,6 +33,7 @@
 			@endforeach
 			</select>
 		</div>
+	</div>
 </div>
 
 <div class="row">

views/batteriesoverview.blade.php

@@ -11,29 +11,41 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-dark responsive-button" href="{{ $U('/batteriesjournal') }}">
-				<i class="fas fa-file-alt"></i> {{ $__t('Journal') }}
+				 {{ $__t('Journal') }}
 				</a>
-		</h1>
-		<p id="info-due-batteries" data-status-filter="duesoon" data-next-x-days="{{ $nextXDays }}" class="btn btn-lg btn-warning status-filter-button responsive-button mr-2"></p>
-		<p id="info-overdue-batteries" data-status-filter="overdue" class="btn btn-lg btn-danger status-filter-button responsive-button"></p>
+			</div>
+		</div>
+		<hr>
+		<p id="info-due-batteries" data-status-filter="duesoon" data-next-x-days="{{ $nextXDays }}" class="warning-message status-filter-message responsive-button mr-2"></p>
+		<p id="info-overdue-batteries" data-status-filter="overdue" class="error-message status-filter-message responsive-button"></p>
 	</div>
 </div>
 
 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="status-filter">{{ $__t('Filter by status') }}</label> <i class="fas fa-filter"></i>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="status-filter">
-			<option class="bg-white" value="all">{{ $__t('All') }}</option>
-			<option class="bg-warning" value="duesoon">{{ $__t('Due soon') }}</option>
-			<option class="bg-danger" value="overdue">{{ $__t('Overdue') }}</option>
+				<option value="all">{{ $__t('All') }}</option>
+				<option value="duesoon">{{ $__t('Due soon') }}</option>
+				<option value="overdue">{{ $__t('Overdue') }}</option>
 			</select>
 		</div>
+	</div>
 </div>
 
 <div class="row">

views/batteriessettings.blade.php

@@ -5,10 +5,14 @@
 @section('viewJsName', 'batteriessettings')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<h4 class="mt-2">{{ $__t('Batteries overview') }}</h4>
 		@include('components.numberpicker', array(
 			'id' => 'batteries_due_soon_days',

views/batteryform.blade.php

@@ -9,9 +9,14 @@
 @section('viewJsName', 'batteryform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
 
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 

views/batterytracking.blade.php

@@ -7,8 +7,8 @@
 @section('content')
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>@yield('title')</h1>
-
+		<h2 class="title">@yield('title')</h2>
+		<hr>
 		<form id="batterytracking-form" novalidate>
 
 			<div class="form-group">

views/calendar.blade.php

@@ -16,14 +16,17 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a id="ical-button" class="btn btn-outline-dark" href="#">
-				<i class="fas fa-calendar-plus"></i>&nbsp;{{ $__t('Share/Integrate calendar (iCal)') }}
+					{{ $__t('Share/Integrate calendar (iCal)') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
+<hr>
 
 <script>
 	var fullcalendarEventSources = {!! json_encode(array($fullcalendarEventSources)) !!}

views/choreform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'choreform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/chores.blade.php

@@ -7,22 +7,32 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/chore/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=chores') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+					{{ $__t('Configure userfields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/chore/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/choresjournal.blade.php

@@ -7,17 +7,25 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')</h1>
+		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
 
+<hr>
 <div class="row my-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="chore-filter">{{ $__t('Filter by chore') }}</label> <i class="fas fa-filter"></i>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="chore-filter">
 				<option value="all">{{ $__t('All') }}</option>
 				@foreach($chores as $chore)
@@ -25,6 +33,7 @@
 				@endforeach
 			</select>
 		</div>
+	</div>
 </div>
 
 <div class="row">

views/choresoverview.blade.php

@@ -11,42 +11,60 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-dark responsive-button" href="{{ $U('/choresjournal') }}">
-				<i class="fas fa-file-alt"></i> {{ $__t('Journal') }}
+					{{ $__t('Journal') }}
 				</a>
-		</h1>
-		<p id="info-due-chores" data-status-filter="duesoon" data-next-x-days="{{ $nextXDays }}" class="btn btn-lg btn-warning status-filter-button responsive-button mr-2"></p>
-		<p id="info-overdue-chores" data-status-filter="overdue" class="btn btn-lg btn-danger status-filter-button responsive-button mr-2"></p>
+			</div>
+		</div>
+		<hr>
+		<p id="info-due-chores" data-status-filter="duesoon" data-next-x-days="{{ $nextXDays }}" class="warning-message status-filter-message responsive-message mr-2"></p>
+		<p id="info-overdue-chores" data-status-filter="overdue" class="error-message status-filter-message responsive-button mr-2"></p>
 		@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
-		<p id="info-assigned-to-me-chores" data-user-filter="xx{{ GROCY_USER_ID }}xx" class="btn btn-lg btn-secondary user-filter-button responsive-button"></p>
+		<p id="info-assigned-to-me-chores" data-user-filter="xx{{ GROCY_USER_ID }}xx" class="normal-message user-filter-message responsive-button"></p>
 		@endif
 	</div>
 </div>
 
 <div class="row mt-3">
-	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control input-group-filter" id="search">
+	<div class="col-xs-12 col-md-6 col-xl-3 d-flex align-items-end">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="status-filter">{{ $__t('Filter by status') }}</label> <i class="fas fa-filter"></i>
-		<select class="form-control input-group-filter" id="status-filter">
-			<option class="bg-white" value="all">{{ $__t('All') }}</option>
-			<option class="bg-warning" value="duesoon">{{ $__t('Due soon') }}</option>
-			<option class="bg-danger" value="overdue">{{ $__t('Overdue') }}</option>
+		<label for="status-filter">{{ $__t('Status') }}</label>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
+			<select class="form-control" id="status-filter">
+				<option value="all">{{ $__t('All') }}</option>
+				<option value="duesoon">{{ $__t('Due soon') }}</option>
+				<option value="overdue">{{ $__t('Overdue') }}</option>
 			</select>
 		</div>
+	</div>
 	@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="user-filter">{{ $__t('Filter by assignment') }}</label> <i class="fas fa-filter"></i>
-		<select class="form-control input-group-filter" id="user-filter">
+		<label for="user-filter">{{ $__t('Assignment') }}</label>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
+			<select class="form-control" id="user-filter">
 				<option></option>
 				@foreach($users as $user)
-			<option class="@if($user->id == GROCY_USER_ID) bg-secondary text-white @endif" data-user-id="{{ $user->id }}" value="xx{{ $user->id }}xx">{{ $user->display_name }}</option>
+				<option data-user-id="{{ $user->id }}" value="xx{{ $user->id }}xx">{{ $user->display_name }}</option>
 				@endforeach
 			</select>
 		</div>
+	</div>
 	@endif
 </div>
 

views/choressettings.blade.php

@@ -5,10 +5,14 @@
 @section('viewJsName', 'choressettings')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<h4 class="mt-2">{{ $__t('Chores overview') }}</h4>
 		@include('components.numberpicker', array(
 			'id' => 'chores_due_soon_days',

views/choretracking.blade.php

@@ -7,8 +7,8 @@
 @section('content')
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>@yield('title')</h1>
-
+		<h2 class="title">@yield('title')</h2>
+		<hr>
 		<form id="choretracking-form" novalidate>
 
 			<div class="form-group">

views/consume.blade.php

@@ -11,8 +11,9 @@
 @section('content')
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>
-			@yield('title')
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				@if(!$embedded)
 				<button id="scan-mode-button" class="btn @if(boolval($userSettings['scan_mode_consume_enabled'])) btn-success @else btn-danger @endif" type="checkbox">{{ $__t('Scan mode') }} <span id="scan-mode-status">@if(boolval($userSettings['scan_mode_consume_enabled'])) {{ $__t('on') }} @else {{ $__t('off') }} @endif</span></button>
 				<input id="scan-mode" type="checkbox" class="d-none user-setting-control" data-setting-key="scan_mode_consume_enabled" @if(boolval($userSettings['scan_mode_consume_enabled'])) checked @endif>
@@ -21,7 +22,9 @@
 					Grocy.UserSettings.scan_mode_consume_enabled = false;
 				</script>
 				@endif
-		</h1>
+			</div>
+		</div>
+		<hr>
 
 		<form id="consume-form" novalidate>
 

views/equipment.blade.php

@@ -8,15 +8,22 @@
 <div class="row">
 
 	<div class="col-xs-12 col-md-4 pb-3">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/equipment/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
-		</h1>
+		<h2 class="title">@yield('title')</h2>
+		<hr>
 
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="row">
+			<div class="col-xs-12 col-md-4 col-xl-3">
+				<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/equipment/new') }}">
+					{{ $__t('Add') }}
+				</a>
+			</div>
+		</div>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text" id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 
 		<table id="equipment-table" class="table table-striped dt-responsive">
 			<thead>

views/equipmentform.blade.php

@@ -9,11 +9,15 @@
 @section('viewJsName', 'equipmentform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/inventory.blade.php

@@ -7,8 +7,8 @@
 @section('content')
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>@yield('title')</h1>
-
+		<h2 class="title">@yield('title')</h2>
+		<hr>
 		<form id="inventory-form" novalidate>
 
 			@include('components.productpicker', array(

views/locationform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'locationform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/locations.blade.php

@@ -7,22 +7,32 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/location/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=locations') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+					{{ $__t('Configure userfields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/location/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/login.blade.php

@@ -6,8 +6,8 @@
 @section('content')
 <div class="row">
 	<div class="col-lg-6 offset-lg-3 col-xs-12">
-		<h1 class="text-center">@yield('title')</h1>
-
+		<h2 class="text-center">@yield('title')</h2>
+		<hr>
 		<form method="post" action="{{ $U('/login') }}" id="login-form" novalidate>
 
 			<div class="form-group">

views/manageapikeys.blade.php

@@ -11,19 +11,25 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/manageapikeys/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
-		</h1>
+		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/manageapikeys/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/mealplan.blade.php

@@ -27,11 +27,10 @@
 
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-		</h1>
+		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
+<hr>
 
 <div class="row">
 	<div class="col">

views/productform.blade.php

@@ -21,10 +21,13 @@
 
 @section('content')
 <div class="row">
-
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
+<div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/productgroupform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'productgroupform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/productgroups.blade.php

@@ -7,22 +7,32 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/productgroup/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=product_groups') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+					{{ $__t('Configure userfields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/productgroup/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/products.blade.php

@@ -7,35 +7,50 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/product/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
+				<a class="btn btn-outline-secondary mb-1" href="{{ $U('/userfields?entity=products') }}">
+					{{ $__t('Configure userfields') }}
 				</a>
-			<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=products') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+				<a class="btn btn-outline-secondary mb-1" href="{{ $U('/stocksettings#productpresets') }}">
+					{{ $__t('Presets for new products') }}
 				</a>
-			<a class="btn btn-outline-secondary" href="{{ $U('/stocksettings#productpresets') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Presets for new products') }}
-			</a>
-		</h1>
+			</div>
+		</div>
+		<hr>
 	</div>
 </div>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/product/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="location-filter">{{ $__t('Filter by product group') }}</label> <i class="fas fa-filter"></i>
-		<select class="form-control" id="product-group-filter">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
+			<select class="form-control" id="location-filter">
 				<option value="all">{{ $__t('All') }}</option>
 				@foreach($productGroups as $productGroup)
 					<option value="{{ $productGroup->id }}">{{ $productGroup->name }}</option>
 				@endforeach
 			</select>
 		</div>
+	</div>
 </div>
 
 <div class="row">

views/purchase.blade.php

@@ -11,8 +11,9 @@
 @section('content')
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>
-			@yield('title')
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				@if(!$embedded)
 				<button id="scan-mode-button" class="btn @if(boolval($userSettings['scan_mode_purchase_enabled'])) btn-success @else btn-danger @endif" type="checkbox">{{ $__t('Scan mode') }} <span id="scan-mode-status">@if(boolval($userSettings['scan_mode_purchase_enabled'])) {{ $__t('on') }} @else {{ $__t('off') }} @endif</span></button>
 				<input id="scan-mode" type="checkbox" class="d-none user-setting-control" data-setting-key="scan_mode_purchase_enabled" @if(boolval($userSettings['scan_mode_purchase_enabled'])) checked @endif>
@@ -21,7 +22,9 @@
 					Grocy.UserSettings.scan_mode_purchase_enabled = false;
 				</script>
 				@endif
-		</h1>
+			</div>
+		</div>
+		<hr>
 
 		<form id="purchase-form" novalidate>
 

views/quantityunitconversionform.blade.php

@@ -9,9 +9,14 @@
 @section('viewJsName', 'quantityunitconversionform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
 	
 		@if($product != null)
 		<h3 class="text-muted">{{ $__t('Override for product') }} <strong>{{ $product->name }}</strong></h3>

views/quantityunitform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'quantityunitform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/quantityunitpluraltesting.blade.php

@@ -9,10 +9,14 @@
 @endpush
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<form id="quantityunitpluraltesting-form" novalidate>
 
 			<div class="form-group">

views/quantityunits.blade.php

@@ -7,22 +7,32 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/quantityunit/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=quantity_units') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+					{{ $__t('Configure userfields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/quantityunit/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/recipeform.blade.php

@@ -20,8 +20,8 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')</h1>
-
+		<h2 class="title">@yield('title')</h2>
+		<hr>
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 			Grocy.QuantityUnits = {!! json_encode($quantityunits) !!};

views/recipeposform.blade.php

@@ -9,9 +9,14 @@
 @section('viewJsName', 'recipeposform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-5 pb-3">
-		<h1>@yield('title')</h1>
 		<h3 class="text-muted">{{ $__t('Recipe') }} <strong>{{ $recipe->name }}</strong></h3>
 
 		<script>

views/recipes.blade.php

@@ -13,29 +13,42 @@
 <div class="row">
 	
 	<div class="col-xs-12 col-md-6 pb-3">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/recipe/new') }}">
-				<i class="fas fa-plus"></i> {{ $__t('Add') }}
-			</a>
-		</h1>
+		<div>
+			<h2 class="title">@yield('title')</h2>
+		</div>
+		<hr>
 
 		<div class="row">
-			<div class="col-6">
-				<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-				<input type="text" class="form-control" id="search">
+			<div class="col-xs-12 col-md-4 col-xl-2">
+				<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/recipe/new') }}">
+					{{ $__t('Add') }}
+				</a>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-xs-12 col-md-6 col-xl-6">
+				<div class="input-group mb-3">
+					<div class="input-group-prepend">
+							<span class="input-group-text"><i class="fas fa-search"></i></span>
+					</div>
+					<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+				</div>
 			</div>
 
-			<div class="col-6">
-				<label for="status-filter">{{ $__t('Filter by status') }}</label> <i class="fas fa-filter"></i>
+			<div class="col-xs-12 col-md-6 col-xl-6">
+				<div class="input-group mb-3">
+					<div class="input-group-prepend">
+							<span class="input-group-text"><i class="fas fa-filter"></i></span>
+					</div>
 					<select class="form-control" id="status-filter">
-					<option class="bg-white" value="all">{{ $__t('All') }}</option>
-					<option class="bg-success" value="enoughtinstock">{{ $__t('Enough in stock') }}</option>
-					<option class="bg-warning" value="enoughinstockwithshoppinglist">{{ $__t('Not enough in stock, but already on the shopping list') }}</option>
-					<option class="bg-danger" value="notenoughinstock">{{ $__t('Not enough in stock') }}</option>
+						<option value="all">{{ $__t('All') }}</option>
+						<option value="enoughtinstock">{{ $__t('Enough in stock') }}</option>
+						<option value="enoughinstockwithshoppinglist">{{ $__t('Not enough in stock, but already on the shopping list') }}</option>
+						<option value="notenoughinstock">{{ $__t('Not enough in stock') }}</option>
 					</select>
 				</div>
 			</div>
+		</div>
 
 		<ul class="nav nav-tabs mt-3">
 			<li class="nav-item">

views/recipessettings.blade.php

@@ -5,10 +5,14 @@
 @section('viewJsName', 'recipessettings')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<h4 class="mt-2">{{ $__t('Recipe card') }}</h4>
 		<div class="form-group">
 			<div class="checkbox">

views/shoppinglist.blade.php

@@ -22,29 +22,28 @@
 @endpush
 
 @section('content')
-@if(GROCY_FEATURE_FLAG_SHOPPINGLIST_MULTIPLE_LISTS)
-<div class="row border-bottom pb-2 mb-2 d-print-none hide-on-fullscreen-card">
-	<div class="col-xs-12 col-md-4">
-		<label for="selected-shopping-list">{{ $__t('Selected shopping list') }}</label>
-		<select class="form-control" id="selected-shopping-list">
+<div class="row d-print-none hide-on-fullscreen-card">
+	<div class="col">
+		<div class="row">
+			<h2 class="col-sm-12 col-md-6 mb-2 title">@yield('title')</h2>
+			@if(GROCY_FEATURE_FLAG_SHOPPINGLIST_MULTIPLE_LISTS)
+				<div class="col-sm-12 col-md-6 d-flex align-items-end flex-wrap">
+					<div class="d-inline-block flex-grow-1 pr-1 mb-1">
+						<select class="form-control form-control-sm" id="selected-shopping-list">
 							@foreach($shoppingLists as $shoppingList)
 							<option @if($shoppingList->id == $selectedShoppingListId) selected="selected" @endif value="{{ $shoppingList->id }}">{{ $shoppingList->name }}</option>
 							@endforeach
 						</select>
 					</div>
-	<div class="col-xs-12 col-md-8">
-		<label for="selected-shopping-list">&nbsp;</label><br>
-		<a class="btn btn-outline-dark responsive-button" href="{{ $U('/shoppinglist/new') }}">
-			<i class="fas fa-plus"></i> {{ $__t('New shopping list') }}
+					<div class="d-inline-block mb-1">
+						<a class="btn btn-outline-dark btn-sm responsive-button" href="{{ $U('/shoppinglist/new') }}">
+							{{ $__t('New shopping list') }}
 						</a>
-		<a id="delete-selected-shopping-list" class="btn btn-outline-danger responsive-button @if($selectedShoppingListId == 1) disabled @endif" href="#">
-			<i class="fas fa-trash"></i> {{ $__t('Delete shopping list') }}
+						<a id="delete-selected-shopping-list" class="btn btn-outline-danger btn-sm responsive-button @if($selectedShoppingListId == 1) disabled @endif" href="#">
+							{{ $__t('Delete shopping list') }}
 						</a>
-		<a id="print-shopping-list-button" class="btn btn-outline-dark responsive-button" href="#">
-			<i class="fas fa-print"></i> {{ $__t('Print') }}
-		</a>
-		<a id="shopping-list-compact-view-button" class="btn btn-outline-dark responsive-button switch-view-mode-button" href="#">
-			<i class="fas fa-compress-arrows-alt"></i> {{ $__t('Compact view') }}
+						<a id="print-shopping-list-button" class="btn btn-outline-dark btn-sm responsive-button" href="#">
+							{{ $__t('Print') }}
 						</a>
 						<!--<div class="dropdown d-inline-block">
 							<button class="btn btn-outline-dark responsive-button dropdown-toggle" data-toggle="dropdown"><i class="fas fa-file-export"></i> {{ $__t('Output') }}</button>
@@ -53,56 +52,62 @@
 							</div>
 						</div>-->
 					</div>
-</div>
-@else
-<input type="hidden" name="selected-shopping-list" id="selected-shopping-list" value="1">
-@endif
-
-<div class="row d-print-none hide-on-fullscreen-card">
-	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark responsive-button" href="{{ $U('/shoppinglistitem/new?list=' . $selectedShoppingListId) }}">
-				<i class="fas fa-plus"></i> {{ $__t('Add item') }}
-			</a>
-			<a id="clear-shopping-list" class="btn btn-outline-danger responsive-button @if($listItems->count() == 0) disabled @endif" href="#">
-				<i class="fas fa-trash"></i> {{ $__t('Clear list') }}
-			</a>
-			<a id="add-products-below-min-stock-amount" class="btn btn-outline-primary responsive-button" href="#">
-				<i class="fas fa-cart-plus"></i> {{ $__t('Add products that are below defined min. stock amount') }}
-			</a>
-			<a id="add-all-items-to-stock-button" class="btn btn-outline-primary responsive-button" href="#">
-				<i class="fas fa-box"></i> {{ $__t('Add all list items to stock') }}
-			</a>
-			@if(!GROCY_FEATURE_FLAG_SHOPPINGLIST_MULTIPLE_LISTS)
-			<a id="shopping-list-compact-view-button" class="btn btn-outline-dark responsive-button switch-view-mode-button" href="#">
-				<i class="fas fa-compress-arrows-alt"></i> {{ $__t('Compact view') }}
-			</a>
+				</div>
+			@else
+				<input type="hidden" name="selected-shopping-list" id="selected-shopping-list" value="1">
 			@endif
-		</h1>
-		<p data-status-filter="belowminstockamount" class="btn btn-lg btn-info status-filter-button responsive-button">{{ $__n(count($missingProducts), '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') }}</p>
+		</div>
+		<hr>
+		<p data-status-filter="belowminstockamount" class="normal-message status-filter-message responsive-button">{{ $__n(count($missingProducts), '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') }}</p>
 	</div>
 </div>
 
 <div class="row mt-3 d-print-none hide-on-fullscreen-card">
-	<div class="col-xs-12 col-md-4">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+	<div class="col-md-12 mb-2">
+		<a class="btn btn-primary responsive-button btn-sm mb-1" href="{{ $U('/shoppinglistitem/new?list=' . $selectedShoppingListId) }}">
+			{{ $__t('Add item') }}
+		</a>
+		<a id="clear-shopping-list" class="btn btn-outline-danger btn-sm mb-1 responsive-button @if($listItems->count() == 0) disabled @endif" href="#">
+			{{ $__t('Clear list') }}
+		</a>
+		<a id="add-all-items-to-stock-button" class="btn btn-outline-primary btn-sm mb-1 responsive-button" href="#">
+			{{ $__t('Add all list items to stock') }}
+		</a>
+		<a id="add-products-below-min-stock-amount" class="btn btn-outline-primary btn-sm mb-1 responsive-button" href="#">
+			{{ $__t('Add products that are below defined min. stock amount') }}
+		</a>
+	</div>
+	<div class="col-xs-12 col-md-5">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
+	</div>
+	<div class="col-xs-12 col-md-4 col-lg-5">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
 			</div>
-	<div class="col-xs-12 col-md-4">
-		<label for="status-filter">{{ $__t('Filter by status') }}</label> <i class="fas fa-filter"></i>
 			<select class="form-control" id="status-filter">
-			<option class="bg-white" value="all">{{ $__t('All') }}</option>
-			<option class="bg-info" value="belowminstockamount">{{ $__t('Below min. stock amount') }}</option>
-			<option class="bg-white" value="xxUNDONExx">{{ $__t('Only undone items') }}</option>
+				<option value="all">{{ $__t('All') }}</option>
+				<option value="belowminstockamount">{{ $__t('Below min. stock amount') }}</option>
+				<option value="xxUNDONExx">{{ $__t('Only undone items') }}</option>
 			</select>
 		</div>
+	</div>
+	<div class="col-xs-12 col-md-3 col-lg-2 mb-3">
+		<a id="shopping-list-compact-view-button" class="btn btn-outline-dark responsive-button switch-view-mode-button w-100" href="#">
+			{{ $__t('Compact view') }}
+		</a>
+	</div>
 </div>
 
 <div id="shoppinglist-main" class="row d-print-none">
 	<div class="@if(boolval($userSettings['shopping_list_show_calendar'])) col-xs-12 col-md-8 @else col-12 @endif pb-3">
 		<a id="shopping-list-normal-view-button" class="btn btn-outline-dark btn-block switch-view-mode-button d-none" href="#">
-			<i class="fas fa-expand-arrows-alt"></i> {{ $__t('Normal view') }}
+			{{ $__t('Normal view') }}
 		</a>
 		<table id="shoppinglist-table" class="table table-sm table-striped dt-responsive">
 			<thead>

views/shoppinglistform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'shoppinglistform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/shoppinglistitemform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'shoppinglistitemform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/shoppinglistsettings.blade.php

@@ -5,10 +5,14 @@
 @section('viewJsName', 'shoppinglistsettings')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<h4 class="mt-2">{{ $__t('Shopping list') }}</h4>
 		<div class="form-group">
 			<div class="checkbox">

views/shoppinglocationform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'shoppinglocationform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/shoppinglocations.blade.php

@@ -7,22 +7,33 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/shoppinglocation/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=shoppinglocations') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+				  {{ $__t('Configure userfields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
+<hr>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/shoppinglocation/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/stockentries.blade.php

@@ -14,7 +14,7 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')</h1> 
+		<h2 class="title">@yield('title')</h2> 
 	</div>
 	<div class="col">
 		@include('components.productpicker', array(
@@ -23,7 +23,7 @@
 		))
 	</div>
 </div>
-
+<hr>
 <div class="row">
 	<div class="col">
 		<table id="stockentries-table" class="table table-sm table-striped dt-responsive">

views/stockentryform.blade.php

@@ -9,9 +9,14 @@
 	Grocy.EditObjectProductId = {{ $stockEntry->product_id }};
 </script>
 
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>@yield('title')</h1>
 
 		<form id="stockentry-form" novalidate>
 			@php

views/stockjournal.blade.php

@@ -7,17 +7,25 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')</h1>
+		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
 
+<hr>
 <div class="row my-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="product-filter">{{ $__t('Filter by product') }}</label> <i class="fas fa-filter"></i>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="product-filter">
 				<option value="all">{{ $__t('All') }}</option>
 				@foreach($products as $product)
@@ -25,6 +33,7 @@
 				@endforeach
 			</select>
 		</div>
+	</div>
 </div>
 
 <div class="row">

views/stockoverview.blade.php

@@ -15,36 +15,47 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>@yield('title')
-			<small id="info-current-stock" class="text-muted"></small>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-dark responsive-button" href="{{ $U('/stockjournal') }}">
-				<i class="fas fa-file-alt"></i> {{ $__t('Journal') }}
+					{{ $__t('Journal') }}
 				</a>
 				<a class="btn btn-outline-dark responsive-button" href="{{ $U('/stockentries') }}">
-				<i class="fas fa-boxes"></i> {{ $__t('Stock entries') }}
+					{{ $__t('Stock entries') }}
 				</a>
 				@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
 				<a class="btn btn-outline-dark responsive-button" href="{{ $U('/locationcontentsheet') }}">
-				<i class="fas fa-print"></i> {{ $__t('Location Content Sheet') }}
+					{{ $__t('Location Content Sheet') }}
 				</a>
 				@endif
-		</h1>
+			</div>
+		</div>
+		<div id="info-current-stock" class="text-muted"></div>
+		<hr>
 		@if (GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
-		<p id="info-expiring-products" data-next-x-days="{{ $nextXDays }}" data-status-filter="expiring" class="btn btn-lg btn-warning status-filter-button responsive-button mr-2"></p>
-		<p id="info-expired-products" data-status-filter="expired" class="btn btn-lg btn-danger status-filter-button responsive-button mr-2"></p>
+		<p id="info-expiring-products" data-next-x-days="{{ $nextXDays }}" data-status-filter="expiring" class="warning-message status-filter-message responsive-button mr-2"></p>
+		<p id="info-expired-products" data-status-filter="expired" class="error-message status-filter-message responsive-button mr-2"></p>
 		@endif
-		<p id="info-missing-products" data-status-filter="belowminstockamount" class="btn btn-lg btn-info status-filter-button responsive-button"></p>
+		<p id="info-missing-products" data-status-filter="belowminstockamount" class="normal-message status-filter-message responsive-button"></p>
 	</div>
 </div>
-
 <div class="row mt-3">
-	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+	<div class="col-xs-12 col-md-6 col-xl-3 d-flex align-items-end">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="location-filter">{{ $__t('Filter by location') }}</label> <i class="fas fa-filter"></i>
+		<label for="location-filter">{{ $__t('Location') }}</label>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="location-filter">
 				<option value="all">{{ $__t('All') }}</option>
 				@foreach($locations as $location)
@@ -52,9 +63,14 @@
 				@endforeach
 			</select>
 		</div>
+	</div>
 	@endif
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="location-filter">{{ $__t('Filter by product group') }}</label> <i class="fas fa-filter"></i>
+		<label for="product-group-filter">{{ $__t('Product group') }}</label>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="product-group-filter">
 				<option value="all">{{ $__t('All') }}</option>
 				@foreach($productGroups as $productGroup)
@@ -62,17 +78,23 @@
 				@endforeach
 			</select>
 		</div>
+	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="status-filter">{{ $__t('Filter by status') }}</label> <i class="fas fa-filter"></i>
+		<label for="status-filter">{{ $__t('Status') }}</label>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="status-filter">
 				<option class="bg-white" value="all">{{ $__t('All') }}</option>
 				@if (GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
-			<option class="bg-warning" value="expiring">{{ $__t('Expiring soon') }}</option>
-			<option class="bg-danger" value="expired">{{ $__t('Already expired') }}</option>
+				<option value="expiring">{{ $__t('Expiring soon') }}</option>
+				<option value="expired">{{ $__t('Already expired') }}</option>
 				@endif
-			<option class="bg-info" value="belowminstockamount">{{ $__t('Below min. stock amount') }}</option>
+				<option value="belowminstockamount">{{ $__t('Below min. stock amount') }}</option>
 			</select>
 		</div>
+	</div>
 </div>
 
 <div class="row">

views/stocksettings.blade.php

@@ -5,10 +5,14 @@
 @section('viewJsName', 'stocksettings')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<div id="productpresets">
 			<h4>{{ $__t('Presets for new products') }}</h4>
 

views/taskcategories.blade.php

@@ -7,22 +7,32 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/taskcategory/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary" href="{{ $U('/userfields?entity=task_categories') }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure userfields') }}
+					{{ $__t('Configure userfields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/taskcategory/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/taskcategoryform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'taskcategoryform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/taskform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'taskform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/tasks.blade.php

@@ -17,34 +17,45 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark responsive-button" href="{{ $U('/task/new') }}">
-				<i class="fas fa-plus"></i> {{ $__t('Add') }}
-			</a>
-		</h1>
-		<p id="info-due-tasks" data-status-filter="duesoon" data-next-x-days="{{ $nextXDays }}" class="btn btn-lg btn-warning status-filter-button responsive-button mr-2"></p>
-		<p id="info-overdue-tasks" data-status-filter="overdue" class="btn btn-lg btn-danger status-filter-button responsive-button"></p>
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+		<p id="info-due-tasks" data-status-filter="duesoon" data-next-x-days="{{ $nextXDays }}" class="warning-message status-filter-message responsive-button mr-2"></p>
+		<p id="info-overdue-tasks" data-status-filter="overdue" class="error-message status-filter-message responsive-button"></p>
 	</div>
 </div>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/task/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="status-filter">{{ $__t('Filter by status') }}</label> <i class="fas fa-filter"></i>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="status-filter">
-			<option class="bg-white" value="all">{{ $__t('All') }}</option>
-			<option class="bg-warning" value="duesoon">{{ $__t('Due soon') }}</option>
-			<option class="bg-danger" value="overdue">{{ $__t('Overdue') }}</option>
+				<option value="all">{{ $__t('All') }}</option>
+				<option value="duesoon">{{ $__t('Due soon') }}</option>
+				<option value="overdue">{{ $__t('Overdue') }}</option>
 			</select>
 		</div>
-	<div class="col-xs-12 col-md-6 col-xl-3 d-flex align-items-end">
-		<div class="form-check">
-			<input class="form-check-input" type="checkbox" id="show-done-tasks">
-			<label class="form-check-label" for="show-done-tasks">
+	</div>
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<div class="form-check custom-control form-control-lg custom-checkbox pt-0">
+			<input class="form-check-input custom-control-input" type="checkbox" id="show-done-tasks">
+			<label class="form-check-label custom-control-label" for="show-done-tasks">
 				{{ $__t('Show done tasks') }}
 			</label>
 		</div>

views/taskssettings.blade.php

@@ -5,9 +5,14 @@
 @section('viewJsName', 'taskssettings')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
 
 		@include('components.numberpicker', array(
 			'id' => 'tasks_due_soon_days',

views/transfer.blade.php

@@ -7,7 +7,8 @@
 @section('content')
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
-		<h1>@yield('title')</h1>
+		<h2 class="title">@yield('title')</h2>
+		<hr>
 
 		<form id="transfer-form" novalidate>
 

views/userentities.blade.php

@@ -7,19 +7,25 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a id="new-userentity-button" class="btn btn-outline-dark" href="{{ $U('/userentity/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
-		</h1>
+		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/userentity/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/userentityform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'userentityform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/userfieldform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'userfieldform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/userfields.blade.php

@@ -7,22 +7,32 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a id="new-userfield-button" class="btn btn-outline-dark" href="{{ $U('/userfield/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
-		</h1>
+		<h2h2 class="title">@yield('title')</h2h2>
 	</div>
 </div>
+<hr>
 
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/userfield/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="entity-filter">{{ $__t('Filter by entity') }}</label> <i class="fas fa-filter"></i>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-filter"></i></span>
+			</div>
 			<select class="form-control" id="entity-filter">
 				<option value="all">{{ $__t('All') }}</option>
 				@foreach($entities as $entity)
@@ -30,6 +40,7 @@
 				@endforeach
 			</select>
 		</div>
+	</div>
 </div>
 
 <div class="row">

views/userform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'userform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
 		@if($mode == 'edit')

views/userobjectform.blade.php

@@ -9,10 +9,14 @@
 @section('viewJsName', 'userobjectform')
 
 @section('content')
+<div class="row">
+	<div class="col">
+		<h2 class="title">@yield('title')</h2>
+		<hr>
+	</div>
+</div>
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
-		<h1>@yield('title')</h1>
-
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 			Grocy.EditObjectParentId = {{ $userentity->id }};

views/userobjects.blade.php

@@ -7,23 +7,33 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark d-print-none" href="{{ $U('/userobject/' . $userentity->name . '/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
 				<a class="btn btn-outline-secondary d-print-none" href="{{ $U('/userfields?entity=' . 'userentity-' . $userentity->name) }}">
-				<i class="fas fa-sliders-h"></i>&nbsp;{{ $__t('Configure fields') }}
+					{{ $__t('Configure fields') }}
 				</a>
-		</h1>
+			</div>
+		</div>
 		<h5 class="text-muted">{{ $userentity->description }}</h5>
 	</div>
 </div>
-
-<div class="row mt-3 d-print-none">
+<hr>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/userobject/' . $userentity->name . '/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>
 

views/users.blade.php

@@ -7,19 +7,25 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>
-			@yield('title')
-			<a class="btn btn-outline-dark" href="{{ $U('/user/new') }}">
-				<i class="fas fa-plus"></i>&nbsp;{{ $__t('Add') }}
-			</a>
-		</h1>
+		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
-
+<hr>
 <div class="row mt-3">
+	<div class="col-xs-12 col-md-2 col-xl-1">
+		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3" href="{{ $U('/user/new') }}">
+			{{ $__t('Add') }}
+		</a>
+	</div>
+</div>
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
-		<input type="text" class="form-control" id="search">
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+					<span class="input-group-text"><i class="fas fa-search"></i></span>
+			</div>
+			<input type="text"  id="search" class="form-control" placeholder="{{ $__t('Search') }}">
+		</div>
 	</div>
 </div>