From 9d3431cc0e78ec2d186c4ba6b14b108fcec6ec29 Mon Sep 17 00:00:00 2001
From: Steinar Bang <sb@dod.no>
Date: Fri, 12 Jan 2024 23:44:39 +0100
Subject: [PATCH] Switch from bootstrap v4 (4.6.2) to boostrap v5 (5.2.3)

---
 .../src/main/frontend/components/Admin.js     | 24 +++++++++----------
 .../frontend/components/AdminBonusCreate.js   | 14 +++++------
 .../frontend/components/AdminBonusDelete.js   |  8 +++----
 .../frontend/components/AdminBonusModify.js   | 16 ++++++-------
 .../main/frontend/components/AdminBonuses.js  |  6 ++---
 .../frontend/components/AdminJobsDelete.js    |  2 +-
 .../main/frontend/components/AdminJobsEdit.js |  8 +++----
 .../main/frontend/components/AdminJobtypes.js |  8 +++----
 .../components/AdminJobtypesCreate.js         |  6 ++---
 .../components/AdminJobtypesModify.js         |  8 +++----
 .../frontend/components/AdminPaymenttypes.js  |  4 ++--
 .../components/AdminPaymenttypesCreate.js     |  6 ++---
 .../components/AdminPaymenttypesModify.js     |  8 +++----
 .../main/frontend/components/AdminUsers.js    |  6 ++---
 .../components/AdminUsersChangePassword.js    |  8 +++----
 .../frontend/components/AdminUsersCreate.js   | 14 +++++------
 .../frontend/components/AdminUsersModify.js   | 12 +++++-----
 .../main/frontend/components/Statistics.js    |  4 ++--
 .../src/main/frontend/components/User.js      | 14 +++++------
 .../src/main/resources/index.html             |  6 ++---
 20 files changed, 90 insertions(+), 92 deletions(-)

diff --git a/ukelonn.web.frontend/src/main/frontend/components/Admin.js b/ukelonn.web.frontend/src/main/frontend/components/Admin.js
index 14021f7b..c37d6b52 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/Admin.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/Admin.js
@@ -38,7 +38,7 @@ export default function Admin() {
             </div>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="account-selector" className="col-form-label col-5">{text.chooseWhoToPayTo}:</label>
                         <div className="col-7">
                             <Accounts id="account-selector" className="form-control" />
@@ -47,19 +47,19 @@ export default function Admin() {
                     <div className="row">
                         <EarningsMessage />
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="account-balance" className="col-form-label col-5">{text.owedAmount}:</label>
                         <div className="col-7">
                             <input id="account-balance" className="form-control" type="text" value={balance} readOnly={true} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="paymenttype-selector" className="col-form-label col-5">{text.paymentType}:</label>
                         <div className="col-7">
                             <Paymenttypes id="paymenttype-selector" className="form-control" />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-form-label col-5">{text.amount}:</label>
                         <div className="col-7">
                             <input
@@ -70,7 +70,7 @@ export default function Admin() {
                                 onChange={e => dispatch(MODIFY_PAYMENT_AMOUNT(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5" />
                         <div className="col-7">
                             <button
@@ -84,37 +84,37 @@ export default function Admin() {
                 </div>
             </form>
             <div className="container">
-                <Link className="btn btn-block btn-primary right-align-cell" to={performedjobs}>
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to={performedjobs}>
                     {text.performedJobs}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to={performedpayments}>
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to={performedpayments}>
                     {text.performedPayments}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to={statistics}>
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to={statistics}>
                     {text.statistics}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/jobtypes">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/jobtypes">
                     {text.administrateJobsAndJobTypes}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/paymenttypes">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/paymenttypes">
                     {text.administratePaymenttypes}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/users">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/users">
                     {text.administrateUsers}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/bonuses">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/bonuses">
                     {text.administrateBonuses}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminBonusCreate.js b/ukelonn.web.frontend/src/main/frontend/components/AdminBonusCreate.js
index 8314a86e..7017ff72 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminBonusCreate.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminBonusCreate.js
@@ -53,7 +53,7 @@ export default function AdminBonusCreate() {
                             </div>
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="iconurl" className="col-form-label col-5">{text.iconURL}</label>
                         <div className="col-7">
                             <input
@@ -64,7 +64,7 @@ export default function AdminBonusCreate() {
                                 onChange={e => dispatch(MODIFY_BONUS_ICONURL(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="title" className="col-form-label col-5">{text.title}</label>
                         <div className="col-7">
                             <input
@@ -75,7 +75,7 @@ export default function AdminBonusCreate() {
                                 onChange={e => dispatch(MODIFY_BONUS_TITLE(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="description" className="col-form-label col-5">{text.description}</label>
                         <div className="col-7">
                             <input
@@ -86,7 +86,7 @@ export default function AdminBonusCreate() {
                                 onChange={e => dispatch(MODIFY_BONUS_DESCRIPTION(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="bonusfactor" className="col-form-label col-5">{text.bonusFactor}</label>
                         <div className="col-7">
                             <input
@@ -98,7 +98,7 @@ export default function AdminBonusCreate() {
                                 onChange={e => dispatch(MODIFY_BONUS_FACTOR(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="startdate" className="col-form-label col-5">{text.startDate}</label>
                         <div className="col-7">
                             <input
@@ -110,7 +110,7 @@ export default function AdminBonusCreate() {
                             />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="enddate" className="col-form-label col-5">{text.endDate}</label>
                         <div className="col-7">
                             <input
@@ -122,7 +122,7 @@ export default function AdminBonusCreate() {
                             />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminBonusDelete.js b/ukelonn.web.frontend/src/main/frontend/components/AdminBonusDelete.js
index fbff3af9..1976d156 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminBonusDelete.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminBonusDelete.js
@@ -30,7 +30,7 @@ export default function AdminBonusesDelete() {
 
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="bonus" className="col-form-label col-5">{text.chooseBonus}</label>
                         <div className="col-7">
                             <select id="bonus" className="form-control" value={bonusId} onChange={e => dispatch(SELECT_BONUS(parseInt(e.target.value)))}>
@@ -39,19 +39,19 @@ export default function AdminBonusesDelete() {
                             </select>
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="title" className="col-form-label col-5">{text.title}</label>
                         <div className="col-7">
                             <input readOnly id="title" className="form-control" type="text" value={bonusTitle} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="description" className="col-form-label col-5">{text.description}</label>
                         <div className="col-7">
                             <input readOnly id="description" className="form-control" type="text" value={bonusDescription} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminBonusModify.js b/ukelonn.web.frontend/src/main/frontend/components/AdminBonusModify.js
index 77828e69..54a31583 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminBonusModify.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminBonusModify.js
@@ -41,7 +41,7 @@ export default function AdminBonusesModify() {
             </nav>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="bonus" className="col-form-label col-5">{text.chooseBonus}</label>
                         <div className="col-7">
                             <select id="bonus" className="form-control" value={bonusId} onChange={e => dispatch(SELECT_BONUS(parseInt(e.target.value)))}>
@@ -63,7 +63,7 @@ export default function AdminBonusesModify() {
                             </div>
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="iconurl" className="col-form-label col-5">{text.iconURL}</label>
                         <div className="col-7">
                             <input
@@ -74,7 +74,7 @@ export default function AdminBonusesModify() {
                                 onChange={e => dispatch(MODIFY_BONUS_ICONURL(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="title" className="col-form-label col-5">{text.title}</label>
                         <div className="col-7">
                             <input
@@ -85,7 +85,7 @@ export default function AdminBonusesModify() {
                                 onChange={e => dispatch(MODIFY_BONUS_TITLE(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="description" className="col-form-label col-5">{text.description}</label>
                         <div className="col-7">
                             <input
@@ -96,7 +96,7 @@ export default function AdminBonusesModify() {
                                 onChange={e => dispatch(MODIFY_BONUS_DESCRIPTION(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="bonusfactor" className="col-form-label col-5">{text.bonusFactor}</label>
                         <div className="col-7">
                             <input
@@ -108,7 +108,7 @@ export default function AdminBonusesModify() {
                                 onChange={e => dispatch(MODIFY_BONUS_FACTOR(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="startdate" className="col-form-label col-5">{text.startDate}</label>
                         <div className="col-7">
                             <input
@@ -120,7 +120,7 @@ export default function AdminBonusesModify() {
                             />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="enddate" className="col-form-label col-5">{text.endDate}</label>
                         <div className="col-7">
                             <input
@@ -132,7 +132,7 @@ export default function AdminBonusesModify() {
                             />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminBonuses.js b/ukelonn.web.frontend/src/main/frontend/components/AdminBonuses.js
index eec6f67e..e11f59c9 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminBonuses.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminBonuses.js
@@ -19,17 +19,17 @@ export default function AdminBonuses() {
                 <Locale />
             </nav>
             <div>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/bonuses/modify">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/bonuses/modify">
                     {text.modifyBonuses}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/bonuses/create">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/bonuses/create">
                     {text.createNewBonus}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/bonuses/delete">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/bonuses/delete">
                     {text.deleteBonuses}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminJobsDelete.js b/ukelonn.web.frontend/src/main/frontend/components/AdminJobsDelete.js
index dc52ac36..3baedecc 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminJobsDelete.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminJobsDelete.js
@@ -32,7 +32,7 @@ export default function AdminJobsDelete() {
                 <em>{text.doNot}</em> {text.deleteJobsThatAreToBePaidFor}</p>
 
             <div className="container">
-                <div className="form-group row">
+                <div className="form-group row mb-2">
                     <label htmlFor="account-selector" className="col-form-label col-5">{text.chooseAccount}:</label>
                     <div className="col-7">
                         <Accounts id="account-selector" />
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminJobsEdit.js b/ukelonn.web.frontend/src/main/frontend/components/AdminJobsEdit.js
index bf0c1dc5..5434035d 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminJobsEdit.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminJobsEdit.js
@@ -33,7 +33,7 @@ export default function AdminJobsEdit() {
 
 
             <div className="container">
-                <div className="form-group row">
+                <div className="form-group row mb-2">
                     <label htmlFor="account-selector" className="col-form-label col-5">{text.chooseAccount}:</label>
                     <div className="col-7">
                         <Accounts id="account-selector" className="form-control" />
@@ -63,19 +63,19 @@ export default function AdminJobsEdit() {
             </div>
             <h2>Endre jobb</h2>
             <div className="container">
-                <div className="form-group row">
+                <div className="form-group row mb-2">
                     <label htmlFor="jobtype" className="col-form-label col-5">{text.jobType}</label>
                     <div className="col-7">
                         <Jobtypes id="jobtype" />
                     </div>
                 </div>
-                <div className="form-group row">
+                <div className="form-group row mb-2">
                     <label htmlFor="amount" className="col-form-label col-5">{text.amount}</label>
                     <div className="col-7">
                         <input id="amount" type="text" value={transactionAmount} readOnly={true} />
                     </div>
                 </div>
-                <div className="form-group row">
+                <div className="form-group row mb-2">
                     <label htmlFor="date" className="col-form-label col-5">{text.date}</label>
                     <div className="col-7">
                         <input
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypes.js b/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypes.js
index bc08332a..548eeca7 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypes.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypes.js
@@ -19,22 +19,22 @@ export default function AdminJobtypes() {
                 <Locale />
             </nav>
             <div className="container">
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/jobtypes/modify">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/jobtypes/modify">
                     {text.modifyJobTypes}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/jobtypes/create">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/jobtypes/create">
                     {text.createNewJobType}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/jobs/delete">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/jobs/delete">
                     {text.deleteJobs}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/jobs/edit">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/jobs/edit">
                     {text.modifyJobs}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesCreate.js b/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesCreate.js
index 17fa00a7..90d3b79d 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesCreate.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesCreate.js
@@ -29,7 +29,7 @@ export default function AdminJobtypesCreate() {
             </nav>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-form-label col-5">{text.nameOfJobType}</label>
                         <div className="col-7">
                             <input
@@ -40,7 +40,7 @@ export default function AdminJobtypesCreate() {
                                 onChange={e => dispatch(MODIFY_TRANSACTION_TYPE_NAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-form-label col-5">{text.amountForJobType}</label>
                         <div className="col-7">
                             <input
@@ -51,7 +51,7 @@ export default function AdminJobtypesCreate() {
                                 onChange={e => dispatch(MODIFY_JOB_AMOUNT(parseInt(e.target.value)))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesModify.js b/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesModify.js
index c999c569..f116eb51 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesModify.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminJobtypesModify.js
@@ -30,13 +30,13 @@ export default function AdminJobtypesModify() {
             </nav>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="jobtype" className="col-form-label col-5">{text.chooseJobType}</label>
                         <div className="col-7">
                             <JobtypesBox id="jobtype" className="form-control" />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-form-label col-5">{text.modifyNameOfJobType}</label>
                         <div className="col-7">
                             <input
@@ -47,7 +47,7 @@ export default function AdminJobtypesModify() {
                                 onChange={e => dispatch(MODIFY_TRANSACTION_TYPE_NAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-form-label col-5">{text.modifyAmountOfJobType}</label>
                         <div className="col-7">
                             <input
@@ -58,7 +58,7 @@ export default function AdminJobtypesModify() {
                                 onChange={e => dispatch(MODIFY_JOB_AMOUNT(parseInt(e.target.value)))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypes.js b/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypes.js
index 0b4f99fd..c4c2db54 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypes.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypes.js
@@ -19,12 +19,12 @@ export default function AdminPaymenttypes() {
                 <Locale />
             </nav>
             <div className="container">
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/paymenttypes/modify">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/paymenttypes/modify">
                     {text.modifyPaymenttypes}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/paymenttypes/create">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/paymenttypes/create">
                     {text.createPaymenttype}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesCreate.js b/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesCreate.js
index df085be3..fdaae942 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesCreate.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesCreate.js
@@ -29,7 +29,7 @@ export default function AdminPaymenttypesCreate() {
             </nav>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-5">{text.paymentTypeName}</label>
                         <div className="col-7">
                             <input
@@ -39,7 +39,7 @@ export default function AdminPaymenttypesCreate() {
                                 onChange={e => dispatch(MODIFY_TRANSACTION_TYPE_NAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-5">{text.paymentTypeAmount}</label>
                         <div className="col-7">
                             <input
@@ -49,7 +49,7 @@ export default function AdminPaymenttypesCreate() {
                                 onChange={e => dispatch(MODIFY_JOB_AMOUNT(parseInt(e.target.value)))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesModify.js b/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesModify.js
index 1f773aef..c671a7e1 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesModify.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminPaymenttypesModify.js
@@ -31,13 +31,13 @@ export default function AdminPaymenttypesModify() {
             <br/>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="paymenttype" className="col-form-label col-5">{text.choosePaymentType}</label>
                         <div className="col-7">
                             <PaymenttypesBox id="paymenttype" className="form-control" />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-form-label col-5">{text.modifyPaymentTypeName}</label>
                         <div className="col-7">
                             <input
@@ -48,7 +48,7 @@ export default function AdminPaymenttypesModify() {
                                 onChange={e => dispatch(MODIFY_TRANSACTION_TYPE_NAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="amount" className="col-form-label col-5">{text.modifyPaymentTypeAmount}</label>
                         <div className="col-7">
                             <input
@@ -59,7 +59,7 @@ export default function AdminPaymenttypesModify() {
                                 onChange={e => dispatch(MODIFY_PAYMENT_AMOUNT(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminUsers.js b/ukelonn.web.frontend/src/main/frontend/components/AdminUsers.js
index 4ee00163..423237b7 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminUsers.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminUsers.js
@@ -19,17 +19,17 @@ export default function AdminUsers() {
                 <Locale />
             </nav>
             <div className="container">
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/users/modify">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/users/modify">
                     {text.modifyUsers}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/users/password">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/users/password">
                     {text.changeUsersPassword}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to="/ukelonn/admin/users/create">
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to="/ukelonn/admin/users/create">
                     {text.addUser}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminUsersChangePassword.js b/ukelonn.web.frontend/src/main/frontend/components/AdminUsersChangePassword.js
index 59afb40e..223d107d 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminUsersChangePassword.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminUsersChangePassword.js
@@ -31,13 +31,13 @@ export default function AdminUsersChangePassword() {
             </nav>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="users" className="col-form-label col-5">{text.chooseUser}</label>
                         <div className="col-7">
                             <Users id="users" className="form-control" />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="password1" className="col-form-label col-5">{text.password}:</label>
                         <div className="col-7">
                             <input
@@ -48,7 +48,7 @@ export default function AdminUsersChangePassword() {
                                 onChange={e => dispatch(MODIFY_PASSWORD1(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="password2" className="col-form-label col-5">{text.repeatPassword}:</label>
                         <div className="col-7">
                             <input
@@ -60,7 +60,7 @@ export default function AdminUsersChangePassword() {
                             { passwordsNotIdentical && <span className="invalid-feedback d-block">{text.passwordsAreNotIdentical}</span> }
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminUsersCreate.js b/ukelonn.web.frontend/src/main/frontend/components/AdminUsersCreate.js
index d20cae0a..0e908689 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminUsersCreate.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminUsersCreate.js
@@ -48,7 +48,7 @@ export default function AdminUsersCreate() {
             </nav>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="username" className="col-form-label col-5">{text.username}</label>
                         <div className="col-7">
                             <input
@@ -61,7 +61,7 @@ export default function AdminUsersCreate() {
                             { usernameExists && <span className="invalid-feedback d-block">{text.usernameExists}</span> }
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="email" className="col-form-label col-5">{text.emailAddress}</label>
                         <div className="col-7">
                             <input
@@ -73,7 +73,7 @@ export default function AdminUsersCreate() {
                             { userEmail && !isEmail(userEmail) && <span className="invalid-feedback d-block">{text.notAValidEmailAddress}</span> }
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="firstname" className="col-form-label col-5">{text.firstName}</label>
                         <div className="col-7">
                             <input
@@ -84,7 +84,7 @@ export default function AdminUsersCreate() {
                                 onChange={e => dispatch(MODIFY_USER_FIRSTNAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="lastname" className="col-form-label col-5">{text.lastName}</label>
                         <div className="col-7">
                             <input
@@ -95,7 +95,7 @@ export default function AdminUsersCreate() {
                                 onChange={e => dispatch(MODIFY_USER_LASTNAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="password1" className="col-form-label col-5">{text.password}:</label>
                         <div className="col-7">
                             <input
@@ -106,7 +106,7 @@ export default function AdminUsersCreate() {
                                 onChange={e => dispatch(MODIFY_PASSWORD1(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="password2" className="col-form-label col-5">{text.repeatPassword}:</label>
                         <div className="col-7">
                             <input
@@ -131,7 +131,7 @@ export default function AdminUsersCreate() {
                             </div>
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/AdminUsersModify.js b/ukelonn.web.frontend/src/main/frontend/components/AdminUsersModify.js
index 68f9bec6..2d6dd1cd 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/AdminUsersModify.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/AdminUsersModify.js
@@ -35,13 +35,13 @@ export default function AdminUsersModify() {
             </nav>
             <form onSubmit={ e => { e.preventDefault(); }}>
                 <div className="container">
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="users" className="col-form-label col-5">{text.chooseUser}</label>
                         <div className="col-7">
                             <Users id="users" className="form-control" />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="username" className="col-form-label col-5">{text.username}</label>
                         <div className="col-7">
                             <input
@@ -52,7 +52,7 @@ export default function AdminUsersModify() {
                                 onChange={e => dispatch(MODIFY_USER_USERNAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="email" className="col-form-label col-5">{text.emailAddress}</label>
                         <div className="col-7">
                             <input
@@ -63,7 +63,7 @@ export default function AdminUsersModify() {
                                 onChange={e => dispatch(MODIFY_USER_EMAIL(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="firstname" className="col-form-label col-5">{text.firstName}</label>
                         <div className="col-7">
                             <input
@@ -74,7 +74,7 @@ export default function AdminUsersModify() {
                                 onChange={e => dispatch(MODIFY_USER_FIRSTNAME(e.target.value))} />
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <label htmlFor="lastname" className="col-form-label col-5">{text.lastName}</label>
                         <div className="col-7">
                             <input
@@ -98,7 +98,7 @@ export default function AdminUsersModify() {
                             </div>
                         </div>
                     </div>
-                    <div className="form-group row">
+                    <div className="form-group row mb-2">
                         <div className="col-5"/>
                         <div className="col-7">
                             <button
diff --git a/ukelonn.web.frontend/src/main/frontend/components/Statistics.js b/ukelonn.web.frontend/src/main/frontend/components/Statistics.js
index b714db79..c5093e06 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/Statistics.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/Statistics.js
@@ -25,12 +25,12 @@ export default function Statistics(props) {
                 <Locale />
             </nav>
             <div className="container">
-                <Link className="btn btn-block btn-primary right-align-cell" to={sumoveryear}>
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to={sumoveryear}>
                     {text.sumEarnedPerYear}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                 </Link>
-                <Link className="btn btn-block btn-primary right-align-cell" to={sumovermonth}>
+                <Link className="btn btn-block btn-primary right-align-cell mb-2" to={sumovermonth}>
                     {text.sumEarnedPerMonth}
                     &nbsp;
                     <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
diff --git a/ukelonn.web.frontend/src/main/frontend/components/User.js b/ukelonn.web.frontend/src/main/frontend/components/User.js
index 9533db83..63a696cc 100644
--- a/ukelonn.web.frontend/src/main/frontend/components/User.js
+++ b/ukelonn.web.frontend/src/main/frontend/components/User.js
@@ -53,19 +53,19 @@ export default function User() {
                 </div>
                 <form onSubmit={ e => { e.preventDefault(); }}>
                     <div className="container">
-                        <div className="form-group row">
+                        <div className="form-group row mb-2">
                             <label htmlFor="jobtype" className="col-form-label col-5">{text.chooseJob}</label>
                             <div className="col-7">
                                 <Jobtypes id="jobtype" className="form-control" />
                             </div>
                         </div>
-                        <div className="form-group row">
+                        <div className="form-group row mb-2">
                             <label htmlFor="amount" className="col-form-label col-5">{text.amount}</label>
                             <div className="col-7">
                                 <input id="amount" className="form-control" type="text" value={transactionAmount} readOnly={true} />
                             </div>
                         </div>
-                        <div className="form-group row">
+                        <div className="form-group row mb-2">
                             <label htmlFor="date" className="col-form-label col-5">{text.date}</label>
                             <div className="col-7">
                                 <input
@@ -77,7 +77,7 @@ export default function User() {
                                 />
                             </div>
                         </div>
-                        <div className="form-group row">
+                        <div className="form-group row mb-2">
                             <div className="col-5"/>
                             <div className="col-7">
                                 <button
@@ -90,17 +90,17 @@ export default function User() {
                     </div>
                 </form>
                 <div className="container">
-                    <Link className="btn btn-block btn-primary right-align-cell" to={performedjobs}>
+                    <Link className="btn btn-block btn-primary right-align-cell mb-2" to={performedjobs}>
                         {text.performedJobs}
                         &nbsp;
                         <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                     </Link>
-                    <Link className="btn btn-block btn-primary right-align-cell" to={performedpayments}>
+                    <Link className="btn btn-block btn-primary right-align-cell mb-2" to={performedpayments}>
                         {text.performedPayments}
                         &nbsp;
                         <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
                     </Link>
-                    <Link className="btn btn-block btn-primary right-align-cell" to={statistics}>
+                    <Link className="btn btn-block btn-primary right-align-cell mb-2" to={statistics}>
                         {text.statistics}
                         &nbsp;
                         <span className="oi oi-chevron-right" title="chevron right" aria-hidden="true"></span>
diff --git a/ukelonn.web.frontend/src/main/resources/index.html b/ukelonn.web.frontend/src/main/resources/index.html
index 6b2efad6..05c31149 100644
--- a/ukelonn.web.frontend/src/main/resources/index.html
+++ b/ukelonn.web.frontend/src/main/resources/index.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <!-- Bootstrap CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 
         <!-- open-iconic icons for bootstrap -->
         <link href="/ukelonn/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet">
@@ -19,8 +19,6 @@
         <noscript>This webpage requires javascript in the browser!</noscript>
 
         <!-- Optional JavaScript -->
-        <!-- jQuery and Bootstrap Bundle (includes Popper) -->
-        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     </body>
 </html>