Improved the (User|Admin) Settings screens

2026-07-13 03:27:39 +03:00 · 2021-11-07 21:19:48 +01:00 · 2021-11-07 21:19:48 +01:00 · 5b0dd471bc
commit 5b0dd471bc
parent 6170de5aee
37 changed files with 948 additions and 1009 deletions
--- a/dev/Knoin/AbstractViews.js
+++ b/dev/Knoin/AbstractViews.js
@ -2,7 +2,7 @@ import ko from 'ko';

 import { inFocus, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils';
 import { Scope } from 'Common/Enums';
-import { keyScope, Settings } from 'Common/Globals';
+import { keyScope, Settings, leftPanelDisabled } from 'Common/Globals';
 import { ViewType } from 'Knoin/Knoin';

 class AbstractView {
@ -102,6 +102,7 @@ export class AbstractViewLeft extends AbstractView
 	constructor(templateID)
 	{
 		super(templateID, ViewType.Left);
+		this.leftPanelDisabled = leftPanelDisabled;
 	}
 }

--- a/dev/Screen/AbstractSettings.js
+++ b/dev/Screen/AbstractSettings.js
@ -2,7 +2,7 @@ import ko from 'ko';

 import { pString } from 'Common/Utils';
 import { settings } from 'Common/Links';
-import { doc, elementById } from 'Common/Globals';
+import { elementById } from 'Common/Globals';

 import { AbstractScreen } from 'Knoin/AbstractScreen';

@ -33,11 +33,12 @@ export class AbstractSettingsScreen extends AbstractScreen {
 			} else {
 				const vmPlace = elementById('rl-settings-subscreen');
 				if (vmPlace) {
-					settingsScreen = new RoutedSettingsViewModel();
-
-					viewModelDom = Element.fromHTML('<div hidden=""></div>');
+					viewModelDom = Element.fromHTML('<div id="V-Settings-'
+						+ (RoutedSettingsViewModel.name.replace(/(User|Admin)Settings/,''))
+						+ '" class="g-ui-user-select-none" hidden=""></div>');
 					vmPlace.append(viewModelDom);

+					settingsScreen = new RoutedSettingsViewModel();
 					settingsScreen.viewModelDom = viewModelDom;

 					RoutedSettingsViewModel.__dom = viewModelDom;
@ -78,7 +79,7 @@ export class AbstractSettingsScreen extends AbstractScreen {
 						);
 					});

-					doc.querySelector('#rl-content .b-settings .b-content').scrollTop = 0;
+					elementById('rl-settings-subscreen').scrollTop = 0;
 					// --
 				}, 1);
 			}
--- a/dev/Styles/Admin/About.less
+++ b/dev/Styles/Admin/About.less
@ -1,5 +1,5 @@

-.b-admin-about {
+#V-Settings-About {
 	.rl-logo {
 		display: inline-block;
 		width: 250px;
--- a/dev/Styles/Admin/Branding.less
+++ b/dev/Styles/Admin/Branding.less
@ -1,4 +1,4 @@

-.b-admin-branding {
+#V-Settings-Branding {

 }
--- a/dev/Styles/Admin/General.less
+++ b/dev/Styles/Admin/General.less
@ -1,5 +1,4 @@

-.b-admin-general {
+#V-Settings-General {

 }
-
--- a/dev/Styles/Admin/Layout.less
+++ b/dev/Styles/Admin/Layout.less
@ -49,7 +49,8 @@
 	left: @rlLeftWidth;
 }

-.b-admin-right {
+#V-AdminPane {
+	height: 100%;

 	.b-toolbar {
 		position: absolute;
@ -67,23 +68,6 @@
 			flex-grow: 1;
 		}
 	}
-
-	.b-content {
-		position: absolute;
-		top: 50px + @rlLowMargin;
-		bottom: @rlLowMargin;
-		left: 0;
-		right: @rlLowMargin;
-		overflow-y: auto;
-		z-index: 2;
-
-		background-color: #fff;
-		border: 1px solid @rlMainDarkColor;
-
-		box-shadow: @rlMainShadow;
-		border-radius: @rlMainBorderRadius;
-	}
-
 }

 .btn.btn-logout {
@ -92,7 +76,18 @@
 }

 #rl-settings-subscreen {
+	margin: (50px + @rlLowMargin) @rlLowMargin @rlLowMargin 0;
+	overflow-y: auto;
 	padding: 20px;
+
+	box-sizing: border-box;
+	height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
+
+	background-color: #fff;
+	border: 1px solid @rlMainDarkColor;
+
+	box-shadow: @rlMainShadow;
+	border-radius: @rlMainBorderRadius;
 }

 /* desktop */
--- a/dev/Styles/Admin/Packages.less
+++ b/dev/Styles/Admin/Packages.less
@ -1,5 +1,5 @@

-.b-admin-packages {
+#V-Settings-Packages {

 	.alert {
 		width: 650px;
--- a/dev/Styles/User/Layout.less
+++ b/dev/Styles/User/Layout.less
@ -153,10 +153,6 @@ html.rl-side-preview-pane {
 	}
 }

-#rl-settings-subscreen {
-	padding:20px;
-}
-
 .dropdown-menu {
 	max-height: 60vh;
 	max-width: 90vw;
--- a/dev/Styles/User/Settings.less
+++ b/dev/Styles/User/Settings.less
@ -1,5 +1,5 @@

-.b-settins-left {
+#V-SettingsMenu {

 	.b-footer {
 		position: absolute;
@ -46,9 +46,10 @@
 	}
 }

-.b-settins-right {
+#V-SettingsPane {
+	height: 100%;

-	.b-toolbar {
+	.btn-toolbar {
 		position: absolute;
 		top: 0;
 		right: 0;
@ -58,33 +59,32 @@
 		color: #fff;
 	}

-	.b-content {
-		position: absolute;
-		top: 50px;
-		bottom: @rlLowMargin;
-		left: 0;
-		right: @rlLowMargin;
-		overflow-y: auto;
-		z-index: 2;
-		scroll-behavior: smooth;
-
-		background-color: #fff;
-		border: 1px solid @rlMainDarkColor;
-		box-shadow: @rlMainShadow;
-		border-radius: @rlMainBorderRadius;
-	}
-
 	td {
 		padding: 4px 8px;
 		line-height: 30px;
 	}
 }

+#rl-settings-subscreen {
+	margin: 50px @rlLowMargin @rlLowMargin 0;
+	overflow-y: auto;
+	scroll-behavior: smooth;
+	padding:20px;
+
+	box-sizing: border-box;
+	height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
+
+	background-color: #fff;
+	border: 1px solid @rlMainDarkColor;
+	box-shadow: @rlMainShadow;
+	border-radius: @rlMainBorderRadius;
+}
+
 html.rl-mobile #rl-settings-subscreen > * {
 	margin-right: 15px;
 }

-.firefox-drag .b-settins-right .b-content,
+.firefox-drag #rl-settings-subscreen,
 .firefox-drag .modal-body {
 	overflow: hidden;
 }
--- a/dev/Styles/User/SettingsAccounts.less
+++ b/dev/Styles/User/SettingsAccounts.less
@ -1,5 +1,5 @@

-.b-settings-accounts {
+#V-Settings-Accounts {

 	.account-name {
 		display: inline-block;
--- a/dev/Styles/User/SettingsFilters.less
+++ b/dev/Styles/User/SettingsFilters.less
@ -5,7 +5,7 @@
 }

 #V-PopupsSieveScript .filter-item,
-.b-settings-filters .script-item {
+#V-Settings-Filters .script-item {
 	white-space: nowrap;
 }

--- a/dev/Styles/User/SettingsFolders.less
+++ b/dev/Styles/User/SettingsFolders.less
@ -1,5 +1,5 @@

-.b-settings-folders {
+#V-Settings-Folders {

 	.folders-list-error {
 		margin: 10px 0;
--- a/dev/Styles/User/SettingsGeneral.less
+++ b/dev/Styles/User/SettingsGeneral.less
@ -1,5 +1,5 @@

-.b-settings-general {
+#V-Settings-General {
 	.editMainIdentity {
 		border-bottom: 1px dashed #555;
 		cursor: pointer;
--- a/dev/Styles/User/SettingsOpenPGP.less
+++ b/dev/Styles/User/SettingsOpenPGP.less
@ -1,5 +1,5 @@

-.b-settings-open-pgp {
+V-Settings-OpenPgp {

 	td + td {
 		width: 1%;
--- a/dev/View/Popup/MessageOpenPgp.js
+++ b/dev/View/Popup/MessageOpenPgp.js
@ -113,7 +113,7 @@ class MessageOpenPgpPopupView extends AbstractViewPopup {
 		this.privateKeys(privateKeys);

 		if (this.viewModelDom) {
-			const el = this.viewModelDom.querySelector('.key-list__item');
+			const el = this.querySelector('.key-list__item');
 			el && el.click();
 		}
 	}
--- a/dev/View/User/MailBox/FolderList.js
+++ b/dev/View/User/MailBox/FolderList.js
@ -1,7 +1,7 @@
 import ko from 'ko';

 import { Scope } from 'Common/Enums';
-import { leftPanelDisabled, moveAction } from 'Common/Globals';
+import { moveAction } from 'Common/Globals';
 import { mailBox, settings } from 'Common/Links';
 import { setFolderHash } from 'Common/Cache';
 import { addComputablesTo } from 'Common/Utils';
@ -34,8 +34,6 @@ export class MailFolderList extends AbstractViewLeft {

 		this.foldersListWithSingleInboxRootFolder = ko.observable(false);

-		this.leftPanelDisabled = leftPanelDisabled;
-
 		this.allowContacts = AppUserStore.allowContacts();

 		addComputablesTo(this, {
--- a/dev/View/User/Settings/Menu.js
+++ b/dev/View/User/Settings/Menu.js
@ -1,4 +1,3 @@
-import { leftPanelDisabled } from 'Common/Globals';
 import { settings, mailbox } from 'Common/Links';
 import { getFolderInboxName } from 'Common/Cache';

@ -11,8 +10,6 @@ export class MenuSettingsUserView extends AbstractViewLeft {
 	constructor(screen) {
 		super('SettingsMenu');

-		this.leftPanelDisabled = leftPanelDisabled;
-
 		this.menu = screen.menu;
 	}

--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
@ -1,11 +1,7 @@
-<div class="b-settings b-admin-right">
-	<div class="b-toolbar g-ui-user-select-none">
+<div class="b-toolbar g-ui-user-select-none">
 	<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
 	<i class="icon-spinner" style="margin: 10px" data-bind="style: {'visibility': adminManLoadingVisibility }"></i>
 	<h4>SnappyMail - <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span></h4>
 	<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
-	</div>
-	<div class="b-content">
-		<div id="rl-settings-subscreen"></div>
-	</div>
 </div>
+<div id="rl-settings-subscreen"></div>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsAbout.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsAbout.html
@ -1,5 +1,4 @@
-<div class="b-admin-about">
-	<div class="form-horizontal">
+<div class="form-horizontal">
 	<div class="legend" data-i18n="TAB_ABOUT/LEGEND_ABOUT"></div>
 	<div class="row" style="min-width: 800px;">
 		<div class="span4">
@ -29,5 +28,4 @@
 			</table>
 		</div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsBranding.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsBranding.html
@ -1,5 +1,4 @@
-<div class="b-admin-branding">
-	<div class="form-horizontal">
+<div class="form-horizontal">
 	<div class="legend" data-i18n="TAB_BRANDING/LEGEND_BRANDING"></div>
 	<div class="control-group">
 		<label class="control-label" data-i18n="TAB_BRANDING/LABEL_PAGE_TITLE"></label>
@ -35,5 +34,4 @@
 			}
 		}"></div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html
@ -1,12 +1,10 @@
-<div class="b-admin-general">
-	<div class="row" data-bind="visible: !contactsSupported">
+<div class="row" data-bind="visible: !contactsSupported">
 	<div class="alert span8" style="margin-top: 10px;">
 		<h4 data-i18n="TAB_CONTACTS/ALERT_NOTICE"></h4>
-			<br />
 		<div data-i18n="[html]TAB_CONTACTS/HTML_ALERT_DOES_NOT_SUPPORTED"></div>
 	</div>
-	</div>
-	<div class="form-horizontal" data-bind="visible: contactsSupported">
+</div>
+<div class="form-horizontal" data-bind="visible: contactsSupported">
 	<div class="legend" data-i18n="TAB_CONTACTS/LEGEND_CONTACTS"></div>
 	<div class="control-group">
 		<div class="controls">
@ -20,8 +18,8 @@
 			}"></div>
 		</div>
 	</div>
-	</div>
-	<div class="form-horizontal" data-bind="visible: contactsSupported">
+</div>
+<div class="form-horizontal" data-bind="visible: contactsSupported">
 	<div class="legend" data-i18n="TAB_CONTACTS/LEGEND_STORAGE"></div>
 	<div class="control-group">
 		<label class="control-label" data-i18n="TAB_CONTACTS/LABEL_STORAGE_TYPE"></label>
@ -81,7 +79,6 @@ host=127.0.0.1;port=5432;dbname=snappymail
 			<div class="controls">
 				<div class="alert">
 					<h4 data-i18n="TAB_CONTACTS/ALERT_NOTICE"></h4>
-						<br />
 					<div data-i18n="[html]TAB_CONTACTS/HTML_ALERT_DO_NOT_USE_THIS_DATABASE"></div>
 				</div>
 			</div>
@ -96,5 +93,4 @@ host=127.0.0.1;port=5432;dbname=snappymail
 		</div>
 	</div>
 	<div class="alert span8" data-bind="text: testContactsErrorMessage, visible: '' !== testContactsErrorMessage()"></div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsDomains.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsDomains.html
@ -1,24 +1,22 @@
-<div class="b-admin-domains g-ui-user-select-none">
-	<div class="legend">
+<div class="legend">
 	<span data-i18n="TAB_DOMAINS/LEGEND_DOMAINS"></span>
 	<i class="icon-spinner" style="margin: 5px" data-bind="visible: domains.loading"></i>
-	</div>
-	<div>
-		<a class="btn" data-bind="click: createDomain">
+</div>
+<a class="btn" data-bind="click: createDomain">
 	<i class="fontastic">✚</i>
 	<span data-i18n="TAB_DOMAINS/BUTTON_ADD_DOMAIN"></span>
-		</a>
-		&nbsp;&nbsp;
-		<a class="btn" data-bind="click: createDomainAlias">
+</a>
+&nbsp;&nbsp;
+<a class="btn" data-bind="click: createDomainAlias">
 	<i class="fontastic">✚</i>
 	<span data-i18n="TAB_DOMAINS/BUTTON_ADD_ALIAS"></span>
-		</a>
-		<br />
-		<br />
-		<blockquote>
+</a>
+<br />
+<br />
+<blockquote>
 	<p class="muted" data-i18n="[html]TAB_DOMAINS/HTML_DOMAINS_HELPER"></p>
-		</blockquote>
-		<table class="table table-hover b-admin-domains-list-table" data-bind="i18nUpdate: domains">
+</blockquote>
+<table class="table table-hover b-admin-domains-list-table" data-bind="i18nUpdate: domains">
 	<colgroup>
 		<col />
 		<col style="width: 140px" />
@ -41,6 +39,4 @@
 			<td class="disabled-domain fontastic" data-bind="click: function (oDomain) { $root.disableDomain(oDomain); }, text: disabled() ? '☐' : '☑'"></td>
 		</tr>
 	</tbody>
-		</table>
-	</div>
-</div>
+</table>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html
@ -1,12 +1,11 @@
-<div class="b-admin-general">
-	<div class="row" data-bind="visible: weakPassword">
+<div class="row" data-bind="visible: weakPassword">
 	<div class="alert alert-warning span8" style="margin-top: 10px;">
 		<h4 data-i18n="TAB_GENERAL/ALERT_WARNING"></h4>
 		<br />
 		<div data-i18n="[html]TAB_GENERAL/HTML_ALERT_WEAK_PASSWORD"></div>
 	</div>
-	</div>
-	<div class="row" data-bind="visible: dataFolderAccess">
+</div>
+<div class="row" data-bind="visible: dataFolderAccess">
 	<div class="alert alert-error span8" style="margin-top: 10px;">
 		<h4 data-i18n="TAB_GENERAL/ALERT_WARNING"></h4>
 		<br />
@ -15,8 +14,8 @@
 		<a href="https://www.rainloop.net/docs/installation/#notice"
 			target="_blank"><strong>https://www.rainloop.net/docs/installation</strong></a>
 	</div>
-	</div>
-	<div class="form-horizontal">
+</div>
+<div class="form-horizontal">
 	<div class="legend" data-i18n="TAB_GENERAL/LEGEND_INTERFACE"></div>
 	<div class="control-group" style="margin-bottom: 10px;">
 		<label class="control-label" data-i18n="TAB_GENERAL/LABEL_LANGUAGE"></label>
@ -128,5 +127,4 @@
 			}"></div>
 		</div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsLogin.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsLogin.html
@ -1,5 +1,4 @@
-<div class="b-admin-general">
-	<div class="form-horizontal">
+<div class="form-horizontal">
 	<div class="legend" data-i18n="TAB_LOGIN/LEGEND_LOGIN_SCREEN"></div>
 	<div class="control-group">
 		<label class="control-label" data-i18n="TAB_LOGIN/LABEL_DEFAULT_DOMAIN"></label>
@ -34,5 +33,4 @@
 			}"></div>
 		</div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsPackages.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsPackages.html
@ -1,46 +1,42 @@
-<div class="b-admin-packages">
-
-	<div class="legend">
+<div class="legend">
 	<span data-i18n="TABS_LABELS/LABEL_PACKAGES_NAME"></span>
 	<i class="icon-spinner" style="margin: 5px" data-bind="visible: packages.loading"></i>
-	</div>
+</div>

-	<div class="alert" style="margin-top: 10px;" data-bind="visible: !packages.real() && !packages.loading()">
+<div class="alert" style="margin-top: 10px;" data-bind="visible: !packages.real() && !packages.loading()">
 	<div data-i18n="TAB_PACKAGES/ALERT_CANNOT_ACCESS_REPOSITORY"></div>
 	<!-- ko text: packages.error() --><!-- /ko -->
-	</div>
+</div>

-	<div class="alert" style="margin-top: 10px;" data-bind="visible: '' !== packagesError()">
+<div class="alert" style="margin-top: 10px;" data-bind="visible: '' !== packagesError()">
 	<button type="button" class="close" data-bind="click: function () { packagesError('') }">×</button>
 	<span data-bind="text: packagesError"></span>
-	</div>
+</div>

-	<div data-bind="component: {
+<div data-bind="component: {
 	name: 'Checkbox',
 	params: { value: enabledPlugins, label: 'TAB_PACKAGES/LABEL_ENABLE_PLUGINS' }
-	}"></div>
+}"></div>

-	<br />
+<br />

-	<div data-bind="visible: 0 < packagesAvailableForUpdate().length">
+<div data-bind="visible: 0 < packagesAvailableForUpdate().length">
 	<div class="legend">
 		<span data-i18n="TAB_PACKAGES/LEGEND_AVAILABLE_FOR_UPDATE"></span>&nbsp;
 		(<span data-bind="text: packagesAvailableForUpdate().length"></span>)
 	</div>
 	<div data-bind="template: { name: 'AdminSettingsPackagesTable', data: {f: packagesAvailableForUpdate} }"></div>
 	<br />
-	</div>
+</div>

-	<div id="packages-installed" data-bind="visible: 0 < packagesCurrent().length, css: {'disabled': !enabledPlugins()}">
+<div id="packages-installed" data-bind="visible: 0 < packagesCurrent().length, css: {'disabled': !enabledPlugins()}">
 	<div class="legend" data-i18n="TAB_PACKAGES/LEGEND_INSTALLED_PACKAGES"></div>
 	<div data-bind="template: { name: 'AdminSettingsPackagesTable', data: {f: packagesCurrent} }"></div>
 	<br />
-	</div>
+</div>

-	<div data-bind="visible: 0 < packagesAvailableForInstallation().length">
+<div data-bind="visible: 0 < packagesAvailableForInstallation().length">
 	<div class="legend" data-i18n="TAB_PACKAGES/LEGEND_AVAILABLE_FOR_INSTALLATION"></div>
 	<div data-bind="template: { name: 'AdminSettingsPackagesTable', data: {f: packagesAvailableForInstallation} }"></div>
 	<br />
-	</div>
-
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html
@ -1,6 +1,5 @@
-<div class="g-ui-user-select-none">
-	<div class="legend" data-i18n="TAB_SECURITY/LEGEND_SECURITY"></div>
-	<div class="form-horizontal">
+<div class="legend" data-i18n="TAB_SECURITY/LEGEND_SECURITY"></div>
+<div class="form-horizontal">
 	<div class="control-group">
 		<div class="controls">
 			<div data-bind="component: {
@ -20,9 +19,9 @@
 			}"></div>
 		</div>
 	</div>
-	</div>
-	<br />
-	<div class="form-horizontal">
+</div>
+<br />
+<div class="form-horizontal">
 	<div class="legend" data-i18n="TAB_SECURITY/LEGEND_ADMIN_PANEL_ACCESS_CREDENTIALS"></div>
 	<div class="control-group">
 		<label class="control-label" data-i18n="TAB_SECURITY/LABEL_CURRENT_PASSWORD"></label>
@ -61,8 +60,8 @@
 			</a>
 		</div>
 	</div>
-	</div>
-	<div class="form-horizontal">
+</div>
+<div class="form-horizontal">
 	<div class="legend" data-i18n="TAB_SECURITY/LEGEND_SSL"></div>
 	<div class="control-group">
 		<div class="controls">
@ -87,5 +86,4 @@
 			}"></div>
 		</div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsAccounts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsAccounts.html
@ -1,5 +1,4 @@
-<div class="b-settings-accounts g-ui-user-select-none">
-	<div data-bind="visible: allowAdditionalAccount">
+<div data-bind="visible: allowAdditionalAccount">
 	<div class="legend">
 		<span data-i18n="SETTINGS_ACCOUNTS/LEGEND_ACCOUNTS"></span>
 		&nbsp;&nbsp;&nbsp;
@ -26,8 +25,8 @@
 			</tr>
 		</tbody>
 	</table>
-	</div>
-	<div data-bind="visible: allowIdentities">
+</div>
+<div data-bind="visible: allowIdentities">
 	<div class="legend" data-i18n="SETTINGS_ACCOUNTS/LEGEND_IDENTITIES"></div>
 	<a class="btn" data-bind="click: addNewIdentity">
 		<i class="icon-user-add"></i>
@ -52,5 +51,4 @@
 			</tr>
 		</tbody>
 	</table>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsContacts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsContacts.html
@ -1,5 +1,4 @@
-<div class="b-settings-contacts">
-	<div class="form-horizontal g-ui-user-select-none">
+<div class="form-horizontal">
 	<div class="legend" data-i18n="GLOBAL/CONTACTS"></div>
 	<div class="control-group">
 		<div class="controls" data-bind="component: {
@ -10,9 +9,9 @@
 			}
 		}"></div>
 	</div>
-	</div>
-	<br />
-	<div class="form-horizontal" data-bind="visible: allowContactsSync">
+</div>
+<br />
+<div class="form-horizontal" data-bind="visible: allowContactsSync">
 	<div class="legend" data-i18n="SETTINGS_CONTACTS/LEGEND_CONTACTS_SYNC"></div>
 	<div class="control-group">
 		<div class="controls" data-bind="component: {
@ -45,5 +44,4 @@
 		</div>
 	</div>

-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html
@ -1,16 +1,15 @@
-<div class="b-settings-filters g-ui-user-select-none">
-	<div class="form-horizontal">
+<div class="form-horizontal">
 	<div class="legend">
 		<span data-i18n="SETTINGS_FILTERS/LEGEND_FILTERS"></span>
 		&nbsp;&nbsp;&nbsp;
 		<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
 	</div>
-	</div>
-	<div class="alert alert-error g-ui-user-select-none" data-bind="visible: serverError">
+</div>
+<div class="alert alert-error g-ui-user-select-none" data-bind="visible: serverError">
 	<i class="fontastic">⚠</i>
 	<span data-bind="text: serverErrorDesc"></span>
-	</div>
-	<table class="table table-hover list-table g-ui-user-select-none"
+</div>
+<table class="table table-hover list-table g-ui-user-select-none"
 	data-bind="i18nUpdate: scripts">
 	<colgroup>
 		<col style="width: 30px" />
@ -33,9 +32,8 @@
 			</td>
 		</tr>
 	</tbody>
-	</table>
-	<a class="btn" data-bind="click: $root.addScript">
+</table>
+<a class="btn" data-bind="click: $root.addScript">
 	<i class="fontastic">✚</i>
 	<span data-i18n="SETTINGS_FILTERS/BUTTON_ADD_SCRIPT"></span>
-	</a>
-</div>
+</a>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolders.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolders.html
@ -1,35 +1,33 @@
-<div class="b-settings-folders">
-	<div class="legend">
+<div class="legend">
 	<span data-i18n="SETTINGS_FOLDERS/LEGEND_FOLDERS"></span>
 	&nbsp;&nbsp;&nbsp;
 	<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
-	</div>
-	<div style="border-bottom: 1px solid rgba(128,128,128,0.5);margin-bottom:20px;" data-bind="visible: useImapSubscribe, component: {
+</div>
+<div style="border-bottom: 1px solid rgba(128,128,128,0.5);margin-bottom:20px;" data-bind="visible: useImapSubscribe, component: {
 	name: 'Checkbox',
 	params: {
 		label: 'SETTINGS_FOLDERS/HIDE_UNSUBSCRIBED',
 		value: hideUnsubscribed
 	}
-	}"></div>
-	<a class="btn" data-bind="click: createFolder">
+}"></div>
+<a class="btn" data-bind="click: createFolder">
 	<i class="icon-folder-add"></i>
 	<span data-i18n="SETTINGS_FOLDERS/BUTTON_CREATE"></span>
-	</a>
-	&nbsp;&nbsp;
-	<a class="btn" data-bind="click: systemFolder">
+</a>
+&nbsp;&nbsp;
+<a class="btn" data-bind="click: systemFolder">
 	<i class="fontastic">🔧</i>
 	<span data-i18n="SETTINGS_FOLDERS/BUTTON_SYSTEM"></span>
-	</a>
-	<div class="alert folders-list-error" data-bind="visible: folderListOptimized">
+</a>
+<div class="alert folders-list-error" data-bind="visible: folderListOptimized">
 	<b data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_1"></b>
 	<br />
 	<span data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_2"></span>
-	</div>
-	<div class="alert folders-list-error" data-bind="visible: '' !== folderListError()">
+</div>
+<div class="alert folders-list-error" data-bind="visible: '' !== folderListError()">
 	<button type="button" class="close" data-bind="click: function () { folderListError(''); }">×</button>
 	<span data-bind="text: folderListError"></span>
-	</div>
-	<table class="table table-hover list-table" data-bind="i18nUpdate: folderList">
-		<tbody data-bind="template: { name: 'SettingsFolderItem', foreach: folderList }"></tbody>
-	</table>
 </div>
+<table class="table table-hover list-table" data-bind="i18nUpdate: folderList">
+	<tbody data-bind="template: { name: 'SettingsFolderItem', foreach: folderList }"></tbody>
+</table>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsGeneral.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsGeneral.html
@ -1,5 +1,4 @@
-<div class="b-settings-general g-ui-user-select-none">
-	<div class="form-horizontal">
+<div class="form-horizontal">
 	<div class="legend" data-i18n="SETTINGS_GENERAL/LEGEND_GENERAL"></div>
 	<div class="control-group">
 		<label class="control-label" data-i18n="SETTINGS_GENERAL/LABEL_IDENTITY"></label>
@ -131,5 +130,4 @@
 			</div>
 		</div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html
@ -1,13 +1,9 @@
-<div class="b-settins-left">
-	<div class="b-content">
-		<nav data-bind="foreach: menu">
+<nav class="b-content" data-bind="foreach: menu">
 	<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
-		</nav>
-	</div>
-	<div class="b-content show-on-panel-disabled" data-bind="click: leftPanelDisabled.toggle()"></div>
-	<div class="b-footer">
+</nav>
+<div class="b-content show-on-panel-disabled" data-bind="click: leftPanelDisabled.toggle()"></div>
+<div class="b-footer">
 	<a class="btn buttonResize" data-bind="click: leftPanelDisabled.toggle()">
 		<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
 	</a>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsOpenPGP.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsOpenPGP.html
@ -1,19 +1,18 @@
-<div class="b-settings-open-pgp g-ui-user-select-none">
-	<div class="legend">OpenPGP</div>
-	<button class="btn" data-bind="click: addOpenPgpKey">
+<div class="legend">OpenPGP</div>
+<button class="btn" data-bind="click: addOpenPgpKey">
 	<i class="icon-list-add"></i>
 	<span data-i18n="SETTINGS_OPEN_PGP/BUTTON_ADD_OPEN_PGP_KEY"></span>
-	</button>
-	&nbsp;&nbsp;
-	<div style="display: inline-block" data-i18n="[title]SETTINGS_OPEN_PGP/GENERATE_ONLY_HTTPS">
+</button>
+&nbsp;&nbsp;
+<div style="display: inline-block" data-i18n="[title]SETTINGS_OPEN_PGP/GENERATE_ONLY_HTTPS">
 	<button class="btn" data-bind="click: generateOpenPgpKey">
 		<i class="fontastic">🔑</i>
 		<span data-i18n="SETTINGS_OPEN_PGP/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
 	</button>
-	</div>
-	<br />
-	<br />
-	<div class="control-group">
+</div>
+<br />
+<br />
+<div class="control-group">
 	<div class="controls" data-bind="component: {
 		name: 'Checkbox',
 		params: {
@ -21,9 +20,9 @@
 			value: allowDraftAutosave
 		}
 	}"></div>
-	</div>
-	<br />
-	<table class="table table-hover list-table" data-bind="i18nUpdate: openpgpkeys">
+</div>
+<br />
+<table class="table table-hover list-table" data-bind="i18nUpdate: openpgpkeys">
 	<tbody data-bind="foreach: openpgpkeysPrivate">
 		<tr class="open-pgp-key-item">
 			<td>
@ -57,5 +56,4 @@
 			<td class="view-open-pgp-key fontastic" data-bind="click: function (openPgpKey) { $root.viewOpenPgpKey(openPgpKey); }">👁</td>
 		</tr>
 	</tbody>
-	</table>
-</div>
+</table>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsPane.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsPane.html
@ -1,5 +1,4 @@
-<div class="b-settings b-settins-right">
-	<div class="b-toolbar btn-toolbar" style="margin-top: 2px;">
+<div class="btn-toolbar">
 	<!-- ko if: isMobile() -->
 	<div class="btn-group" style="margin-left: -1px">
 		<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
@ -9,6 +8,5 @@
 		<i class="fontastic">⬅</i>
 		<span data-i18n="GLOBAL/BACK"></span>
 	</a>
-	</div>
-	<div class="b-content" id="rl-settings-subscreen"></div>
 </div>
+<div id="rl-settings-subscreen"></div>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsSecurity.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsSecurity.html
@ -1,5 +1,4 @@
-<div class="b-settings-security">
-	<div class="form-horizontal" data-bind="visible: capaAutoLogout">
+<div class="form-horizontal" data-bind="visible: capaAutoLogout">
 	<div class="legend" data-i18n="SETTINGS_SECURITY/LEGEND_SECURITY"></div>
 	<div class="control-group">
 		<label class="control-label" data-i18n="SETTINGS_SECURITY/LABEL_AUTOLOGOUT"></label>
@ -15,5 +14,4 @@
 			}
 		}"></div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsThemes.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsThemes.html
@ -1,17 +1,16 @@
-<div class="b-settings-themes g-ui-user-select-none">
-	<div class="legend">
+<div class="legend">
 	<span data-i18n="SETTINGS_THEMES/LEGEND_THEMES"></span>
 	<span data-bind="saveTrigger: themeTrigger"></span>
-	</div>
-	<div class="b-themes-list" data-bind="foreach: themesObjects">
+</div>
+<div class="b-themes-list" data-bind="foreach: themesObjects">
 	<div class="e-item" data-bind="click: function () { $root.theme(name); }, css: { 'selected': selected }">
 		<div class="e-name" data-bind="text: nameDisplay"></div>
 		<img class="e-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-bind="attr: { 'src': themePreviewSrc }" />
 	</div>
-	</div>
-	<br />
-	<br />
-	<div class="form-horizontal" data-bind="visible: capaUserBackground">
+</div>
+<br />
+<br />
+<div class="form-horizontal" data-bind="visible: capaUserBackground">
 	<div class="legend" data-i18n="SETTINGS_THEMES/LEGEND_THEMES_CUSTOM"></div>
 	<div class="control-group g-ui-user-select-none">
 		<div class="row" data-bind="visible: '' !== background.error()" style="margin-left: 0; margin-bottom: 10px;">
@ -31,5 +30,4 @@
 			</a>
 		</div>
 	</div>
-	</div>
 </div>
--- a/snappymail/v/0.0.0/themes/SquaresDark/styles.css
+++ b/snappymail/v/0.0.0/themes/SquaresDark/styles.css
@ -73,10 +73,9 @@

 .well,
 #rl-popups > dialog,
-.b-settins-right .b-content,
+#rl-settings-subscreen,
 .messageList,
 .messageView,
-.b-admin-right .b-content,
 #V-PopupsCompose .b-attachment-place {
 	background-color: #000;
 	border-color: #555;
@ -132,7 +131,7 @@ dialog header, dialog footer,
 	background-color: #111;
 }

-.b-admin-about .rl-logo {
+#V-Settings-About .rl-logo {
 	filter: drop-shadow(0 0 1px #FFF);
 }

@ -141,6 +140,7 @@ dialog header, dialog footer,
 }

 .tabs [id^="tab"]:checked + label {
+	background: linear-gradient(#555 0%, #000 100%);
 	color: #000;
 }