From b9f02d13d77d9164bddc3759b161dc0b9bcae7b6 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Thu, 4 Apr 2024 21:02:29 +1100
Subject: [PATCH] Style touchups

Create utility classes for buttons and form fields
De-emphasise page heading
Hide header and footer in print layout
---
 austax/templates/cgt_adjustments.html         |  6 ++--
 austax/templates/cgt_adjustments_edit.html    | 16 +++++------
 .../templates/cgt_adjustments_multinew.html   | 14 +++++-----
 austax/templates/cgt_assets.html              |  2 +-
 drcr/css/main.css                             | 18 ++++++++++++
 drcr/templates/base.html                      | 10 +++----
 drcr/templates/chart_of_accounts.html         |  8 +++---
 drcr/templates/general_ledger.html            |  6 ++--
 .../templates/journal/balance_assertions.html |  4 +--
 .../journal/balance_assertions_edit.html      | 12 ++++----
 drcr/templates/journal/journal.html           |  8 +++---
 .../journal/journal_edit_transaction.html     | 28 +++++++++----------
 drcr/templates/report.html                    |  6 ++--
 drcr/templates/statements/import.html         | 18 ++++++------
 drcr/templates/statements/import_preview.html |  2 +-
 .../templates/statements/statement_lines.html | 12 ++++----
 drcr/templates/transactions.html              |  6 ++--
 .../transactions_commodity_detail.html        |  6 ++--
 drcr/templates/trial_balance.html             |  2 +-
 19 files changed, 101 insertions(+), 83 deletions(-)

diff --git a/austax/templates/cgt_adjustments.html b/austax/templates/cgt_adjustments.html
index 416929a..0d92b50 100644
--- a/austax/templates/cgt_adjustments.html
+++ b/austax/templates/cgt_adjustments.html
@@ -19,18 +19,18 @@
 {% block title %}CGT adjustments{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		CGT adjustments
 	</h1>
 	
 	<div class="my-4 flex gap-x-2">
-		<a href="{{ url_for('cgt_adjustment_new') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
+		<a href="{{ url_for('cgt_adjustment_new') }}" class="btn-primary pl-2">
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 			</svg>
 			New CGT adjustment
 		</a>
-		<a href="{{ url_for('cgt_adjustment_multinew') }}" class="inline-flex items-center gap-x-1.5 pl-2 pr-3 py-1 text-emerald-700 ring-1 ring-inset ring-emerald-600 hover:bg-gray-50">
+		<a href="{{ url_for('cgt_adjustment_multinew') }}" class="btn-secondary pl-2 text-emerald-700 ring-emerald-600">
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 			</svg>
diff --git a/austax/templates/cgt_adjustments_edit.html b/austax/templates/cgt_adjustments_edit.html
index de93b66..9518f45 100644
--- a/austax/templates/cgt_adjustments_edit.html
+++ b/austax/templates/cgt_adjustments_edit.html
@@ -20,7 +20,7 @@
 
 {% block content %}
 	<div class="max-w-lg mx-auto px-4">
-		<h1 class="text-3xl text-gray-900 mb-4">
+		<h1 class="page-heading mb-4">
 			{{ 'Edit' if adjustment else 'New' }} CGT adjustment
 		</h1>
 		
@@ -30,38 +30,38 @@
 				
 				<label for="acquisition_date" class="block text-gray-900 pr-4">Acquisition date</label>
 				<div>
-					<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="acquisition_date" id="acquisition_date" value="{{ adjustment.acquisition_date.strftime('%Y-%m-%d') if adjustment else request.args.get('acquisition_date', '') }}">
+					<input type="date" class="bordered-field" name="acquisition_date" id="acquisition_date" value="{{ adjustment.acquisition_date.strftime('%Y-%m-%d') if adjustment else request.args.get('acquisition_date', '') }}">
 				</div>
 				<label for="account" class="block text-gray-900 pr-4">Account</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" id="account" value="{{ adjustment.account if adjustment else request.args.get('account', '') }}">
+					<input type="text" class="bordered-field" name="account" id="account" value="{{ adjustment.account if adjustment else request.args.get('account', '') }}">
 				</div>
 				<label for="asset" class="block text-gray-900 pr-4">Asset</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="asset" id="asset" value="{{ adjustment.asset().quantity_string() if adjustment else request.args.get('asset', '') }}">
+					<input type="text" class="bordered-field" name="asset" id="asset" value="{{ adjustment.asset().quantity_string() if adjustment else request.args.get('asset', '') }}">
 				</div>
 				
 				<h2 class="col-span-2 text-xl text-gray-900 font-semibold pt-4">CGT adjustment</h2>
 				
 				<label for="dt" class="block text-gray-900 pr-4">Adjustment date</label>
 				<div>
-					<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" id="dt" value="{{ adjustment.dt.strftime('%Y-%m-%d') if adjustment else '' }}">
+					<input type="date" class="bordered-field" name="dt" id="dt" value="{{ adjustment.dt.strftime('%Y-%m-%d') if adjustment else '' }}">
 				</div>
 				<label for="description" class="block text-gray-900 pr-4">Description</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" id="description" value="{{ adjustment.description if adjustment else '' }}">
+					<input type="text" class="bordered-field" name="description" id="description" value="{{ adjustment.description if adjustment else '' }}">
 				</div>
 				<label for="cost_adjustment" class="block text-gray-900 pr-4">Cost adjustment</label>
 				<div class="relative shadow-sm">
 					<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 						<span class="text-gray-500">$</span>
 					</div>
-					<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ adjustment.cost_adjustment_amount().quantity_string() if adjustment else '' }}" placeholder="0.00">
+					<input type="number" class="bordered-field pl-7" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ adjustment.cost_adjustment_amount().quantity_string() if adjustment else '' }}" placeholder="0.00">
 				</div>
 			</div>
 			
 			<div class="text-end">
-				<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
+				<button type="submit" class="btn-primary">Save</button>
 			</div>
 		</form>
 	</div>
diff --git a/austax/templates/cgt_adjustments_multinew.html b/austax/templates/cgt_adjustments_multinew.html
index 890492f..34b971a 100644
--- a/austax/templates/cgt_adjustments_multinew.html
+++ b/austax/templates/cgt_adjustments_multinew.html
@@ -20,7 +20,7 @@
 
 {% block content %}
 	<div class="max-w-lg mx-auto px-4">
-		<h1 class="text-3xl text-gray-900 mb-4">
+		<h1 class="page-heading mb-4">
 			Multiple CGT adjustments
 		</h1>
 		
@@ -30,11 +30,11 @@
 				
 				<label for="account" class="block text-gray-900 pr-4">Account</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" id="account" value="{{ account or '' }}">
+					<input type="text" class="bordered-field" name="account" id="account" value="{{ account or '' }}">
 				</div>
 				<label for="commodity" class="block text-gray-900 pr-4">Commodity</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="commodity" id="commodity" value="{{ commodity or '' }}">
+					<input type="text" class="bordered-field" name="commodity" id="commodity" value="{{ commodity or '' }}">
 				</div>
 				
 				<div class="rounded-md bg-blue-50 p-4 col-span-2">
@@ -54,23 +54,23 @@
 				
 				<label for="dt" class="block text-gray-900 pr-4">Adjustment date</label>
 				<div>
-					<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" id="dt" value="{{ dt or '' }}">
+					<input type="date" class="bordered-field" name="dt" id="dt" value="{{ dt or '' }}">
 				</div>
 				<label for="description" class="block text-gray-900 pr-4">Description</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" id="description" value="{{ description or '' }}">
+					<input type="text" class="bordered-field" name="description" id="description" value="{{ description or '' }}">
 				</div>
 				<label for="cost_adjustment" class="block text-gray-900 pr-4">Total cost adjustment</label>
 				<div class="relative shadow-sm">
 					<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 						<span class="text-gray-500">$</span>
 					</div>
-					<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ cost_adjustment or '' }}" placeholder="0.00">
+					<input type="number" class="bordered-field pl-7" name="cost_adjustment" id="cost_adjustment" step="0.01" value="{{ cost_adjustment or '' }}" placeholder="0.00">
 				</div>
 			</div>
 			
 			<div class="text-end">
-				<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
+				<button type="submit" class="btn-primary">Save</button>
 			</div>
 		</form>
 	</div>
diff --git a/austax/templates/cgt_assets.html b/austax/templates/cgt_assets.html
index 1145f47..1b8c749 100644
--- a/austax/templates/cgt_assets.html
+++ b/austax/templates/cgt_assets.html
@@ -19,7 +19,7 @@
 {% block title %}CGT assets{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		CGT assets
 	</h1>
 	
diff --git a/drcr/css/main.css b/drcr/css/main.css
index b5c61c9..18c2650 100644
--- a/drcr/css/main.css
+++ b/drcr/css/main.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+	.bordered-field {
+		@apply block w-full border-0 py-1 text-gray-900 placeholder:text-gray-400 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600;
+	}
+	.btn-primary {
+		@apply inline-flex items-center gap-x-1.5 bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700;
+	}
+	.btn-secondary {
+		@apply inline-flex items-center gap-x-1.5 px-3 py-1 text-gray-800 shadow-sm ring-1 ring-inset ring-gray-400 hover:bg-gray-50;
+	}
+	.checkbox-primary {
+		@apply h-4 w-4 border-gray-300 text-emerald-600 shadow-sm focus:ring-emerald-600 -mt-0.5;
+	}
+	.page-heading {
+		@apply text-xl sm:text-base font-medium text-gray-700 print:text-xl print:text-gray-900;
+	}
+}
diff --git a/drcr/templates/base.html b/drcr/templates/base.html
index 2ef9a0b..05c4d2a 100644
--- a/drcr/templates/base.html
+++ b/drcr/templates/base.html
@@ -28,9 +28,9 @@
 		{% block body %}
 			<div class="min-h-full">
 				{# Navigation bar #}
-				<nav class="border-b border-gray-200 bg-white">
-					<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-						<div class="flex h-12 justify-between">
+				<nav class="border-b border-gray-200 bg-white print:hidden">
+					<div class="mx-auto max-w-7xl px-6 lg:px-8">
+						<div class="flex h-12 justify-between ml-[-0.25rem]"> {# Adjust margin by -0.25rem to align navbar text with body text #}
 							<div class="flex">
 								<div class="flex flex-shrink-0">
 									<a href="{{ url_for('index') }}" class="border-transparent text-gray-900 hover:border-emerald-500 hover:text-emerald-700 inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium">
@@ -57,14 +57,14 @@
 				
 				<div class="py-8">
 					<main>
-						<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+						<div class="mx-auto max-w-7xl px-6 lg:px-8">
 							{% block content %}{% endblock %}
 						</div>
 					</main>
 				</div>
 				
 				{% if config['DEBUG'] %}
-					<footer>
+					<footer class="print:hidden">
 						<div class="mt-6 mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
 							<div class="border-t border-gray-200 py-4 text-center text-sm text-gray-500 sm:text-left">
 								Queries executed in {{ dbtime() }} msec. Page generated in __EXECUTION_TIME__ msec.
diff --git a/drcr/templates/chart_of_accounts.html b/drcr/templates/chart_of_accounts.html
index 62aa385..ae3c3b5 100644
--- a/drcr/templates/chart_of_accounts.html
+++ b/drcr/templates/chart_of_accounts.html
@@ -19,14 +19,14 @@
 {% block title %}Chart of accounts{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		Chart of accounts
 	</h1>
 	
 	<form method="POST">
 		<div class="my-2 py-2 flex gap-x-2 items-baseline bg-white sticky top-0">
 			<div>
-				<select class="mt-2 block w-full border-0 py-1 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600" name="kind">
+				<select class="mt-2 bordered-field pl-3 pr-10" name="kind">
 					{% for plugin_name, plugin_account_kinds in account_kinds_by_plugin.items() %}
 						<optgroup label="{{ plugin_name }}">
 							{% for account_kind in plugin_account_kinds %}
@@ -37,7 +37,7 @@
 				</select>
 			</div>
 			<div>
-				<button formaction="{{ url_for('account_add_kind') }}" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700" type="submit">Add type</button>
+				<button formaction="{{ url_for('account_add_kind') }}" class="btn-primary" type="submit">Add type</button>
 			</div>
 		</div>
 		
@@ -52,7 +52,7 @@
 			<tbody>
 				{% for account in accounts %}
 					<tr class="border-t border-gray-300">
-						<td class="py-0.5 text-gray-900 align-baseline"><input class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600 -mt-0.5" type="checkbox" name="sel-account" value="{{ account }}"></td>
+						<td class="py-0.5 text-gray-900 align-baseline"><input class="checkbox-primary" type="checkbox" name="sel-account" value="{{ account }}"></td>
 						<td class="py-0.5 text-gray-900 align-baseline">{{ account }}</td>
 						<td class="py-0.5 text-gray-900 align-baseline">
 							{% if account in account_configurations %}
diff --git a/drcr/templates/general_ledger.html b/drcr/templates/general_ledger.html
index 8a96fc7..9f2f79c 100644
--- a/drcr/templates/general_ledger.html
+++ b/drcr/templates/general_ledger.html
@@ -19,17 +19,17 @@
 {% block title %}General ledger{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		General ledger
 	</h1>
 	
 	<div class="my-4 flex">
 		{% if commodity_detail %}
-			<a href="{{ url_for('general_ledger') }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+			<a href="{{ url_for('general_ledger') }}" class="btn-secondary">
 				Hide commodity detail
 			</a>
 		{% else %}
-			<a href="{{ url_for('general_ledger', commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+			<a href="{{ url_for('general_ledger', commodity_detail=1) }}" class="btn-secondary">
 				Show commodity detail
 			</a>
 		{% endif %}
diff --git a/drcr/templates/journal/balance_assertions.html b/drcr/templates/journal/balance_assertions.html
index 5b190ec..657e496 100644
--- a/drcr/templates/journal/balance_assertions.html
+++ b/drcr/templates/journal/balance_assertions.html
@@ -19,12 +19,12 @@
 {% block title %}Balance assertions{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		Balance assertions
 	</h1>
 	
 	<div class="my-4 flex gap-x-2">
-		<a href="{{ url_for('balance_assertions_new') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
+		<a href="{{ url_for('balance_assertions_new') }}" class="btn-primary pl-2">
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 			</svg>
diff --git a/drcr/templates/journal/balance_assertions_edit.html b/drcr/templates/journal/balance_assertions_edit.html
index 3bb1b4a..f82535d 100644
--- a/drcr/templates/journal/balance_assertions_edit.html
+++ b/drcr/templates/journal/balance_assertions_edit.html
@@ -20,7 +20,7 @@
 
 {% block content %}
 	<div class="max-w-lg mx-auto px-4">
-		<h1 class="text-3xl text-gray-900 mb-4">
+		<h1 class="page-heading mb-4">
 			{{ 'Edit' if assertion else 'New' }} balance assertion
 		</h1>
 		
@@ -28,15 +28,15 @@
 			<div class="grid grid-cols-[max-content_1fr] space-y-2 mb-4 items-baseline">
 				<label for="dt" class="block text-gray-900 pr-4">Date</label>
 				<div>
-					<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" id="dt" value="{{ assertion.dt.strftime('%Y-%m-%d') if assertion else '' }}">
+					<input type="date" class="bordered-field" name="dt" id="dt" value="{{ assertion.dt.strftime('%Y-%m-%d') if assertion else '' }}">
 				</div>
 				<label for="description" class="block text-gray-900 pr-4">Description</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" id="description" value="{{ assertion.description if assertion else '' }}">
+					<input type="text" class="bordered-field" name="description" id="description" value="{{ assertion.description if assertion else '' }}">
 				</div>
 				<label for="account" class="block text-gray-900 pr-4">Account</label>
 				<div>
-					<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" id="account" value="{{ assertion.account if assertion else '' }}">
+					<input type="text" class="bordered-field" name="account" id="account" value="{{ assertion.account if assertion else '' }}">
 				</div>
 				<label for="amount" class="block text-gray-900 pr-4">Balance</label>
 				<div class="relative shadow-sm">
@@ -44,7 +44,7 @@
 						<span class="text-gray-500">$</span>
 					</div>
 					{# TODO: Display existing credit assertion as credit, not as negative debit #}
-					<input type="number" class="block w-full border-0 py-1 pl-7 pr-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ assertion.balance().quantity_string() if assertion else '' }}" placeholder="0.00">
+					<input type="number" class="bordered-field pl-7 pr-16" name="amount" step="0.01" value="{{ assertion.balance().quantity_string() if assertion else '' }}" placeholder="0.00">
 					<div class="absolute inset-y-0 right-0 flex items-center">
 						<select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600" name="sign">
 							<option value="dr">Dr</option>
@@ -55,7 +55,7 @@
 			</div>
 			
 			<div class="text-end">
-				<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
+				<button type="submit" class="btn-primary">Save</button>
 			</div>
 		</form>
 	</div>
diff --git a/drcr/templates/journal/journal.html b/drcr/templates/journal/journal.html
index 51df56a..d7ff079 100644
--- a/drcr/templates/journal/journal.html
+++ b/drcr/templates/journal/journal.html
@@ -19,23 +19,23 @@
 {% block title %}Journal{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		Journal
 	</h1>
 	
 	<div class="my-4 flex gap-x-2">
-		<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
+		<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 			</svg>
 			New transaction
 		</a>
 		{% if commodity_detail %}
-			<a href="{{ url_for('journal') }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+			<a href="{{ url_for('journal') }}" class="btn-secondary">
 				Hide commodity detail
 			</a>
 		{% else %}
-			<a href="{{ url_for('journal', commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+			<a href="{{ url_for('journal', commodity_detail=1) }}" class="btn-secondary">
 				Show commodity detail
 			</a>
 		{% endif %}
diff --git a/drcr/templates/journal/journal_edit_transaction.html b/drcr/templates/journal/journal_edit_transaction.html
index 41b9391..af51929 100644
--- a/drcr/templates/journal/journal_edit_transaction.html
+++ b/drcr/templates/journal/journal_edit_transaction.html
@@ -19,7 +19,7 @@
 {% block title %}{{ 'Edit' if transaction and transaction.id else 'New' }} transaction{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900 mb-4">
+	<h1 class="page-heading mb-4">
 		{{ 'Edit' if transaction and transaction.id else 'New' }} transaction
 	</h1>
 	
@@ -36,10 +36,10 @@
 			<tbody>
 				<tr>
 					<td class="pt-2 pb-1 pr-1">
-						<input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" value="{{ transaction.dt.strftime('%Y-%m-%d') if transaction else '' }}">
+						<input type="date" class="bordered-field" name="dt" value="{{ transaction.dt.strftime('%Y-%m-%d') if transaction else '' }}">
 					</td>
 					<td class="pt-2 pb-1 px-1" colspan="2">
-						<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" value="{{ transaction.description if transaction else '' }}">
+						<input type="text" class="bordered-field" name="description" value="{{ transaction.description if transaction else '' }}">
 					</td>
 					<td></td>
 					<td></td>
@@ -58,7 +58,7 @@
 												<option value="cr"{% if posting.quantity < 0 %} selected{% endif %}>Cr</option>
 											</select>
 										</div>
-										<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" value="{{ posting.account }}">
+										<input type="text" class="bordered-field pl-16" name="account" value="{{ posting.account }}">
 									</div>
 									<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
 										<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
@@ -73,7 +73,7 @@
 										<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 											<span class="text-gray-500">$</span>
 										</div>
-										<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ posting.amount().quantity_string() }}" oninput="changeAmount(this)">
+										<input type="number" class="bordered-field pl-7" name="amount" step="0.01" value="{{ posting.amount().quantity_string() }}" oninput="changeAmount(this)">
 									</div>
 								</td>
 								<td class="amount-cr py-1 pl-1"></td>
@@ -84,7 +84,7 @@
 										<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 											<span class="text-gray-500">$</span>
 										</div>
-										<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ (posting.amount()|abs).quantity_string() }}" oninput="changeAmount(this)">
+										<input type="number" class="bordered-field pl-7" name="amount" step="0.01" value="{{ (posting.amount()|abs).quantity_string() }}" oninput="changeAmount(this)">
 									</div>
 								</td>
 							{% endif %}
@@ -103,7 +103,7 @@
 											<option value="cr">Cr</option>
 										</select>
 									</div>
-									<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">
+									<input type="text" class="bordered-field pl-16" name="account">
 								</div>
 								<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
 									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
@@ -117,7 +117,7 @@
 								<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 									<span class="text-gray-500">$</span>
 								</div>
-								<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">
+								<input type="number" class="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
 							</div>
 						</td>
 						<td class="amount-cr py-1 pl-1"></td>
@@ -134,7 +134,7 @@
 											<option value="cr" selected>Cr</option>
 										</select>
 									</div>
-									<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">
+									<input type="text" class="bordered-field pl-16" name="account">
 								</div>
 								<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
 									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
@@ -149,7 +149,7 @@
 								<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 									<span class="text-gray-500">$</span>
 								</div>
-								<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">
+								<input type="number" class="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
 							</div>
 						</td>
 					</tr>
@@ -159,9 +159,9 @@
 		
 		<div class="flex justify-end mt-4 space-x-2">
 			{% if transaction and transaction.id %}
-				<button type="submit" name="action" value="delete" class="px-3 py-1 text-red-600 ring-1 ring-inset ring-red-500 hover:bg-gray-50" onclick="confirm('Are you sure you want to delete this transaction? This operation is irreversible.')">Delete</button>
+				<button type="submit" name="action" value="delete" class="btn-secondary text-red-600 ring-red-500" onclick="confirm('Are you sure you want to delete this transaction? This operation is irreversible.')">Delete</button>
 			{% endif %}
-			<button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
+			<button type="submit" class="btn-primary">Save</button>
 		</div>
 		
 		<input type="hidden" name="referrer" value="{{ request.referrer or '' }}">
@@ -198,7 +198,7 @@
 					'<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">' +
 						'<span class="text-gray-500">$</span>' +
 					'</div>' +
-					'<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">' +
+					'<input type="number" class="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">' +
 				'</div>';
 			
 			// Add new posting row
@@ -214,7 +214,7 @@
 										(sign === 'dr' ? '<option value="dr" selected>Dr</option><option value="cr">Cr</option>' : '<option value="dr">Dr</option><option value="cr" selected>Cr</option>') +
 									'</select>' +
 								'</div>' +
-								'<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">' +
+								'<input type="text" class="bordered-field pl-16" name="account">' +
 							'</div>' +
 							'<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">' +
 								'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">' +
diff --git a/drcr/templates/report.html b/drcr/templates/report.html
index 800dda2..fe4edb7 100644
--- a/drcr/templates/report.html
+++ b/drcr/templates/report.html
@@ -35,14 +35,14 @@
 		{% if entry.__class__.__name__ == 'Section' %}
 			{{ render_section(entry) }}
 		{% elif entry.__class__.__name__ == 'Subtotal' %}
-			<tr{% if entry.bordered %} class="border-y border-gray-200"{% endif %}>
+			<tr{% if entry.bordered %} class="border-y border-gray-300"{% endif %}>
 				<th class="py-0.5 text-gray-900 font-semibold text-start">{{ entry.text }}</th>
 				<th class="py-0.5 text-gray-900 font-semibold text-end">{{ entry.amount.format_accounting() }}</th>
 			</tr>
 		{% elif entry.__class__.__name__ == 'Spacer' %}
 			<tr><td colspan="2" class="py-0.5">&nbsp;</td></tr>
 		{% else %}
-			<tr{% if entry.bordered %} class="border-y border-gray-200"{% endif %}>
+			<tr{% if entry.bordered %} class="border-y border-gray-300"{% endif %}>
 				{% if entry.heading %}<th class="py-0.5 text-gray-900 font-semibold text-start">{% else %}<td class="py-0.5 text-gray-900 text-start">{% endif %}
 					{% if entry.link %}
 						<a href="{{ entry.link }}" class="hover:text-blue-700 hover:underline">{{ entry.text }}</a>
@@ -59,7 +59,7 @@
 {% endmacro %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		{{ report.title }}
 	</h1>
 	
diff --git a/drcr/templates/statements/import.html b/drcr/templates/statements/import.html
index 9d844a6..21d7b1c 100644
--- a/drcr/templates/statements/import.html
+++ b/drcr/templates/statements/import.html
@@ -19,7 +19,7 @@
 {% block title %}Import statement{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900 mb-4">
+	<h1 class="page-heading mb-4">
 		Import statement
 	</h1>
 	
@@ -29,19 +29,19 @@
 		<input type="hidden" name="format" value="ofx1">
 		<div class="flex">
 			<div class="grow mr-2">
-				<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="source-account" placeholder="Source account">
+				<input type="text" class="bordered-field" name="source-account" placeholder="Source account">
 			</div>
 			<div class="flex">
 			</div>
 			<div class="flex grow mr-2">
-				<label for="file_ofx1" class="bg-gray-600 px-3 py-1 text-white shadow-sm hover:bg-gray-700">Browse</label>
+				<label for="file_ofx1" class="btn-primary bg-gray-600 hover:bg-gray-700">Browse</label>
 				<input type="file" class="file:hidden block w-full border-0 py-1 px-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300" name="file" id="file_ofx1" accept=".ofx">
 			</div>
 			<div class="mr-2">
-				<button type="submit" name="action" value="preview" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">Preview</button>
+				<button type="submit" name="action" value="preview" class="btn-secondary">Preview</button>
 			</div>
 			<div>
-				<button type="submit" name="action" value="import" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Import</button>
+				<button type="submit" name="action" value="import" class="btn-primary">Import</button>
 			</div>
 		</div>
 	</form>
@@ -52,19 +52,19 @@
 		<input type="hidden" name="format" value="ofx2">
 		<div class="flex">
 			<div class="grow mr-2">
-				<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="source-account" placeholder="Source account">
+				<input type="text" class="bordered-field" name="source-account" placeholder="Source account">
 			</div>
 			<div class="flex">
 			</div>
 			<div class="flex grow mr-2">
-				<label for="file_ofx2" class="bg-gray-600 px-3 py-1 text-white shadow-sm hover:bg-gray-700">Browse</label>
+				<label for="file_ofx2" class="btn-primary bg-gray-600 hover:bg-gray-700">Browse</label>
 				<input type="file" class="file:hidden block w-full border-0 py-1 px-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300" name="file" id="file_ofx2" accept=".ofx">
 			</div>
 			<div class="mr-2">
-				<button type="submit" name="action" value="preview" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">Preview</button>
+				<button type="submit" name="action" value="preview" class="btn-secondary">Preview</button>
 			</div>
 			<div>
-				<button type="submit" name="action" value="import" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Import</button>
+				<button type="submit" name="action" value="import" class="btn-primary">Import</button>
 			</div>
 		</div>
 	</form>
diff --git a/drcr/templates/statements/import_preview.html b/drcr/templates/statements/import_preview.html
index a67b0d1..c71bd40 100644
--- a/drcr/templates/statements/import_preview.html
+++ b/drcr/templates/statements/import_preview.html
@@ -19,7 +19,7 @@
 {% block title %}Import statement preview{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900 mb-4">
+	<h1 class="page-heading mb-4">
 		Import statement preview
 	</h1>
 	
diff --git a/drcr/templates/statements/statement_lines.html b/drcr/templates/statements/statement_lines.html
index 9eb885d..11d142a 100644
--- a/drcr/templates/statements/statement_lines.html
+++ b/drcr/templates/statements/statement_lines.html
@@ -19,21 +19,21 @@
 {% block title %}Statement lines{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		Statement lines
 	</h1>
 	
 	<form method="POST">
 		<div class="my-2 py-2 flex bg-white sticky top-0">
-			<div class="grow flex gap-x-2">
-				<button formaction="{{ url_for('statement_line_reconcile_transfer') }}" class="self-baseline px-3 py-1 text-emerald-700 ring-1 ring-inset ring-emerald-600 bg-white hover:bg-gray-50" type="submit">
+			<div class="grow flex gap-x-2 items-baseline">
+				<button formaction="{{ url_for('statement_line_reconcile_transfer') }}" class="btn-secondary text-emerald-700 ring-emerald-600" type="submit">
 					Reconcile selected as transfer
 				</button>
-				<a href="{{ url_for('statement_lines_import') }}" class="self-baseline px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+				<a href="{{ url_for('statement_lines_import') }}" class="btn-secondary">
 					Import statement
 				</a>
 				{% if request.args.get('unclassified', '0') != '1' %}
-					<a href="{{ url_for('statement_lines', **dict(request.args, unclassified=1)) }}" class="self-baseline px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+					<a href="{{ url_for('statement_lines', **dict(request.args, unclassified=1)) }}" class="btn-secondary">
 						Show only unclassified lines
 					</a>
 				{% endif %}
@@ -83,7 +83,7 @@
 			<tbody>
 				{% for line in page.items %}
 					<tr data-line-id="{{ line.id }}">
-						<td class="py-0.5 pr-2 align-baseline"><input class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600 -mt-0.5" type="checkbox" name="sel-line-id" value="{{ line.id }}"></td>
+						<td class="py-0.5 pr-2 align-baseline"><input class="checkbox-primary" type="checkbox" name="sel-line-id" value="{{ line.id }}"></td>
 						<td class="py-0.5 pr-2 align-baseline text-gray-900"><a href="{{ url_for('statement_lines', account=line.source_account) }}" class="hover:text-blue-700 hover:underline">{{ line.source_account }}</a></td>
 						<td class="py-0.5 pr-2 align-baseline text-gray-900">{{ line.dt.strftime('%Y-%m-%d') }}</td>
 						<td class="py-0.5 pr-2 align-baseline text-gray-900">{{ line.description }}</td>
diff --git a/drcr/templates/transactions.html b/drcr/templates/transactions.html
index 1405f69..9494ca2 100644
--- a/drcr/templates/transactions.html
+++ b/drcr/templates/transactions.html
@@ -19,18 +19,18 @@
 {% block title %}Account transactions{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		Account transactions
 	</h1>
 	
 	<div class="my-4 flex gap-x-2">
-		<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
+		<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 			</svg>
 			New transaction
 		</a>
-		<a href="{{ url_for('account_transactions', account=account, commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+		<a href="{{ url_for('account_transactions', account=account, commodity_detail=1) }}" class="btn-secondary">
 			Show commodity detail
 		</a>
 	</div>
diff --git a/drcr/templates/transactions_commodity_detail.html b/drcr/templates/transactions_commodity_detail.html
index 5084ff0..67e0d07 100644
--- a/drcr/templates/transactions_commodity_detail.html
+++ b/drcr/templates/transactions_commodity_detail.html
@@ -19,18 +19,18 @@
 {% block title %}Account transactions{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900">
+	<h1 class="page-heading">
 		Account transactions
 	</h1>
 	
 	<div class="my-4 flex gap-x-2">
-		<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-emerald-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-emerald-700">
+		<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 			</svg>
 			New transaction
 		</a>
-		<a href="{{ url_for('account_transactions', account=account) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+		<a href="{{ url_for('account_transactions', account=account) }}" class="btn-secondary">
 			Hide commodity detail
 		</a>
 	</div>
diff --git a/drcr/templates/trial_balance.html b/drcr/templates/trial_balance.html
index 17d5d6e..38d84aa 100644
--- a/drcr/templates/trial_balance.html
+++ b/drcr/templates/trial_balance.html
@@ -19,7 +19,7 @@
 {% block title %}Trial balance{% endblock %}
 
 {% block content %}
-	<h1 class="text-3xl text-gray-900 mb-4">
+	<h1 class="page-heading mb-4">
 		Trial balance
 	</h1>