diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index 7d0760d1672822ad5b74f116bb8a39b451b61a39..fe0810c4979b20301da7ace915093de48479ecef 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -164,7 +164,8 @@ settings.backupReminder=Backup-Erinnerung
settings.backupReminder.deactivated=Aus
settings.backupReminder.activated=An
settings.language=Sprache
-settings.updates=Automatische Updatesuche
+settings.updates=Updates
+settings.updates.automatic=Automatische Updatesuche
settings.updates.automatic.deactivated=Aus
settings.updates.automatic.activated=An
settings.updates.search=Suchen
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index a0c4d4b05d08b2e2cfee2d807d9b955f8a0dc8aa..8d69f84522fa6ed4e743d55ccef0b4ecd6bf7eeb 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -164,7 +164,8 @@ settings.backupReminder=Backup reminder
settings.backupReminder.deactivated=Off
settings.backupReminder.activated=On
settings.language=Language
-settings.updates=Automatic Update Search
+settings.updates=Updates
+settings.updates.automatic=Automatic Update Search
settings.updates.automatic.deactivated=Off
settings.updates.automatic.activated=On
settings.updates.search=Search
diff --git a/src/main/resources/static/css/dark/settings.css b/src/main/resources/static/css/dark/settings.css
new file mode 100644
index 0000000000000000000000000000000000000000..40077499bafbb3fd4d092369ec6ffb22c422aeb6
--- /dev/null
+++ b/src/main/resources/static/css/dark/settings.css
@@ -0,0 +1,22 @@
+.table-container {
+ display: table;
+ margin: auto;
+}
+
+.table-cell {
+ display: table-cell
+}
+
+.table-cell-valign {
+ vertical-align: middle;
+}
+
+.table-cell-spacer {
+ width: 3em;
+}
+
+.switch-cell-margin {
+ height: 1.5em;
+ margin-top: 2em;
+ margin-bottom: 2em;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/settings/settings.ftl b/src/main/resources/templates/settings/settings.ftl
index 588a0a9ca87b6052a7f3f74286cda6a18e034af6..57723e86686a4ed3568a5f75dc37614c9e9beb6a 100644
--- a/src/main/resources/templates/settings/settings.ftl
+++ b/src/main/resources/templates/settings/settings.ftl
@@ -2,6 +2,7 @@
<head>
<#import "../helpers/header.ftl" as header>
<@header.header "BudgetMaster"/>
+ <@header.style "settings"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
@@ -67,43 +68,6 @@
</div>
</div>
- <#-- updates -->
- <div class="row">
- <div class="col s12 m12 l8 offset-l2">
- ${locale.getString("settings.updates")}
- </div>
- </div>
-
- <div class="row">
- <div class="col s12 m12 l8 offset-l2">
- <table class="no-border-table">
- <tr>
- <td rowspan="2">
- <div class="switch">
- <label>
- ${locale.getString("settings.updates.automatic.deactivated")}
- <input type="checkbox" name="autoUpdateCheckEnabled" <#if settings.isAutoUpdateCheckEnabled()>checked</#if>>
- <span class="lever"></span>
- ${locale.getString("settings.updates.automatic.activated")}
- </label>
- </div>
- </td>
- <td>${locale.getString("settings.updates.current.version")}</td>
- <td>v${build.getVersionName()}</td>
- </tr>
- <tr>
- <td>${locale.getString("settings.updates.latest.version")}</td>
- <td>${helpers.getAvailableVersionString()}</td>
- </tr>
- <tr>
- <td colspan="4" class="center-align">
- <a href="<@s.url '/updateSearch'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">refresh</i>${locale.getString("settings.updates.search")}</a>
- </td>
- </tr>
- </table>
- </div>
- </div>
-
<#-- search items per page -->
<div class="row">
<div class="input-field col s12 m12 l8 offset-l2">
@@ -133,6 +97,37 @@
</form>
</div>
+ <hr>
+
+ <#-- updates -->
+ <div class="container">
+ <div class="section center-align">
+ <div class="headline">${locale.getString("settings.updates")}</div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col s12 m12 l8 offset-l2 center-align">
+ <div class="table-container">
+ <div class="table-cell">
+ <div class="right-align" style="margin-bottom: 1em;">${locale.getString("settings.updates.current.version")}</div>
+ <div class="right-align">${locale.getString("settings.updates.latest.version")}</div>
+ </div>
+
+ <div class="table-cell table-cell-spacer"></div>
+
+ <div class="table-cell">
+ <div class="left-align" style="margin-bottom: 1em; margin-right: 5em">v${build.getVersionName()}</div>
+ <div class="left-align">${helpers.getAvailableVersionString()}</div>
+ </div>
+
+ <div class="table-cell table-cell-valign">
+ <a href="<@s.url '/updateSearch'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">refresh</i>${locale.getString("settings.updates.search")}</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
<hr>
<#-- database -->
<div class="container">
diff --git a/src/main/resources/templates/settings/settingsMacros.ftl b/src/main/resources/templates/settings/settingsMacros.ftl
index 816778c61648fe4e372739e2419fa80e002a4c4b..de6aaa0871f863249f2b9476a32b6939b34d8ce1 100644
--- a/src/main/resources/templates/settings/settingsMacros.ftl
+++ b/src/main/resources/templates/settings/settingsMacros.ftl
@@ -2,21 +2,28 @@
<#macro switches settings>
<div class="row">
- <div class="col s12 l2 offset-l3 center-align settings-switch">
- <@switch "rest" "restActivated" settings.isRestActivated()/>
- </div>
- <div class="col s12 l2 center-align settings-switch">
- <@switch "darkTheme" "useDarkTheme" settings.isUseDarkTheme()/>
- </div>
- <div class="col s12 l2 center-align settings-switch">
- <@switch "backupReminder" "backupReminderActivated" settings.getBackupReminderActivated()/>
+ <div class="col s12">
+ <div class="table-container">
+ <div class="table-cell">
+ <div class="switch-cell-margin">${locale.getString("settings.rest")}</div>
+ <div class="switch-cell-margin">${locale.getString("settings.darkTheme")}</div>
+ <div class="switch-cell-margin">${locale.getString("settings.backupReminder")}</div>
+ <div class="switch-cell-margin">${locale.getString("settings.updates.automatic")}</div>
+ </div>
+ <div class="table-cell table-cell-spacer"></div>
+ <div class="table-cell">
+ <@switch "rest" "restActivated" settings.isRestActivated()/>
+ <@switch "darkTheme" "useDarkTheme" settings.isUseDarkTheme()/>
+ <@switch "backupReminder" "backupReminderActivated" settings.getBackupReminderActivated()/>
+ <@switch "updates.automatic" "autoUpdateCheckEnabled" settings.isAutoUpdateCheckEnabled()/>
+ </div>
+ </div>
</div>
</div>
</#macro>
<#macro switch localizationKey name isActive>
- ${locale.getString("settings.${localizationKey}")}
- <div class="switch">
+ <div class="switch switch-cell-margin">
<label>
${locale.getString("settings.${localizationKey}.deactivated")}
<input type="checkbox" name="${name}" <#if isActive>checked</#if>/>