Some UI tidying (hestiacp#3145)

* Refactor nested if statement

* Fix typo

* Tidy

* Tidy up "badge" CSS

* Tidy some cron page stuff

Author: AlecRust

README.md

@@ -2,7 +2,7 @@
 
 ![Hestia screenshot](https://hestiacp.com/img/screen_HestiaServer-dark.png)
 
-<h2 align="center">Lightweight and powerful control panel for the modern web.</h2>
+<h2 align="center">Lightweight and powerful control panel for the modern web</h2>
 
 <p align="center"><strong>Latest stable release:</strong> Version 1.6.14 | <a href="https://github.com/hestiacp/hestiacp/blob/release/CHANGELOG.md">View Changelog</a></p>
 

docs/docs/server-administration/backup-restore.md

@@ -90,13 +90,13 @@ If using public and private keys (recommended):
 v-add-backup-host 'sftp' 'remote.ftp-host.ltd' 'backup-user' '/root/id_rsa' '/path-backups/' 'port'
 ```
 
-## How to setup rclone
+## How to setup Rclone
 
 ::: tip
 Initial configuration can only be done via CLI. After that, you can update the settings via the web panel.
 :::
 
-First, download [rclone](https://rclone.org/downloads/). The easiest method is to run this command:
+First, [download Rclone](https://rclone.org/downloads/). The easiest method is to run this command:
 
 ```bash
 sudo -v

web/css/src/themes/dark.css

@@ -739,56 +739,22 @@ form#vstobjects.suspended {
 	background-color: #282828;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
+	color: #dadada;
+	border-color: #212121;
 	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px rgb(0 0 0 / 65%);
-	text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-	border: 1px solid #212121 !important;
-}
-
-.badge.large {
-}
-
-.badge.raised {
-	background: radial-gradient(ellipse at center, rgb(40 40 40 / 20%) 0%, rgb(80 80 80 / 5%) 100%);
-}
-
-.l-unit--suspended .badge {
-	background: #303030 !important;
-	color: #808080 !important;
-	text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
-	box-shadow: 0 1px 2px rgb(25 25 25 / 30%) !important;
-}
-
-.badge.gray {
-	border: 1px solid #181818;
+	text-shadow: 0 1px rgb(0 0 0 / 70%);
 	background-color: #252525;
-	color: #dadada;
-	text-shadow: 0 1px rgb(0 0 0 / 70%) !important;
-}
-
-.badge.blue {
 }
 
-.badge.purple {
-}
-
-.badge.teal {
-}
-
-.badge.maroon {
-	background-color: #ff3478;
-}
-
-.badge.red {
-}
-
-.badge.orange {
-}
-
-.badge.green {
-}
-
-.badge.lightblue {
+.l-unit--suspended .badge {
+	background-color: #303030;
+	color: #808080;
+	text-shadow: 0 -1px rgb(0 0 0 / 40%);
+	box-shadow: 0 1px 2px rgb(25 25 25 / 30%);
 }
 
 .status-icon.large {
@@ -894,16 +860,12 @@ form#vstobjects.suspended {
 	border-bottom: 1px solid #353535;
 }
 
-.helper-container {
+.cron-helper-container {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
 	border: 1px solid #606060;
 	background-color: #454545;
 }
 
-.context-helper:active {
-	color: #ff3478;
-}
-
 .cron-helper-tabs a {
 	color: #cacaca;
 }
@@ -917,7 +879,7 @@ form#vstobjects.suspended {
 }
 
 .cron-helper-tabs .ui-tabs-selected a,
-li[aria-expanded="true"] a {
+.ui-tabs-tab[aria-expanded="true"] a {
 	color: #ff3478 !important;
 }
 

web/css/src/themes/default.css

@@ -2420,31 +2420,23 @@ form#vstobjects.suspended {
 	z-index: -1;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
 	display: inline-block;
-	min-width: 24px;
+	min-width: 26px;
 	min-height: 24px;
 	line-height: 24px;
 	border-radius: 50%;
 	font-weight: 700;
 	font-size: 0.75rem;
 	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
-	text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-	border: 1px solid #b8b8b8 !important;
-}
-
-.badge.large {
-	min-width: 48px;
-	min-height: 48px;
-	line-height: 48px;
-}
-
-.badge.raised {
-	background: radial-gradient(
-		ellipse at center,
-		rgb(255 255 255 / 20%) 0%,
-		rgb(255 255 255 / 5%) 100%
-	);
+	color: #6c6c6c;
+	text-shadow: 0 1px #fafafa;
+	border: 1px solid #b8b8b8;
+	background-color: #eaeaea;
+	margin-top: -2px;
 }
 
 .l-unit--suspended .badge {
@@ -2454,61 +2446,6 @@ form#vstobjects.suspended {
 	box-shadow: 0 1px 2px rgb(120 120 120 / 30%) !important;
 }
 
-.badge.gray {
-	border: 1px solid #fff;
-	background-color: #eaeaea;
-	color: #6c6c6c;
-	text-shadow: 0 1px #fafafa !important;
-}
-
-.badge.blue {
-	border: 1px solid #fff;
-	background-color: #316198;
-	color: #fff;
-}
-
-.badge.purple {
-	border: 1px solid #fff;
-	background-color: #8e2fca;
-	color: #fff;
-}
-
-.badge.teal {
-	border: 1px solid #fff;
-	background-color: #3cc;
-	color: #fff;
-}
-
-.badge.maroon {
-	border: 1px solid #fff;
-	background-color: #c36;
-	color: #fff;
-}
-
-.badge.red {
-	border: 1px solid #fff;
-	background-color: #f33;
-	color: #fff;
-}
-
-.badge.orange {
-	border: 1px solid #fff;
-	background-color: #f6a800;
-	color: #fff;
-}
-
-.badge.green {
-	border: 1px solid #fff;
-	background-color: #53ba55;
-	color: #fff;
-}
-
-.badge.lightblue {
-	border: 1px solid #fff;
-	background-color: #6eb6f0;
-	color: #fff;
-}
-
 .status-icon.large {
 	font-size: 1rem;
 }
@@ -2573,7 +2510,7 @@ form#vstobjects.suspended {
 	text-shadow: 0 !important;
 }
 
-.helper-container {
+.cron-helper-container {
 	float: right;
 	margin-bottom: -450px;
 	margin-top: 202px;
@@ -2589,83 +2526,48 @@ form#vstobjects.suspended {
 	}
 }
 
-.context-helper {
-	text-transform: uppercase;
-	color: #777;
-	font-size: 0.8rem;
-	cursor: pointer;
-	font-weight: 600;
-	float: right;
-
-	&:hover {
-		color: #3b9de8;
-	}
-
-	&:active {
-		color: #c36;
-	}
-}
-
 .cron-helper-tabs {
 	border: none !important;
 	font-family: Exo, system-ui !important;
-}
 
-.cron-helper-tabs a {
-	color: #777;
-	font-weight: 600;
-	line-height: 30px;
-	padding: 0 12px;
-	text-transform: uppercase;
-}
-
-.cron-helper-tabs a:hover {
-	color: #c36;
-}
-
-.cron-helper-tabs a:active {
-	color: #3b9de8;
-}
-
-.cron-helper-tabs .ui-tabs-selected a,
-li[aria-expanded="true"] a {
-	color: #c36;
-}
-
-.cron-helper-tabs .form-label {
-	padding-right: 15px;
-	padding-left: 25px;
-}
+	& a {
+		color: #777;
+		font-weight: 600;
+		line-height: 30px;
+		padding: 0 12px;
+		text-transform: uppercase;
 
-.cron-helper-tabs .form-label.first {
-	display: inline-block;
-	width: 120px;
-	padding-left: 0;
-}
+		&:hover {
+			color: #c36;
+		}
 
-.cron-helper-tabs .form-select {
-	display: inline-block;
-	width: 384px;
-}
+		&:active {
+			color: #3b9de8;
+		}
+	}
 
-.context-helper-close {
-	cursor: pointer;
-	float: right;
-	size: 46px 32px;
-	padding-top: 11px;
-	filter: contrast(50%);
+	& .form-label {
+		padding-right: 15px;
+		padding-left: 25px;
 
-	&:hover {
-		background-color: #aaa;
-		filter: none;
+		&.first {
+			display: inline-block;
+			width: 120px;
+			padding-left: 0;
+		}
 	}
 
-	&:active {
-		background-color: #999;
-		filter: none;
+	& .form-select {
+		display: inline-block;
+		width: 384px;
 	}
 }
 
+.cron-helper-tabs .ui-tabs-selected a,
+.ui-tabs-tab[aria-expanded="true"] a {
+	color: #c36;
+}
+
 .server-console-output {
 	color: #c36;
 	padding: 10px 0 20px 20px;

web/css/src/themes/flat.css

@@ -71,6 +71,9 @@ strong {
 	box-shadow: none;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
 	box-shadow: none;
 }

web/css/src/themes/vestia.css

@@ -373,11 +373,13 @@ strong {
 	letter-spacing: 0 !important;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
-	border: none !important;
-	background-color: none !important;
-	box-shadow: none !important;
-	border-radius: 4px !important;
+	border: none;
+	box-shadow: none;
+	border-radius: 4px;
 }
 
 /* Shortcuts panel
@@ -406,14 +408,14 @@ strong {
 	border-radius: 0;
 }
 
-.helper-container {
-	margin-top: 197px;
+.cron-helper-container {
+	margin-top: 201px;
 	border-radius: 0;
 	box-shadow: none;
 }
 
 .cron-helper-tabs .ui-tabs-selected a,
-li[aria-expanded="true"] a {
+.ui-tabs-tab[aria-expanded="true"] a {
 	color: #ff6701;
 }