From de25364a19564958f65ca1a28599f1d220f4b3ce Mon Sep 17 00:00:00 2001 From: JensForstmann <19289807+JensForstmann@users.noreply.github.com> Date: Mon, 9 Oct 2023 14:14:15 +0200 Subject: [PATCH] Add frontend component library daisyUI --- frontend/index.html | 2 +- frontend/package-lock.json | 167 ++++++++++++++++++ frontend/package.json | 2 + frontend/src/App.tsx | 39 ++-- frontend/src/assets/Icons.tsx | 45 +++++ frontend/src/components/Card.tsx | 5 +- frontend/src/components/CardMenu.tsx | 6 +- frontend/src/components/Chat.tsx | 3 +- frontend/src/components/GameServerCard.tsx | 44 +++-- frontend/src/components/LogViewer.tsx | 2 +- .../src/components/ManagedGameServerList.tsx | 54 +++--- frontend/src/components/MatchCard.tsx | 19 +- frontend/src/components/MatchList.tsx | 114 ++++++------ frontend/src/components/MatchMapCard.tsx | 23 +-- frontend/src/components/Modal.tsx | 32 ++-- frontend/src/components/NotLiveCard.tsx | 6 +- frontend/src/components/PlayerListCard.tsx | 2 +- frontend/src/components/Rcon.tsx | 3 +- frontend/src/components/ScrollArea.tsx | 2 +- frontend/src/components/SelectInput.tsx | 26 +++ frontend/src/components/TextArea.tsx | 21 ++- frontend/src/components/TextInput.tsx | 21 ++- frontend/src/components/ToggleInput.tsx | 19 ++ frontend/src/index.css | 9 - frontend/src/locales/de.json | 4 +- frontend/src/locales/en.json | 4 +- frontend/src/pages/create.tsx | 105 ++++++----- frontend/src/pages/gameServers.tsx | 58 +++--- frontend/src/pages/login.tsx | 14 +- frontend/src/pages/matches.tsx | 13 +- frontend/src/utils/theme.ts | 4 +- frontend/tailwind.config.js | 12 ++ 32 files changed, 586 insertions(+), 294 deletions(-) create mode 100644 frontend/src/components/SelectInput.tsx create mode 100644 frontend/src/components/ToggleInput.tsx diff --git a/frontend/index.html b/frontend/index.html index 87ce9a0..47999b0 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -12,7 +12,7 @@ -
+ diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 965ae13..97baf7d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,7 +12,9 @@ "@formkit/auto-animate": "^0.8.0", "@solid-primitives/scheduled": "^1.4.1", "@solidjs/router": "^0.8.3", + "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.16", + "daisyui": "^3.9.2", "postcss": "^8.4.31", "solid-js": "^1.7.12", "tailwindcss": "^3.3.3", @@ -954,6 +956,34 @@ "solid-js": "^1.5.3" } }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz", + "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==", + "dev": true, + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, + "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@types/babel__core": { "version": "7.20.0", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz", @@ -1275,6 +1305,12 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -1299,6 +1335,16 @@ "safe-buffer": "~5.1.1" } }, + "node_modules/css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1317,6 +1363,26 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", "dev": true }, + "node_modules/daisyui": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.2.tgz", + "integrity": "sha512-yJZ1QjHUaL+r9BkquTdzNHb7KIgAJVFh0zbOXql2Wu0r7zx5qZNLxclhjN0WLoIpY+o2h/8lqXg7ijj8oTigOw==", + "dev": true, + "dependencies": { + "colord": "^2.9", + "css-selector-tokenizer": "^0.8", + "postcss": "^8", + "postcss-js": "^4", + "tailwindcss": "^3.1" + }, + "engines": { + "node": ">=16.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/daisyui" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1435,6 +1501,12 @@ "node": ">= 6" } }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -1699,6 +1771,24 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -3085,6 +3175,30 @@ "dev": true, "requires": {} }, + "@tailwindcss/typography": { + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz", + "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==", + "dev": true, + "requires": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + } + } + }, "@types/babel__core": { "version": "7.20.0", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz", @@ -3314,6 +3428,12 @@ } } }, + "colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true + }, "commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -3335,6 +3455,16 @@ "safe-buffer": "~5.1.1" } }, + "css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -3347,6 +3477,19 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", "dev": true }, + "daisyui": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.2.tgz", + "integrity": "sha512-yJZ1QjHUaL+r9BkquTdzNHb7KIgAJVFh0zbOXql2Wu0r7zx5qZNLxclhjN0WLoIpY+o2h/8lqXg7ijj8oTigOw==", + "dev": true, + "requires": { + "colord": "^2.9", + "css-selector-tokenizer": "^0.8", + "postcss": "^8", + "postcss-js": "^4", + "tailwindcss": "^3.1" + } + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -3440,6 +3583,12 @@ } } }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -3627,6 +3776,24 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, + "lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index c69e4f3..c75eb15 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,9 @@ "@formkit/auto-animate": "^0.8.0", "@solid-primitives/scheduled": "^1.4.1", "@solidjs/router": "^0.8.3", + "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.16", + "daisyui": "^3.9.2", "postcss": "^8.4.31", "solid-js": "^1.7.12", "tailwindcss": "^3.3.3", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b496044..c601e34 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,8 +1,9 @@ -import { Link, LinkProps, Route, Routes, useLocation } from '@solidjs/router'; +import { Link, LinkProps, Route, Routes } from '@solidjs/router'; import { Component, Match, Switch, onMount } from 'solid-js'; -import { SvgComputer, SvgDarkMode, SvgFlagDE, SvgFlagUS, SvgLightMode } from './assets/Icons'; +import { SvgComputer, SvgDarkMode, SvgLightMode } from './assets/Icons'; import logo from './assets/logo.svg'; import { CreatePage } from './pages/create'; +import { GameServersPage } from './pages/gameServers'; import { LoginPage } from './pages/login'; import { LogoutPage } from './pages/logout'; import { MatchPage } from './pages/match'; @@ -10,22 +11,12 @@ import { MatchEditPage } from './pages/matchEdit'; import { MatchesPage } from './pages/matches'; import { NotFoundPage } from './pages/notFound'; import { isLoggedIn } from './utils/fetcher'; -import { currentLocale, cycleLocale, t } from './utils/locale'; +import { t } from './utils/locale'; import { currentTheme, cycleDarkMode, updateDarkClasses } from './utils/theme'; -import { GameServersPage } from './pages/gameServers'; const NavLink = (props: LinkProps) => { - const l = useLocation(); - return ( - + {props.children} ); @@ -33,12 +24,12 @@ const NavLink = (props: LinkProps) => { const NavBar: Component = () => { return ( -