style: replaced html and body stylings with Tailwind classes; worflow: removed rollup plugin esbuild and re-added rollup-plugin-terser for minification

package-lock.json

@@ -4,6 +4,63 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
+		"@babel/code-frame": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+			"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+			"dev": true,
+			"requires": {
+				"@babel/highlight": "^7.10.4"
+			}
+		},
+		"@babel/helper-validator-identifier": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
+			"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
+			"dev": true
+		},
+		"@babel/highlight": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+			"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-validator-identifier": "^7.10.4",
+				"chalk": "^2.0.0",
+				"js-tokens": "^4.0.0"
+			},
+			"dependencies": {
+				"ansi-styles": {
+					"version": "3.2.1",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+					"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+					"dev": true,
+					"requires": {
+						"color-convert": "^1.9.0"
+					}
+				},
+				"chalk": {
+					"version": "2.4.2",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+					"dev": true,
+					"requires": {
+						"ansi-styles": "^3.2.1",
+						"escape-string-regexp": "^1.0.5",
+						"supports-color": "^5.3.0"
+					}
+				},
+				"supports-color": {
+					"version": "5.5.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^3.0.0"
+					}
+				}
+			}
+		},
 		"@babel/runtime": {
 			"version": "7.12.1",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
@@ -655,6 +712,12 @@
 				"node-releases": "^1.1.65"
 			}
 		},
+		"buffer-from": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+			"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+			"dev": true
+		},
 		"builtin-modules": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
@@ -942,6 +1005,12 @@
 				"delayed-stream": "~1.0.0"
 			}
 		},
+		"commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+			"dev": true
+		},
 		"commondir": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -1738,12 +1807,6 @@
 				"is-symbol": "^1.0.2"
 			}
 		},
-		"esbuild": {
-			"version": "0.8.3",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.3.tgz",
-			"integrity": "sha512-PxoukdXYOyT3pxwZmcD6jDLaPH4e2oRmWx51aflBUYk5+JcGLqwjfH9eXsnkK/1kgOA3WOVP7IhQ2gLyEH+Xbg==",
-			"dev": true
-		},
 		"escalade": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -2371,11 +2434,33 @@
 			"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
 			"dev": true
 		},
-		"joycon": {
+		"jest-worker": {
-			"version": "2.2.5",
+			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/joycon/-/joycon-2.2.5.tgz",
+			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-			"integrity": "sha512-YqvUxoOcVPnCp0VU1/56f+iKSdvIRJYPznH22BdXV3xMk75SFXhWeJkZ8C9XxUWt1b5x2X1SxuFygW1U0FmkEQ==",
+			"integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-			"dev": true
+			"dev": true,
+			"requires": {
+				"@types/node": "*",
+				"merge-stream": "^2.0.0",
+				"supports-color": "^7.0.0"
+			},
+			"dependencies": {
+				"has-flag": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+					"dev": true
+				},
+				"supports-color": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^4.0.0"
+					}
+				}
+			}
 		},
 		"js-base64": {
 			"version": "2.6.4",
@@ -2383,6 +2468,12 @@
 			"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
 			"dev": true
 		},
+		"js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"dev": true
+		},
 		"js-yaml": {
 			"version": "3.14.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
@@ -2622,6 +2713,12 @@
 				}
 			}
 		},
+		"merge-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+			"dev": true
+		},
 		"mime-db": {
 			"version": "1.44.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
@@ -6013,6 +6110,15 @@
 			"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
 			"dev": true
 		},
+		"randombytes": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+			"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+			"dev": true,
+			"requires": {
+				"safe-buffer": "^5.1.0"
+			}
+		},
 		"read-pkg": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -6193,29 +6299,6 @@
 			"integrity": "sha512-zUPGitW4usmZcVa0nKecRvw3odtXgnxdCben9Hx1kxVoR3demek8RU9tmRG/R35hnRPQTb7wEsYEe3GUcjxIMA==",
 			"dev": true
 		},
-		"rollup-plugin-esbuild": {
-			"version": "2.5.2",
-			"resolved": "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-2.5.2.tgz",
-			"integrity": "sha512-E4q3ac1AlMd0m0ZRYffdiorOt2eZcxfbdPaqBLs7JLnPE8krgIAihOD6cTUc54UJjoOMA9WcY63TR+JKWLzYNw==",
-			"dev": true,
-			"requires": {
-				"@rollup/pluginutils": "^4.0.0",
-				"joycon": "^2.2.5",
-				"strip-json-comments": "^3.1.1"
-			},
-			"dependencies": {
-				"@rollup/pluginutils": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
-					"integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
-					"dev": true,
-					"requires": {
-						"estree-walker": "^2.0.1",
-						"picomatch": "^2.2.2"
-					}
-				}
-			}
-		},
 		"rollup-plugin-postcss": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.8.tgz",
@@ -6402,6 +6485,18 @@
 				}
 			}
 		},
+		"rollup-plugin-terser": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+			"integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+			"dev": true,
+			"requires": {
+				"@babel/code-frame": "^7.10.4",
+				"jest-worker": "^26.2.1",
+				"serialize-javascript": "^4.0.0",
+				"terser": "^5.0.0"
+			}
+		},
 		"rollup-plugin-vue": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-4.2.0.tgz",
@@ -6544,6 +6639,15 @@
 			"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
 			"dev": true
 		},
+		"serialize-javascript": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+			"integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+			"dev": true,
+			"requires": {
+				"randombytes": "^2.1.0"
+			}
+		},
 		"set-blocking": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -6609,6 +6713,24 @@
 				"amdefine": ">=0.0.4"
 			}
 		},
+		"source-map-support": {
+			"version": "0.5.19",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+			"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+			"dev": true,
+			"requires": {
+				"buffer-from": "^1.0.0",
+				"source-map": "^0.6.0"
+			},
+			"dependencies": {
+				"source-map": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+					"dev": true
+				}
+			}
+		},
 		"sourcemap-codec": {
 			"version": "1.4.8",
 			"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
@@ -6812,12 +6934,6 @@
 				"get-stdin": "^4.0.1"
 			}
 		},
-		"strip-json-comments": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-			"dev": true
-		},
 		"style-inject": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz",
@@ -7157,6 +7273,25 @@
 				}
 			}
 		},
+		"terser": {
+			"version": "5.3.8",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.3.8.tgz",
+			"integrity": "sha512-zVotuHoIfnYjtlurOouTazciEfL7V38QMAOhGqpXDEg6yT13cF4+fEP9b0rrCEQTn+tT46uxgFsTZzhygk+CzQ==",
+			"dev": true,
+			"requires": {
+				"commander": "^2.20.0",
+				"source-map": "~0.7.2",
+				"source-map-support": "~0.5.19"
+			},
+			"dependencies": {
+				"source-map": {
+					"version": "0.7.3",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+					"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+					"dev": true
+				}
+			}
+		},
 		"timsort": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",

package.json

@@ -28,16 +28,15 @@
 		"@rollup/plugin-commonjs": "^16.0.0",
 		"@rollup/plugin-node-resolve": "^10.0.0",
 		"@rollup/plugin-replace": "^2.3.4",
-		"esbuild": "^0.8.3",
 		"node-sass": "^5.0.0",
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.1.4",
 		"rimraf": "^3.0.2",
 		"rollup": "^2.32.1",
 		"rollup-plugin-analyzer": "^3.3.0",
-		"rollup-plugin-esbuild": "^2.5.2",
 		"rollup-plugin-postcss": "^3.1.8",
 		"rollup-plugin-svg": "^2.0.0",
+		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-vue": "^4.2.0",
 		"sass": "^1.27.0",
 		"tailwindcss": "^1.9.6",

public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr" data-theme="dark">
+<html class="h-screen" lang="en" dir="ltr" data-theme="dark">
 
 	<head>
 		<meta charset="utf-8">
@@ -17,7 +17,7 @@
 		</script>
 	</head>
 
-	<body>
+	<body class="w-full h-full overflow-hidden font-sans bg-background-main text-foreground">
 		<div id="app"></div>
 	</body>
 

rollup.config.js

@@ -6,7 +6,7 @@ import analyze from 'rollup-plugin-analyzer'
 import vue from 'rollup-plugin-vue'
 import svg from 'rollup-plugin-svg'
 import postcss from 'rollup-plugin-postcss'
-import esbuild from 'rollup-plugin-esbuild'
+import { terser } from 'rollup-plugin-terser'
 import { version } from './package.json'
 
 const isProduction = !process.env.ROLLUP_WATCH
@@ -48,11 +48,7 @@ export default {
 		svg(),
 		vue(),
 		postcss(),
-		esbuild({
+		isProduction && terser(), // Minifies only in production
-			sourceMap: false,
-			minify: isProduction,
-			target: 'es2015'
-		}),
 		isProduction && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production
 	]
 }

src/styles/scss/base/_base.scss

@@ -1,4 +1,6 @@
 :root {
+	font-size: 16px;
+
 	--main-scroll: theme('colors.grayscale.300');
 	--panels-scroll: hsl(180, 2%, 17%);
 	--toast-background: hsla(240, 12%, 16%, 0.85);
@@ -42,17 +44,3 @@
 	--table-zebra: hsl(257, 61%, 10%);
 	--table-highlight: hsl(257, 66%, 27%);
 }
-
-html {
-	height: 100vh;
-}
-
-body {
-	margin: 0px;
-	width: 100%;
-	height: 100%;
-	font-family: 'Open Sans', 'sans-serif';
-	overflow: hidden;
-	background: var(--main-background);
-	color: var(--foreground);
-}

src/styles/scss/base/_normalize.scss

@@ -1,11 +1,7 @@
 * {
+	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
-	box-sizing: border-box;
-}
-
-:root {
-	font-size: 16px;
 }
 
 table,
@@ -17,11 +13,11 @@ tr,
 th,
 td {
 	margin: 0;
-	padding: 0;
 	border: 0;
-	font-size: 100%;
+	padding: 0;
-	font: inherit;
 	vertical-align: baseline;
+	font: inherit;
+	font-size: 100%;
 }
 
 table {
@@ -34,7 +30,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-	-webkit-appearance: button;
+	appearance: button;
 }
 
 input[type='text'],
@@ -43,7 +39,6 @@ input[type='number'],
 input[type='search'],
 input[type='checkbox'],
 select {
-	-webkit-appearance: none;
 	appearance: none;
 }
 

src/styles/scss/globals/_tables.scss

@@ -14,12 +14,12 @@ $table-border-radius: 3px;
 	}
 
 	tr {
-		background: var(--table-bg);
 		transition: background-color 175ms ease-in-out;
+		background: var(--table-bg);
 
 		&:nth-child(even) {
-			background: var(--table-zebra);
 			transition: background-color 175ms ease-in-out;
+			background: var(--table-zebra);
 		}
 
 		&:not(:last-child) {
@@ -40,9 +40,9 @@ $table-border-radius: 3px;
 		.sort-asc,
 		.sort-desc {
 			&::after {
-				font-size: 0.7em;
 				padding-left: 3px;
 				line-height: 0.7em;
+				font-size: 0.7em;
 			}
 		}
 
@@ -114,8 +114,8 @@ $table-border-radius: 3px;
 		}
 
 		th {
-			height: 45px;
 			padding: $vertical-separator 10px;
+			height: 45px;
 
 			&:first-child {
 				padding: $vertical-separator 10px $vertical-separator 20px;

src/styles/scss/tabs/_settings-tab.scss

@@ -21,10 +21,7 @@
 		width: 33%;
 
 		&--only-checkbox {
-			display: flex;
+			@apply flex flex-col items-start justify-center;
-			flex-direction: column;
-			align-items: start;
-			justify-content: center;
 		}
 	}
 

tailwind.config.js

@@ -1,3 +1,5 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
 	future: {
 		removeDeprecatedGapUtilities: true,
@@ -21,7 +23,6 @@ module.exports = {
 		extend: {
 			colors: {
 				grayscale: {
-					80: 'hsl(0, 0%, 8%)', // Remove maybe
 					100: 'hsl(0, 0%, 10%)',
 					200: 'hsl(0, 0%, 20%)',
 					300: 'hsl(0, 0%, 30%)',
@@ -44,6 +45,9 @@ module.exports = {
 				panels: {
 					bg: 'var(--panels-background)'
 				}
+			},
+			fontFamily: {
+				sans: ['Open Sans', ...defaultTheme.fontFamily.sans]
 			}
 		}
 	},