Remove more tables (hestiacp#3114)

Author: AlecRust

CONTRIBUTING.md

@@ -16,10 +16,14 @@
 
 ## Development Guidelines
 
+Additional information on how to contribute to Hestia Control Panel can be found in the [Development](docs/docs/contributing/development.md) documentation.
+
 ### Code formatting and comments
 
 We ask that you follow existing naming schemes and coding conventions where possible, and that you add comments in your source code where appropriate to aid other developers in debugging and understanding your code in the future.
 
+To ensure your changes meet our formatting requirements, please run `yarn install` from the root of the repository before committing your changes. This will set up pre-commit hooks for automatic formatting, which will help to get your changes merged as quickly as possible.
+
 ### Workflow and process
 
 Development for this project takes place in branches to effectively develop, manage, and test new features and code changes. Our tiered approach allows us to closely control the quality of code as it is checked in for inclusion.

docs/docs/contributing/development.md

@@ -2,15 +2,15 @@
 
 Hestia is an open-source project, and we welcome contributions from the community. Please read the [contributing guidelines](https://github.com/hestiacp/hestiacp/blob/main/CONTRIBUTING.md) for additional information.
 
-Hestia is designed to run on a web server. To develop Hestia locally, we recommend using a virtual machine.
+Hestia is designed to be installed on a web server. To develop Hestia on your local machine, a virtual machine is recommend.
 
 ::: warning
 Development builds are unstable. If you encounter a bug please [report it via GitHub](https://github.com/hestiacp/hestiacp/issues/new/choose) or [submit a Pull request](https://github.com/hestiacp/hestiacp/pulls).
 :::
 
-## Running Hestia in a virtual machine
+## Creating a virtual machine for development
 
-Here are example instructions for running Hestia for development in a virtual machine.
+These are example instructions for creating a virtual machine running Hestia for development.
 
 These instructions use [Multipass](https://multipass.run/) to create the VM. Feel free to adapt the commands for any virtualization software you prefer.
 
@@ -69,13 +69,15 @@ These instructions use [Multipass](https://multipass.run/) to create the VM. Fee
    multipass list
    ```
 
-1. Visit the VM's IP address in your browser using the default Hestia port, bypass any SSL warnings and login with `admin`/`password123`
+1. Visit the VM's IP address in your browser using the default Hestia port and login with `admin`/`password123`
+
+   _(bypass any SSL errors you see when loading the page)_
 
    ```bash
    e.g. https://192.168.64.15:8083
    ```
 
-You now have Hestia running in a virtual machine. The following section will cover how to make changes to Hestia and test them locally.
+Hestia is now running in a virtual machine. If you'd like to make changes to the source code and test them, please continue to the next section.
 
 ## Making changes to Hestia
 

web/css/src/base.css

@@ -36,18 +36,44 @@ body {
 }
 
 a {
-	color: var(--color-text);
+	color: var(--color-text-link);
 	text-decoration: none;
+
+	&:hover {
+		color: var(--color-text-link-hover);
+	}
+}
+
+p,
+pre {
+	margin: 0;
 }
 
 h1,
+.u-text-H1,
 h2,
+.u-text-H2,
 h3,
-p,
-pre {
+.u-text-H3 {
+	font-weight: 500;
 	margin: 0;
 }
 
+h1,
+.u-text-H1 {
+	font-size: 1.4rem;
+}
+
+h2,
+.u-text-H2 {
+	font-size: 1.2rem;
+}
+
+h3,
+.u-text-H3 {
+	font-size: 1rem;
+}
+
 ol,
 ul {
 	list-style: none;

web/css/src/themes/dark.css

@@ -8,8 +8,13 @@
 
 :root {
 	--color-text: #cdcdcd;
+	--color-text-link: #52b9ff;
+	--color-text-link-hover: #ff3478;
 	--color-background: #282828;
 	--alert-border-color: #212121;
+
+	/* Alerts */
+	--alert-danger-color: #d13535;
 }
 
 b,
@@ -180,14 +185,22 @@ strong {
 	}
 }
 
-/* Alerts
+/* Inline alerts
    ========================================================================== */
 
-.alert-danger {
-	background-color: #d13535;
+.inline-danger {
+	color: #f33;
+}
+
+.inline-success {
+	color: #53ba55;
 
-	& .fas {
-		color: #d13535;
+	& a {
+		color: #fff;
+
+		&:hover {
+			color: #ff3478;
+		}
 	}
 }
 
@@ -206,6 +219,9 @@ strong {
 	color: #fafafa;
 }
 
+/* Toolbar
+   ========================================================================== */
+
 .toolbar {
 	border-color: #454545;
 	background-color: #282828;
@@ -463,22 +479,11 @@ strong {
 	color: #fff;
 }
 
-/* form styles */
-
-.inline-danger {
-	color: #f33;
-}
-
-.inline-success {
-	color: #53ba55;
-
-	& a {
-		color: #fff;
+/* Forms
+   ========================================================================== */
 
-		&:hover {
-			color: #ff3478;
-		}
-	}
+.form-title {
+	color: #e8e8e8;
 }
 
 .form-label,
@@ -565,9 +570,6 @@ textarea:focus::placeholder {
 	color: #909090;
 }
 
-.lets-encrypt-note {
-}
-
 .toggle-psw-visibility-icon {
 }
 
@@ -696,50 +698,13 @@ textarea:focus::placeholder {
 .optional {
 }
 
-.mail-infoblock {
-	color: #fff;
-	border: 1px solid #606060;
-	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
-	background-color: #454545;
-}
-
-.mail-infoblock:hover {
-}
-
-.mail-infoblock td {
-	color: #dadada;
-}
-
-.mail-infoblock td:first-child {
-}
-
-.mail-infoblock div {
-}
-
-.mail-infoblock a {
-	color: #52b9ff;
-
-	&:hover {
-		color: #ff3478;
-	}
-}
-
-.additional-info {
-}
-
-.additional-info td {
-}
-
-.additional-info td.details {
-}
-
 .body-login,
 .body-reset {
 	background: #303030;
 	background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
 }
 
-/* Login box
+/* Login
    ========================================================================== */
 
 .login {
@@ -771,10 +736,6 @@ textarea:focus::placeholder {
 	}
 }
 
-.form-title {
-	color: #e8e8e8;
-}
-
 .section-title {
 	color: #d4d4d4;
 	border-bottom-color: #484848;
@@ -926,6 +887,9 @@ form#vstobjects.suspended {
 	text-shadow: 0 !important;
 }
 
+/* Modals
+   ========================================================================== */
+
 .ui-dialog .ui-dialog-buttonpane {
 	border-top: 1px solid #404040;
 }
@@ -934,16 +898,6 @@ form#vstobjects.suspended {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 10%), inset 0 0 1px #000, inset 0 0 3px rgb(0 0 0 / 50%);
 }
 
-.shortcuts {
-	background: rgb(30 30 30 / 95%);
-	border: 1px solid rgb(255 255 255 / 25%);
-	box-shadow: 0 0 20px rgb(0 0 0 / 50%);
-}
-
-.shortcuts-header {
-	border-bottom: 1px solid #353535;
-}
-
 .ui-dialog {
 	background-color: rgb(45 45 45 / 95%);
 	border: 1px solid rgb(80 80 80 / 97%);
@@ -959,6 +913,23 @@ form#vstobjects.suspended {
 	font-weight: 600;
 }
 
+.ui-widget-header a {
+	color: #cacaca !important;
+}
+
+/* Shortcuts panel
+   ========================================================================== */
+
+.shortcuts {
+	background: rgb(30 30 30 / 95%);
+	border: 1px solid rgb(255 255 255 / 25%);
+	box-shadow: 0 0 20px rgb(0 0 0 / 50%);
+}
+
+.shortcuts-header {
+	border-bottom: 1px solid #353535;
+}
+
 .helper-container {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
 	border: 1px solid #606060;
@@ -1002,14 +973,6 @@ li[aria-expanded="true"] a {
 	color: #707070;
 }
 
-.ui-widget-header a {
-	color: #cacaca !important;
-}
-
-.debug-panel-content {
-	background-color: #282828;
-}
-
 .body-rrd .units .l-unit {
 	background-color: #282828 !important;
 	border-left: 1px solid transparent !important;
@@ -1050,6 +1013,15 @@ li[aria-expanded="true"] a {
 	border-color: #454545;
 }
 
+/* Panel component
+   ========================================================================== */
+
+.panel {
+	background-color: #454545;
+	border-color: #606060;
+	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+}
+
 /* Collapse component
    ========================================================================== */
 
@@ -1060,3 +1032,10 @@ li[aria-expanded="true"] a {
 	box-shadow: inset 0 0 2px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 40%);
 	color: #fff;
 }
+
+/* Debug panel
+   ========================================================================== */
+
+.debug-panel-content {
+	background-color: #282828;
+}