mirror of
https://github.com/pyrohost/pyrodactyl.git
synced 2026-04-06 04:01:58 +02:00
feat!: tailwind v4 migration
This commit is contained in:
he3als
26
package.json
26
package.json
@@ -1,4 +1,3 @@
|
||||
|
||||
{
|
||||
"name": "pyrodactyl",
|
||||
"version": "4.0.0-dev",
|
||||
@@ -10,6 +9,7 @@
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.16.0",
|
||||
"@codemirror/commands": "^6.3.3",
|
||||
"@codemirror/language": "^6.11.0",
|
||||
"@codemirror/language-data": "^6.5.1",
|
||||
"@codemirror/legacy-modes": "^6.4.0",
|
||||
"@codemirror/lint": "^6.8.2",
|
||||
@@ -17,10 +17,13 @@
|
||||
"@codemirror/state": "^6.4.1",
|
||||
"@codemirror/view": "^6.34.3",
|
||||
"@eslint/compat": "^1.2.2",
|
||||
"@eslint/eslintrc": "^3.3.1",
|
||||
"@eslint/js": "^9.26.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@headlessui/react": "^2.2.2",
|
||||
"@lezer/highlight": "^1.2.1",
|
||||
"@preact/signals-react": "^2.0.1",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-context-menu": "^2.1.5",
|
||||
@@ -30,6 +33,7 @@
|
||||
"@radix-ui/react-tabs": "^1.0.4",
|
||||
"@sentry/react": "^7.120.0",
|
||||
"@sentry/vite-plugin": "^2.16.1",
|
||||
"@tailwindcss/postcss": "^4.1.5",
|
||||
"@tanstack/react-virtual": "^3.2.1",
|
||||
"@xterm/addon-fit": "^0.10.0",
|
||||
"@xterm/addon-search": "^0.15.0",
|
||||
@@ -52,6 +56,7 @@
|
||||
"laravel-vite-plugin": "^1.0.2",
|
||||
"million": "^3.0.6",
|
||||
"pathe": "^1.1.2",
|
||||
"postcss-nesting": "^13.0.1",
|
||||
"qrcode.react": "^3.1.0",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
@@ -61,12 +66,10 @@
|
||||
"reaptcha": "^1.12.1",
|
||||
"sockette": "^2.0.6",
|
||||
"sonner": "^1.4.41",
|
||||
"styled-components": "^6.1.13",
|
||||
"styled-components": "^6.1.17",
|
||||
"swr": "^2.2.5",
|
||||
"tailwind-merge": "^2.2.2",
|
||||
"tailwind-scrollbar": "^3.1.0",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"tailwind-merge": "^3.2.0",
|
||||
"tailwindcss": "^4.1.5",
|
||||
"turbo": "^2.0.14",
|
||||
"uuid": "^9.0.1",
|
||||
"vite": "^5.4.11",
|
||||
@@ -96,14 +99,13 @@
|
||||
"eslint-plugin-prettier": "^5.1.3",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"postcss": "^8.4.38",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss-import": "^16.1.0",
|
||||
"postcss-nesting": "^12.1.1",
|
||||
"postcss-preset-env": "^9.5.5",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-tailwindcss": "^0.5.13",
|
||||
"tailwindcss-inner-border": "^0.2.0",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"tailwind-scrollbar": "^4.0.2",
|
||||
"ts-essentials": "^9.4.2",
|
||||
"tw-animate-css": "^1.2.9",
|
||||
"typescript": "^5.4.5",
|
||||
"vite-plugin-manifest-sri": "^0.2.0"
|
||||
},
|
||||
|
||||
5767
pnpm-lock.yaml
generated
5767
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,17 +1,13 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
// We want to make use of nesting following the CSS Nesting spec, and not the
|
||||
// SASS style nesting.
|
||||
//
|
||||
// @see https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
|
||||
require('tailwindcss/nesting')(require('postcss-nesting')),
|
||||
require('tailwindcss'),
|
||||
require('@tailwindcss/postcss'),
|
||||
require('autoprefixer'),
|
||||
require('postcss-preset-env')({
|
||||
features: {
|
||||
'nesting-rules': false,
|
||||
},
|
||||
}),
|
||||
// Breaks Tailwind V4?
|
||||
// require('postcss-preset-env')({
|
||||
// features: {
|
||||
// 'nesting-rules': false,
|
||||
// },
|
||||
// }),
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@@ -1,3 +1,300 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
@plugin 'tailwind-scrollbar';
|
||||
|
||||
@theme {
|
||||
--font-jakarta: 'Plus Jakarta Sans', sans-serif;
|
||||
|
||||
--color-inherit: inherit;
|
||||
--color-current: currentColor;
|
||||
--color-transparent: transparent;
|
||||
--color-black: #000000;
|
||||
--color-white: #fff;
|
||||
|
||||
--color-slate-50: #f8fafc;
|
||||
--color-slate-100: #f1f5f9;
|
||||
--color-slate-200: #e2e8f0;
|
||||
--color-slate-300: #cbd5e1;
|
||||
--color-slate-400: #94a3b8;
|
||||
--color-slate-500: #64748b;
|
||||
--color-slate-600: #475569;
|
||||
--color-slate-700: #334155;
|
||||
--color-slate-800: #1e293b;
|
||||
--color-slate-900: #0f172a;
|
||||
--color-slate-950: #020617;
|
||||
|
||||
--color-gray-50: #f9fafb;
|
||||
--color-gray-100: #f3f4f6;
|
||||
--color-gray-200: #e5e7eb;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
--color-gray-950: #030712;
|
||||
|
||||
--color-zinc-50: #fafafa;
|
||||
--color-zinc-100: #f4f4f5;
|
||||
--color-zinc-200: #e4e4e7;
|
||||
--color-zinc-300: #d4d4d8;
|
||||
--color-zinc-400: #a1a1aa;
|
||||
--color-zinc-500: #71717a;
|
||||
--color-zinc-600: #52525b;
|
||||
--color-zinc-700: #3f3f46;
|
||||
--color-zinc-800: #27272a;
|
||||
--color-zinc-900: #18181b;
|
||||
--color-zinc-950: #09090b;
|
||||
|
||||
--color-neutral-50: #fafafa;
|
||||
--color-neutral-100: #f5f5f5;
|
||||
--color-neutral-200: #e5e5e5;
|
||||
--color-neutral-300: #d4d4d4;
|
||||
--color-neutral-400: #a3a3a3;
|
||||
--color-neutral-500: #737373;
|
||||
--color-neutral-600: #525252;
|
||||
--color-neutral-700: #404040;
|
||||
--color-neutral-800: #262626;
|
||||
--color-neutral-900: #171717;
|
||||
--color-neutral-950: #0a0a0a;
|
||||
|
||||
--color-stone-50: #fafaf9;
|
||||
--color-stone-100: #f5f5f4;
|
||||
--color-stone-200: #e7e5e4;
|
||||
--color-stone-300: #d6d3d1;
|
||||
--color-stone-400: #a8a29e;
|
||||
--color-stone-500: #78716c;
|
||||
--color-stone-600: #57534e;
|
||||
--color-stone-700: #44403c;
|
||||
--color-stone-800: #292524;
|
||||
--color-stone-900: #1c1917;
|
||||
--color-stone-950: #0c0a09;
|
||||
|
||||
--color-red-50: #fef2f2;
|
||||
--color-red-100: #fee2e2;
|
||||
--color-red-200: #fecaca;
|
||||
--color-red-300: #fca5a5;
|
||||
--color-red-400: #f87171;
|
||||
--color-red-500: #ef4444;
|
||||
--color-red-600: #dc2626;
|
||||
--color-red-700: #b91c1c;
|
||||
--color-red-800: #991b1b;
|
||||
--color-red-900: #7f1d1d;
|
||||
--color-red-950: #450a0a;
|
||||
|
||||
--color-orange-50: #fff7ed;
|
||||
--color-orange-100: #ffedd5;
|
||||
--color-orange-200: #fed7aa;
|
||||
--color-orange-300: #fdba74;
|
||||
--color-orange-400: #fb923c;
|
||||
--color-orange-500: #f97316;
|
||||
--color-orange-600: #ea580c;
|
||||
--color-orange-700: #c2410c;
|
||||
--color-orange-800: #9a3412;
|
||||
--color-orange-900: #7c2d12;
|
||||
--color-orange-950: #431407;
|
||||
|
||||
--color-amber-50: #fffbeb;
|
||||
--color-amber-100: #fef3c7;
|
||||
--color-amber-200: #fde68a;
|
||||
--color-amber-300: #fcd34d;
|
||||
--color-amber-400: #fbbf24;
|
||||
--color-amber-500: #f59e0b;
|
||||
--color-amber-600: #d97706;
|
||||
--color-amber-700: #b45309;
|
||||
--color-amber-800: #92400e;
|
||||
--color-amber-900: #78350f;
|
||||
--color-amber-950: #451a03;
|
||||
|
||||
--color-yellow-50: #fefce8;
|
||||
--color-yellow-100: #fef9c3;
|
||||
--color-yellow-200: #fef08a;
|
||||
--color-yellow-300: #fde047;
|
||||
--color-yellow-400: #facc15;
|
||||
--color-yellow-500: #eab308;
|
||||
--color-yellow-600: #ca8a04;
|
||||
--color-yellow-700: #a16207;
|
||||
--color-yellow-800: #854d0e;
|
||||
--color-yellow-900: #713f12;
|
||||
--color-yellow-950: #422006;
|
||||
|
||||
--color-lime-50: #f7fee7;
|
||||
--color-lime-100: #ecfccb;
|
||||
--color-lime-200: #d9f99d;
|
||||
--color-lime-300: #bef264;
|
||||
--color-lime-400: #a3e635;
|
||||
--color-lime-500: #84cc16;
|
||||
--color-lime-600: #65a30d;
|
||||
--color-lime-700: #4d7c0f;
|
||||
--color-lime-800: #3f6212;
|
||||
--color-lime-900: #365314;
|
||||
--color-lime-950: #1a2e05;
|
||||
|
||||
--color-green-50: #f0fdf4;
|
||||
--color-green-100: #dcfce7;
|
||||
--color-green-200: #bbf7d0;
|
||||
--color-green-300: #86efac;
|
||||
--color-green-400: #4ade80;
|
||||
--color-green-500: #22c55e;
|
||||
--color-green-600: #16a34a;
|
||||
--color-green-700: #15803d;
|
||||
--color-green-800: #166534;
|
||||
--color-green-900: #14532d;
|
||||
--color-green-950: #052e16;
|
||||
|
||||
--color-emerald-50: #ecfdf5;
|
||||
--color-emerald-100: #d1fae5;
|
||||
--color-emerald-200: #a7f3d0;
|
||||
--color-emerald-300: #6ee7b7;
|
||||
--color-emerald-400: #34d399;
|
||||
--color-emerald-500: #10b981;
|
||||
--color-emerald-600: #059669;
|
||||
--color-emerald-700: #047857;
|
||||
--color-emerald-800: #065f46;
|
||||
--color-emerald-900: #064e3b;
|
||||
--color-emerald-950: #022c22;
|
||||
|
||||
--color-teal-50: #f0fdfa;
|
||||
--color-teal-100: #ccfbf1;
|
||||
--color-teal-200: #99f6e4;
|
||||
--color-teal-300: #5eead4;
|
||||
--color-teal-400: #2dd4bf;
|
||||
--color-teal-500: #14b8a6;
|
||||
--color-teal-600: #0d9488;
|
||||
--color-teal-700: #0f766e;
|
||||
--color-teal-800: #115e59;
|
||||
--color-teal-900: #134e4a;
|
||||
--color-teal-950: #042f2e;
|
||||
|
||||
--color-cyan-50: #ecfeff;
|
||||
--color-cyan-100: #cffafe;
|
||||
--color-cyan-200: #a5f3fc;
|
||||
--color-cyan-300: #67e8f9;
|
||||
--color-cyan-400: #22d3ee;
|
||||
--color-cyan-500: #06b6d4;
|
||||
--color-cyan-600: #0891b2;
|
||||
--color-cyan-700: #0e7490;
|
||||
--color-cyan-800: #155e75;
|
||||
--color-cyan-900: #164e63;
|
||||
--color-cyan-950: #083344;
|
||||
|
||||
--color-sky-50: #f0f9ff;
|
||||
--color-sky-100: #e0f2fe;
|
||||
--color-sky-200: #bae6fd;
|
||||
--color-sky-300: #7dd3fc;
|
||||
--color-sky-400: #38bdf8;
|
||||
--color-sky-500: #0ea5e9;
|
||||
--color-sky-600: #0284c7;
|
||||
--color-sky-700: #0369a1;
|
||||
--color-sky-800: #075985;
|
||||
--color-sky-900: #0c4a6e;
|
||||
--color-sky-950: #082f49;
|
||||
|
||||
--color-blue-50: #eff6ff;
|
||||
--color-blue-100: #dbeafe;
|
||||
--color-blue-200: #bfdbfe;
|
||||
--color-blue-300: #93c5fd;
|
||||
--color-blue-400: #60a5fa;
|
||||
--color-blue-500: #3b82f6;
|
||||
--color-blue-600: #2563eb;
|
||||
--color-blue-700: #1d4ed8;
|
||||
--color-blue-800: #1e40af;
|
||||
--color-blue-900: #1e3a8a;
|
||||
--color-blue-950: #172554;
|
||||
|
||||
--color-indigo-50: #eef2ff;
|
||||
--color-indigo-100: #e0e7ff;
|
||||
--color-indigo-200: #c7d2fe;
|
||||
--color-indigo-300: #a5b4fc;
|
||||
--color-indigo-400: #818cf8;
|
||||
--color-indigo-500: #6366f1;
|
||||
--color-indigo-600: #4f46e5;
|
||||
--color-indigo-700: #4338ca;
|
||||
--color-indigo-800: #3730a3;
|
||||
--color-indigo-900: #312e81;
|
||||
--color-indigo-950: #1e1b4b;
|
||||
|
||||
--color-violet-50: #f5f3ff;
|
||||
--color-violet-100: #ede9fe;
|
||||
--color-violet-200: #ddd6fe;
|
||||
--color-violet-300: #c4b5fd;
|
||||
--color-violet-400: #a78bfa;
|
||||
--color-violet-500: #8b5cf6;
|
||||
--color-violet-600: #7c3aed;
|
||||
--color-violet-700: #6d28d9;
|
||||
--color-violet-800: #5b21b6;
|
||||
--color-violet-900: #4c1d95;
|
||||
--color-violet-950: #2e1065;
|
||||
|
||||
--color-purple-50: #faf5ff;
|
||||
--color-purple-100: #f3e8ff;
|
||||
--color-purple-200: #e9d5ff;
|
||||
--color-purple-300: #d8b4fe;
|
||||
--color-purple-400: #c084fc;
|
||||
--color-purple-500: #a855f7;
|
||||
--color-purple-600: #9333ea;
|
||||
--color-purple-700: #7e22ce;
|
||||
--color-purple-800: #6b21a8;
|
||||
--color-purple-900: #581c87;
|
||||
--color-purple-950: #3b0764;
|
||||
|
||||
--color-fuchsia-50: #fdf4ff;
|
||||
--color-fuchsia-100: #fae8ff;
|
||||
--color-fuchsia-200: #f5d0fe;
|
||||
--color-fuchsia-300: #f0abfc;
|
||||
--color-fuchsia-400: #e879f9;
|
||||
--color-fuchsia-500: #d946ef;
|
||||
--color-fuchsia-600: #c026d3;
|
||||
--color-fuchsia-700: #a21caf;
|
||||
--color-fuchsia-800: #86198f;
|
||||
--color-fuchsia-900: #701a75;
|
||||
--color-fuchsia-950: #4a044e;
|
||||
|
||||
--color-pink-50: #fdf2f8;
|
||||
--color-pink-100: #fce7f3;
|
||||
--color-pink-200: #fbcfe8;
|
||||
--color-pink-300: #f9a8d4;
|
||||
--color-pink-400: #f472b6;
|
||||
--color-pink-500: #ec4899;
|
||||
--color-pink-600: #db2777;
|
||||
--color-pink-700: #be185d;
|
||||
--color-pink-800: #9d174d;
|
||||
--color-pink-900: #831843;
|
||||
--color-pink-950: #500724;
|
||||
|
||||
--color-rose-50: #fff1f2;
|
||||
--color-rose-100: #ffe4e6;
|
||||
--color-rose-200: #fecdd3;
|
||||
--color-rose-300: #fda4af;
|
||||
--color-rose-400: #fb7185;
|
||||
--color-rose-500: #f43f5e;
|
||||
--color-rose-600: #e11d48;
|
||||
--color-rose-700: #be123c;
|
||||
--color-rose-800: #9f1239;
|
||||
--color-rose-900: #881337;
|
||||
--color-rose-950: #4c0519;
|
||||
|
||||
--color-brand-grad: radial-gradient(109.26% 109.26% at 49.83% 13.37%, #ff343c 0%, #f06f53 100%);
|
||||
--color-brand: #fa4e49;
|
||||
|
||||
--transition-duration-250: 250ms;
|
||||
}
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,7 +94,7 @@ export default () => {
|
||||
<Field id='email' label={'Email'} name={'email'} type={'email'} />
|
||||
<div className={`mt-6`}>
|
||||
<Button
|
||||
className={`w-full mt-4 rounded-full bg-brand border-0 ring-0 outline-none capitalize font-bold text-sm py-2`}
|
||||
className={`w-full mt-4 rounded-full bg-brand border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2`}
|
||||
type={'submit'}
|
||||
size={'xlarge'}
|
||||
isLoading={isSubmitting}
|
||||
@@ -123,7 +123,7 @@ export default () => {
|
||||
<div aria-hidden className='my-8 bg-[#ffffff33] min-h-[1px]'></div>
|
||||
|
||||
<div
|
||||
className={`text-center w-full rounded-lg bg-[#ffffff33] border-0 ring-0 outline-none capitalize font-bold text-sm py-2 `}
|
||||
className={`text-center w-full rounded-lg bg-[#ffffff33] border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2 `}
|
||||
>
|
||||
<Link
|
||||
to={'/auth/login'}
|
||||
|
||||
@@ -33,7 +33,7 @@ function LoginCheckpointContainer() {
|
||||
const [isMissingDevice, setIsMissingDevice] = useState(false);
|
||||
|
||||
return (
|
||||
<ContentBox className='p-12 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl'>
|
||||
<ContentBox className='p-12 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-xs rounded-xl'>
|
||||
<LoginFormContainer className={`w-full flex`}>
|
||||
<Link to='/'>
|
||||
<div className='flex h-12 mb-4 items-center w-full'>
|
||||
@@ -61,7 +61,7 @@ function LoginCheckpointContainer() {
|
||||
</div>
|
||||
<div className={`mt-6`}>
|
||||
<Button
|
||||
className='w-full mt-4 rounded-full bg-brand border-0 ring-0 outline-none capitalize font-bold text-sm py-2'
|
||||
className='w-full mt-4 rounded-full bg-brand border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2'
|
||||
size={'xlarge'}
|
||||
type={'submit'}
|
||||
disabled={isSubmitting}
|
||||
@@ -73,7 +73,7 @@ function LoginCheckpointContainer() {
|
||||
<div aria-hidden className='my-8 bg-[#ffffff33] min-h-[1px]'></div>
|
||||
|
||||
<div
|
||||
className={`mt-6 text-center w-full rounded-t-lg bg-[#ffffff33] border-0 ring-0 outline-none capitalize font-bold text-sm py-2 mb-2 `}
|
||||
className={`mt-6 text-center w-full rounded-t-lg bg-[#ffffff33] border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2 mb-2 `}
|
||||
>
|
||||
<span
|
||||
onClick={() => {
|
||||
@@ -87,7 +87,7 @@ function LoginCheckpointContainer() {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`text-center w-full rounded-b-lg bg-[#ffffff33] border-0 ring-0 outline-none capitalize font-bold text-sm py-2 `}
|
||||
className={`text-center w-full rounded-b-lg bg-[#ffffff33] border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2 `}
|
||||
>
|
||||
<Link
|
||||
to={'/auth/login'}
|
||||
|
||||
@@ -131,7 +131,7 @@ function LoginContainer() {
|
||||
</div>
|
||||
<div className={`mt-6`}>
|
||||
<Button
|
||||
className={`relative mt-4 w-full rounded-full bg-brand border-0 ring-0 outline-none capitalize font-bold text-sm py-2`}
|
||||
className={`relative mt-4 w-full rounded-full bg-brand border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2`}
|
||||
type={'submit'}
|
||||
size={'xlarge'}
|
||||
isLoading={isSubmitting}
|
||||
|
||||
@@ -98,7 +98,7 @@ function ResetPasswordContainer() {
|
||||
</div>
|
||||
<div className={`mt-6`}>
|
||||
<Button
|
||||
className='w-full mt-4 rounded-full bg-brand border-0 ring-0 outline-none capitalize font-bold text-sm py-2'
|
||||
className='w-full mt-4 rounded-full bg-brand border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2'
|
||||
size={'xlarge'}
|
||||
type={'submit'}
|
||||
disabled={isSubmitting}
|
||||
@@ -110,7 +110,7 @@ function ResetPasswordContainer() {
|
||||
<div aria-hidden className='my-8 bg-[#ffffff33] min-h-[1px]'></div>
|
||||
|
||||
<div
|
||||
className={`text-center w-full rounded-lg bg-[#ffffff33] border-0 ring-0 outline-none capitalize font-bold text-sm py-2 `}
|
||||
className={`text-center w-full rounded-lg bg-[#ffffff33] border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2 `}
|
||||
>
|
||||
<Link
|
||||
to={'/auth/login'}
|
||||
|
||||
@@ -80,7 +80,7 @@ export default () => {
|
||||
</p>
|
||||
</div>
|
||||
<p className='text-sm text-gray-600 hidden md:block'>
|
||||
<code className='font-mono py-1 px-2 bg-gray-800 rounded text-white'>
|
||||
<code className='font-mono py-1 px-2 bg-gray-800 rounded-sm text-white'>
|
||||
{key.identifier}
|
||||
</code>
|
||||
</p>
|
||||
|
||||
@@ -15,12 +15,12 @@ const ApiKeyModal = ({ apiKey }: Props) => {
|
||||
const { dismiss } = useContext(ModalContext);
|
||||
|
||||
return (
|
||||
<div className='p-6 space-y-6 max-w-lg mx-auto rounded-lg shadow-lg '>
|
||||
<div className='p-6 space-y-6 max-w-lg mx-auto rounded-lg shadow-lg'>
|
||||
{/* Flash message section */}
|
||||
<FlashMessageRender byKey='account' />
|
||||
|
||||
{/* Modal Header */}
|
||||
<p className='text-sm text-white-600 mt-2 '>
|
||||
<p className='text-sm text-white-600 mt-2'>
|
||||
The API key you have requested is shown below. Please store it in a safe place, as it will not be shown
|
||||
again.
|
||||
</p>
|
||||
@@ -42,7 +42,7 @@ const ApiKeyModal = ({ apiKey }: Props) => {
|
||||
<Button
|
||||
type='button'
|
||||
onClick={() => dismiss()}
|
||||
className='bg-red-600 text-white hover:bg-red-700 px-6 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500'
|
||||
className='bg-red-600 text-white hover:bg-red-700 px-6 py-2 rounded-md focus:outline-hidden focus:ring-2 focus:ring-gray-500 cursor-pointer'
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
|
||||
@@ -75,7 +75,7 @@ export default () => {
|
||||
<div className='flex gap-4'>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className='flex items-center gap-2 font-bold text-sm px-3 py-1 rounded-md bg-[#ffffff11] hover:bg-[#ffffff22] transition hover:duration-0'>
|
||||
<button className='flex items-center gap-2 font-bold text-sm px-3 py-1 rounded-md bg-[#ffffff11] hover:bg-[#ffffff22] transition hover:duration-0 cursor-pointer'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='20'
|
||||
@@ -106,7 +106,7 @@ export default () => {
|
||||
</svg>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='flex flex-col gap-1 z-[99999]' sideOffset={8}>
|
||||
<DropdownMenuContent className='flex flex-col gap-1 z-99999' sideOffset={8}>
|
||||
<div className='text-xs opacity-50 text-center'>More filters coming soon!</div>
|
||||
{rootAdmin && (
|
||||
<DropdownMenuItem
|
||||
@@ -198,7 +198,7 @@ export default () => {
|
||||
}}
|
||||
>
|
||||
<ServerRow
|
||||
className='!items-start flex-col w-full gap-4 [&>div~div]:w-full'
|
||||
className='items-start! flex-col w-full gap-4 [&>div~div]:w-full'
|
||||
key={server.uuid}
|
||||
server={server}
|
||||
/>
|
||||
|
||||
@@ -121,7 +121,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`h-full hidden sm:flex items-center justify-center bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-md w-fit whitespace-nowrap px-4 py-2 text-sm gap-4`}
|
||||
className={`h-full hidden sm:flex items-center justify-center bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-xs rounded-md w-fit whitespace-nowrap px-4 py-2 text-sm gap-4`}
|
||||
>
|
||||
{!stats || isSuspended ? (
|
||||
isSuspended ? (
|
||||
|
||||
@@ -28,7 +28,7 @@ export default ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
|
||||
>
|
||||
<Dialog.Icon position={'container'} type={'success'} />
|
||||
<CopyOnClick text={tokens.join('\n')} showInNotification={false}>
|
||||
<pre className={'bg-zinc-800 rounded p-2 mt-6'}>
|
||||
<pre className={'bg-zinc-800 rounded-sm p-2 mt-6'}>
|
||||
{grouped.map((value) => (
|
||||
<span key={value.join('_')} className={'block'}>
|
||||
{value[0]}
|
||||
|
||||
@@ -66,7 +66,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
|
||||
return (
|
||||
<form id={'enable-totp-form'} onSubmit={submit}>
|
||||
<FlashMessageRender byKey={'account:two-step'} />
|
||||
<div className={'flex items-center justify-center w-56 h-56 p-2 bg-zinc-50 shadow mx-auto mt-6'}>
|
||||
<div className={'flex items-center justify-center w-56 h-56 p-2 bg-zinc-50 shadow-sm mx-auto mt-6'}>
|
||||
{!token ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
||||
@@ -64,7 +64,7 @@ export default () => {
|
||||
</p>
|
||||
</div>
|
||||
<p className='text-sm text-gray-600 hidden md:block'>
|
||||
<code className='font-mono py-1 px-2 bg-gray-800 rounded text-white'>
|
||||
<code className='font-mono py-1 px-2 bg-gray-800 rounded-sm text-white'>
|
||||
SHA256: {key.fingerprint}
|
||||
</code>
|
||||
</p>
|
||||
|
||||
@@ -9,7 +9,7 @@ const Button = ({ className, ...props }: Props) => {
|
||||
return (
|
||||
<button
|
||||
className={clsx(
|
||||
'flex items-center justify-center h-8 px-4 text-sm font-medium text-white transition-colors duration-150 bg-gradient-to-b from-[#ffffff10] to-[#ffffff09] inner-border-[1px] inner-border-[#ffffff15] border border-transparent rounded-full shadow-sm hover:from-[#ffffff05] hover:to-[#ffffff04]',
|
||||
'flex items-center justify-center h-8 px-4 text-sm font-medium text-white transition-colors duration-150 bg-linear-to-b from-[#ffffff10] to-[#ffffff09] border border-[#ffffff15] rounded-full shadow-xs hover:from-[#ffffff05] hover:to-[#ffffff04] cursor-pointer',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'peer h-5 w-5 shrink-0 rounded-md border-2 border-[#ffffff66] shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[deepskyblue] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:text-primary-foreground',
|
||||
'peer h-5 w-5 shrink-0 rounded-md border-2 border-[#ffffff66] shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-[deepskyblue] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:text-primary-foreground',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -8,7 +8,7 @@ interface CodeProps {
|
||||
|
||||
export default ({ dark, className, children }: CodeProps) => (
|
||||
<code
|
||||
className={clsx('font-mono text-sm px-2 py-1 inline-block rounded w-fit', className, {
|
||||
className={clsx('font-mono text-sm px-2 py-1 inline-block rounded-sm w-fit', className, {
|
||||
'bg-zinc-900': !dark,
|
||||
'bg-zinc-900 text-zinc-100': dark,
|
||||
})}
|
||||
|
||||
@@ -11,7 +11,7 @@ type Props = Readonly<
|
||||
>;
|
||||
|
||||
const ContentBox = ({ title, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
|
||||
<div className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl' {...props}>
|
||||
<div className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-xs rounded-xl' {...props}>
|
||||
{title && <h2 className={`font-extrabold mb-4 text-2xl`}>{title}</h2>}
|
||||
{showFlashes && <FlashMessageRender byKey={typeof showFlashes === 'string' ? showFlashes : undefined} />}
|
||||
<div>
|
||||
|
||||
@@ -25,7 +25,7 @@ const ContextMenuSubTrigger = React.forwardRef<
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
||||
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
|
||||
inset && 'pl-8',
|
||||
className,
|
||||
)}
|
||||
@@ -44,7 +44,7 @@ const ContextMenuSubContent = React.forwardRef<
|
||||
<ContextMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,_rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-2xl p-2 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-2xl p-2 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -60,7 +60,7 @@ const ContextMenuContent = React.forwardRef<
|
||||
<ContextMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,_rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-2xl p-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-2xl p-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -78,7 +78,7 @@ const ContextMenuItem = React.forwardRef<
|
||||
<ContextMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'font-bold relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none transition focus:duration-0 focus:bg-[#ffffff33] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'font-bold relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-hidden transition focus:duration-0 focus:bg-[#ffffff33] data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
inset && 'pl-8',
|
||||
className,
|
||||
)}
|
||||
@@ -94,7 +94,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition focus:duration-0 focus:bg-[#ffffff33] focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition focus:duration-0 focus:bg-[#ffffff33] focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
@@ -117,7 +117,7 @@ const ContextMenuRadioItem = React.forwardRef<
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition focus:duration-0 focus:bg-[#ffffff33] focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition focus:duration-0 focus:bg-[#ffffff33] focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
|
||||
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
|
||||
inset && 'pl-8',
|
||||
className,
|
||||
)}
|
||||
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,_rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-2xl p-2 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-2xl p-2 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,_rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-[6px] p-2 shadow-md',
|
||||
'z-50 min-w-[14rem] overflow-hidden rounded-xl bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0.02)_100%)] backdrop-blur-[6px] p-2 shadow-md',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className,
|
||||
)}
|
||||
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'font-bold relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none transition focus:duration-0 focus:bg-[#ffffff33] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'font-bold relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-hidden transition focus:duration-0 focus:bg-[#ffffff33] data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
inset && 'pl-8',
|
||||
className,
|
||||
)}
|
||||
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition focus:duration-0 focus:bg-[#ffffff33] focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition focus:duration-0 focus:bg-[#ffffff33] focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition focus:duration-0 focus:bg-[#ffffff10] focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition focus:duration-0 focus:bg-[#ffffff10] focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -21,7 +21,7 @@ class ErrorBoundary extends Component<{}, State> {
|
||||
override render() {
|
||||
return this.state.hasError ? (
|
||||
<div className={`flex items-center justify-center w-full my-4`}>
|
||||
<div className={`flex items-center bg-neutral-900 rounded p-3 text-red-500`}>
|
||||
<div className={`flex items-center bg-neutral-900 rounded-sm p-3 text-red-500`}>
|
||||
<p className={`text-sm text-neutral-100`}>
|
||||
An error was encountered by the application while rendering this view. Try refreshing the page.
|
||||
</p>
|
||||
|
||||
@@ -21,7 +21,7 @@ const Field = forwardRef<HTMLInputElement, Props>(
|
||||
</label>
|
||||
)}
|
||||
<input
|
||||
className='px-4 py-2 rounded-lg outline-none bg-[#ffffff17] text-sm'
|
||||
className='px-4 py-2 rounded-lg outline-hidden bg-[#ffffff17] text-sm'
|
||||
id={id}
|
||||
{...field}
|
||||
{...props}
|
||||
|
||||
@@ -3,7 +3,7 @@ import styled from 'styled-components';
|
||||
const MainSidebar = styled.nav`
|
||||
width: 300px;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
shrink: 0;
|
||||
border-radius: 8px;
|
||||
overflow-x: hidden;
|
||||
padding: 32px;
|
||||
|
||||
@@ -97,7 +97,7 @@ const Modal: React.FC<ModalProps> = ({
|
||||
<>
|
||||
{showSpinnerOverlay && (
|
||||
<div
|
||||
className={`fixed inset-0 w-full h-full rounded flex items-center justify-center`}
|
||||
className={`fixed inset-0 w-full h-full rounded-sm flex items-center justify-center`}
|
||||
style={{ background: 'rgba(0,0,0,0.75)', zIndex: 9999 }}
|
||||
>
|
||||
<Spinner />
|
||||
@@ -121,12 +121,12 @@ const Modal: React.FC<ModalProps> = ({
|
||||
background:
|
||||
'radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.94) 100%)',
|
||||
}}
|
||||
className={'fixed inset-0 backdrop-blur-sm z-[9997]'}
|
||||
className={'fixed inset-0 backdrop-blur-xs z-9997'}
|
||||
/>
|
||||
<div className={'fixed inset-0 overflow-y-auto z-[9998]'}>
|
||||
<div className={'fixed inset-0 overflow-y-auto z-9998'}>
|
||||
<div
|
||||
ref={container}
|
||||
className={styles.container}
|
||||
className={styles.dialogContainer}
|
||||
onMouseDown={onContainerClick.bind(this, true)}
|
||||
onMouseUp={onContainerClick.bind(this, false)}
|
||||
>
|
||||
@@ -143,7 +143,7 @@ const Modal: React.FC<ModalProps> = ({
|
||||
{dismissable && (
|
||||
<button
|
||||
onClick={onDismissed}
|
||||
className={'opacity-45 hover:opacity-100 p-6 -m-6'}
|
||||
className={'opacity-45 hover:opacity-100 p-6 -m-6 cursor-pointer'}
|
||||
>
|
||||
<HugeIconsX fill='currentColor' />
|
||||
</button>
|
||||
|
||||
@@ -45,7 +45,7 @@ function Pagination<T>({ data: { items, pagination }, onPageSelect, children }:
|
||||
{pages.length > 1 && (
|
||||
<div className={`flex justify-center mt-4`}>
|
||||
<div
|
||||
className={`flex justify-center gap-3 p-[4px] w-fit bg-gradient-to-b from-[#ffffff10] to-[#ffffff09] inner-border-[1px] inner-border-[#00000017] rounded-md`}
|
||||
className={`flex justify-center gap-3 p-[4px] w-fit bg-linear-to-b from-[#ffffff10] to-[#ffffff09] border border-[#00000017] rounded-md`}
|
||||
>
|
||||
<Block
|
||||
isSecondary
|
||||
|
||||
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
'peer inline-flex h-7 w-14 shrink-0 cursor-pointer items-center rounded-full p-px transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-gradient-to-b from-[#ffffff0f] to-[#ffffff0a]',
|
||||
'peer inline-flex h-7 w-14 shrink-0 cursor-pointer items-center rounded-full p-px transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-linear-to-b from-[#ffffff0f] to-[#ffffff0a]',
|
||||
'data-[state=checked]:bg-[#fa4f49f5]',
|
||||
className,
|
||||
)}
|
||||
@@ -20,7 +20,7 @@ const Switch = React.forwardRef<
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
'pointer-events-none block h-6 w-6 rounded-full bg-gradient-to-br from-[#ffffffcf] to-[#ffffffa1] inner-border-[1px] shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0.5',
|
||||
'pointer-events-none block h-6 w-6 rounded-full bg-linear-to-br from-[#ffffffcf] to-[#ffffffa1] border shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0.5',
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
|
||||
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#ffffff23] data-[state=active]:text-[#ffffff] data-[state=active]:shadow',
|
||||
'inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#ffffff23] data-[state=active]:text-[#ffffff] data-[state=active]:shadow-sm',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
'mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
'flex h-8 w-full rounded-full bg-transparent bg-gradient-to-b from-[#ffffff10] to-[#ffffff09] inner-border-[1px] inner-border-[#ffffff15] px-3 py-2 text-sm ring-offset-[#ffffff15] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ffffff15] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex h-8 w-full rounded-full bg-transparent bg-linear-to-b from-[#ffffff10] to-[#ffffff09] border border-[#ffffff15] px-3 py-2 text-sm ring-offset-[#ffffff15] placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[#ffffff15] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -14,7 +14,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
|
||||
<Dialog open={open} onClose={() => setOpen(false)} hideCloseIcon title={'Metadata'}>
|
||||
<pre
|
||||
className={
|
||||
'bg-zinc-900 rounded p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
|
||||
'bg-zinc-900 rounded-sm p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
|
||||
}
|
||||
>
|
||||
{formatObjectToIdentString(meta)}
|
||||
@@ -26,7 +26,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
|
||||
<button
|
||||
aria-describedby={'View additional event metadata'}
|
||||
className={
|
||||
'p-2 transition-colors duration-100 text-zinc-400 group-hover:text-zinc-300 group-hover:hover:text-zinc-50'
|
||||
'p-2 transition-colors duration-100 text-zinc-400 group-hover:text-zinc-300 hover:group-hover:text-zinc-50 cursor-pointer'
|
||||
}
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
@import '../../../assets/tailwind.css';
|
||||
|
||||
.icons {
|
||||
@apply flex space-x-1 mx-2 transition-colors duration-100 text-zinc-400;
|
||||
@apply mx-2 flex space-x-1 text-zinc-400 transition-colors duration-100;
|
||||
|
||||
& svg {
|
||||
@apply px-1 py-px cursor-pointer hover:text-zinc-50 h-5 w-auto;
|
||||
@apply h-5 w-auto cursor-pointer px-1 py-px hover:text-zinc-50;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
@apply mt-1 text-sm break-words pr-4;
|
||||
@apply mt-1 pr-4 text-sm break-words;
|
||||
|
||||
& strong {
|
||||
@apply text-zinc-50 font-semibold break-all;
|
||||
@apply font-semibold break-all text-zinc-50;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ export default ({ type, className, children }: AlertProps) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'flex items-center border-l-8 text-zinc-50 rounded-md shadow px-4 py-3',
|
||||
'flex items-center border-l-8 text-zinc-50 rounded-md shadow-sm px-4 py-3',
|
||||
{
|
||||
['border-red-500 bg-red-500/25']: type === 'danger',
|
||||
['border-yellow-500 bg-yellow-500/25']: type === 'warning',
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
/* @import "../../../../scripts/assets/tailwind.css'; */
|
||||
@import '../../../assets/tailwind.css';
|
||||
|
||||
.button {
|
||||
@apply inline-flex items-center justify-center px-4 py-2;
|
||||
@apply inline-flex cursor-pointer items-center justify-center px-4 py-2;
|
||||
@apply rounded-xl text-sm font-bold transition-all duration-100;
|
||||
@apply focus:ring-[3px] focus:ring-opacity-50 focus:ring-offset-2 focus:ring-offset-zinc-700;
|
||||
/* @apply focus:ring-3 focus:ring-zinc-700/50 focus:ring-offset-2 focus:ring-offset-zinc-700; */
|
||||
|
||||
/* Sizing Controls */
|
||||
&.small {
|
||||
@@ -13,7 +16,7 @@
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
@apply bg-white bg-opacity-10;
|
||||
@apply bg-white/10;
|
||||
|
||||
&:disabled {
|
||||
background: transparent !important;
|
||||
@@ -35,10 +38,11 @@
|
||||
|
||||
.primary {
|
||||
@apply bg-brand text-blue-50;
|
||||
@apply hover:bg-brand/70 focus:ring-brand/50 focus:ring-opacity-75 active:bg-brand;
|
||||
@apply hover:bg-brand/70 active:bg-brand;
|
||||
/* @apply hover:bg-brand/70 focus:ring-brand/50 focus:ring-opacity-75 active:bg-brand; */
|
||||
|
||||
&.secondary {
|
||||
@apply hover:bg-opacity-10 active:bg-brand;
|
||||
@apply hover:bg-brand/10 active:bg-brand;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@@ -48,7 +52,8 @@
|
||||
|
||||
.text {
|
||||
@apply bg-zinc-700 text-zinc-50;
|
||||
@apply hover:bg-zinc-600 focus:ring-zinc-300 focus:ring-opacity-50 active:bg-zinc-600;
|
||||
@apply hover:bg-zinc-600 active:bg-zinc-600;
|
||||
/* @apply focus:ring-opacity-50 hover:bg-zinc-600 focus:ring-zinc-300 active:bg-zinc-600; */
|
||||
|
||||
&.secondary {
|
||||
@apply hover:bg-zinc-500 active:bg-zinc-500;
|
||||
@@ -61,7 +66,8 @@
|
||||
|
||||
.danger {
|
||||
@apply bg-red-600 text-zinc-50;
|
||||
@apply hover:bg-red-500 focus:ring-red-400 focus:ring-opacity-75 active:bg-red-500;
|
||||
@apply hover:bg-red-500 active:bg-red-500;
|
||||
/* @apply focus:ring-opacity-75 hover:bg-red-500 focus:ring-red-400 active:bg-red-500; */
|
||||
|
||||
&.secondary {
|
||||
@apply hover:bg-red-600 active:bg-red-600;
|
||||
|
||||
@@ -77,12 +77,12 @@ export default ({
|
||||
background:
|
||||
'radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.94) 100%)',
|
||||
}}
|
||||
className={'fixed inset-0 backdrop-blur-sm z-[9997]'}
|
||||
className={'fixed inset-0 backdrop-blur-xs z-9997'}
|
||||
/>
|
||||
<div className={'fixed inset-0 overflow-y-auto z-[9998]'}>
|
||||
<div className={'fixed inset-0 overflow-y-auto z-9998'}>
|
||||
<div
|
||||
ref={container}
|
||||
className={styles.container}
|
||||
className={styles.dialogContainer}
|
||||
onMouseDown={onContainerClick.bind(this, true)}
|
||||
onMouseUp={onContainerClick.bind(this, false)}
|
||||
>
|
||||
@@ -116,7 +116,7 @@ export default ({
|
||||
{/* Keep this below the other buttons so that it isn't the default focus if they're present. */}
|
||||
{!hideCloseIcon && (
|
||||
<div className={'absolute right-0 top-0 m-4 p-2 opacity-45 hover:opacity-100'}>
|
||||
<button onClick={onClose}>
|
||||
<button onClick={onClose} className='cursor-pointer'>
|
||||
<HugeIconsX fill='currentColor' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,24 @@
|
||||
.container {
|
||||
@import '../../../assets/tailwind.css';
|
||||
|
||||
.dialogContainer {
|
||||
@apply flex min-h-full items-center justify-center p-4 text-center;
|
||||
}
|
||||
|
||||
.panel {
|
||||
@apply relative border-[1px] border-[#ffffff07] rounded-2xl max-w-xl w-full mx-auto text-left shadow-2xl backdrop-blur-3xl;
|
||||
@apply relative mx-auto w-full max-w-xl rounded-2xl border-[1px] border-[#ffffff07] text-left shadow-2xl backdrop-blur-3xl;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.title {
|
||||
@apply text-2xl tracking-tight font-extrabold mb-2 pr-4;
|
||||
@apply mb-2 pr-4 text-2xl font-extrabold tracking-tight;
|
||||
}
|
||||
|
||||
.close_icon {
|
||||
@apply w-5 h-5 group-hover:rotate-90 transition-transform duration-100;
|
||||
@apply h-5 w-5 transition-transform duration-100 group-hover:rotate-90;
|
||||
}
|
||||
|
||||
.dialog_icon {
|
||||
@apply flex items-center justify-center w-10 h-10 rounded-full mr-4;
|
||||
@apply mr-4 flex h-10 w-10 items-center justify-center rounded-full;
|
||||
|
||||
&.danger {
|
||||
@apply bg-red-500 text-red-50;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '../../../assets/tailwind.css';
|
||||
|
||||
.checkbox_input {
|
||||
@apply h-4 w-4 rounded-sm border-zinc-500 bg-zinc-600 text-zinc-500;
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ interface Props {
|
||||
function FadeTransition({ children, duration, ...props }: Props) {
|
||||
const [enterDuration, exitDuration] = Array.isArray(duration)
|
||||
? duration
|
||||
: !duration
|
||||
: duration!
|
||||
? ['duration-200', 'duration-100']
|
||||
: [duration, duration];
|
||||
|
||||
|
||||
@@ -111,7 +111,7 @@ function WebsocketHandler() {
|
||||
return error ? (
|
||||
<FadeTransition duration='duration-150' show>
|
||||
<div
|
||||
className={`flex items-center px-4 rounded-full fixed w-fit mx-auto left-0 right-0 top-4 bg-red-500 py-2 z-[9999]`}
|
||||
className={`flex items-center px-4 rounded-full fixed w-fit mx-auto left-0 right-0 top-4 bg-red-500 py-2 z-9999`}
|
||||
>
|
||||
{error === 'connecting' ? (
|
||||
<>
|
||||
|
||||
@@ -136,7 +136,7 @@ export default ({ backup }: Props) => {
|
||||
Your server will be stopped. You will not be able to control the power state, access the file
|
||||
manager, or create additional backups until completed.
|
||||
</p>
|
||||
<p className={`mt-4 -mb-2 bg-zinc-700 p-3 rounded`}>
|
||||
<p className={`mt-4 -mb-2 bg-zinc-700 p-3 rounded-sm`}>
|
||||
<label htmlFor={'restore_truncate'} className={`text-base flex items-center cursor-pointer`}>
|
||||
<Input
|
||||
type={'checkbox'}
|
||||
@@ -163,25 +163,25 @@ export default ({ backup }: Props) => {
|
||||
<ContextMenuContent className='flex flex-col gap-1'>
|
||||
<Can action={'backup.download'}>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={doDownload}>
|
||||
<HugeIconsFileDownload className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsFileDownload className='h-4! w-4!' fill='currentColor' />
|
||||
Download Backup
|
||||
</ContextMenuItem>
|
||||
</Can>
|
||||
<Can action={'backup.restore'}>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={() => setModal('restore')}>
|
||||
<HugeIconsFileDownload className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsFileDownload className='h-4! w-4!' fill='currentColor' />
|
||||
Restore Backup
|
||||
</ContextMenuItem>
|
||||
</Can>
|
||||
<Can action={'backup.delete'}>
|
||||
<>
|
||||
<ContextMenuItem className='flex gap-2' onClick={onLockToggle}>
|
||||
<HugeIconsFileSecurity className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsFileSecurity className='h-4! w-4!' fill='currentColor' />
|
||||
{backup.isLocked ? 'Unlock' : 'Lock'}
|
||||
</ContextMenuItem>
|
||||
{!backup.isLocked && (
|
||||
<ContextMenuItem className='flex gap-2' onSelect={() => setModal('delete')}>
|
||||
<HugeIconsDelete className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsDelete className='h-4! w-4!' fill='currentColor' />
|
||||
Delete Backup
|
||||
</ContextMenuItem>
|
||||
)}
|
||||
@@ -191,7 +191,7 @@ export default ({ backup }: Props) => {
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setModal('delete')}
|
||||
className={`text-zinc-200 transition-colors duration-150 hover:text-zinc-100 p-2`}
|
||||
className={`text-zinc-200 transition-colors duration-150 hover:text-zinc-100 p-2 cursor-pointer`}
|
||||
>
|
||||
Delete Backup
|
||||
</button>
|
||||
|
||||
@@ -51,7 +51,7 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
|
||||
>
|
||||
<FormikField
|
||||
as={Textarea}
|
||||
className='px-4 py-2 rounded-lg outline-none bg-[#ffffff17] text-sm'
|
||||
className='px-4 py-2 rounded-lg outline-hidden bg-[#ffffff17] text-sm'
|
||||
name={'ignored'}
|
||||
rows={6}
|
||||
/>
|
||||
@@ -122,7 +122,7 @@ export default () => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
New Backup
|
||||
|
||||
@@ -9,7 +9,7 @@ interface ChartBlockProps {
|
||||
}
|
||||
|
||||
export default ({ title, legend, children }: ChartBlockProps) => (
|
||||
<div className={clsx(styles.chart_container, 'group !p-8')}>
|
||||
<div className={clsx(styles.chart_container, 'group p-8!')}>
|
||||
<div className={'flex items-center justify-between mb-4'}>
|
||||
<h3 className={'font-extrabold text-sm'}>{title}</h3>
|
||||
{legend && <p className={'text-sm flex items-center'}>{legend}</p>}
|
||||
|
||||
@@ -206,7 +206,11 @@ export default () => {
|
||||
>
|
||||
<div className={clsx(styles.terminal, 'relative')}>
|
||||
<SpinnerOverlay visible={!connected} size={'large'} />
|
||||
<div className={clsx(styles.container, styles.overflows_container, { 'rounded-b': !canSendCommands })}>
|
||||
<div
|
||||
className={clsx(styles.terminalContainer, styles.overflows_container, {
|
||||
'rounded-b': !canSendCommands,
|
||||
})}
|
||||
>
|
||||
<div className={'h-full'}>
|
||||
<div id={styles.terminal} ref={ref} />
|
||||
</div>
|
||||
|
||||
@@ -82,7 +82,7 @@ export default ({ className }: PowerButtonProps) => {
|
||||
opacity: 0.5,
|
||||
}
|
||||
}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-l-full rounded-r-md text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-l-full rounded-r-md text-sm font-bold shadow-md cursor-pointer'
|
||||
disabled={status !== 'offline'}
|
||||
onClick={onButtonClick.bind(this, 'start')}
|
||||
>
|
||||
@@ -95,7 +95,7 @@ export default ({ className }: PowerButtonProps) => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-none text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-none text-sm font-bold shadow-md cursor-pointer'
|
||||
disabled={!status}
|
||||
onClick={onButtonClick.bind(this, 'restart')}
|
||||
>
|
||||
@@ -117,7 +117,7 @@ export default ({ className }: PowerButtonProps) => {
|
||||
opacity: 1,
|
||||
}
|
||||
}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-r-full rounded-l-md text-sm font-bold shadow-md transition-all'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-r-full rounded-l-md text-sm font-bold shadow-md transition-all cursor-pointer'
|
||||
disabled={status === 'offline'}
|
||||
onClick={onButtonClick.bind(this, killable ? 'kill' : 'stop')}
|
||||
>
|
||||
|
||||
@@ -1,28 +1,30 @@
|
||||
@import '../../../assets/tailwind.css';
|
||||
|
||||
.stat_block {
|
||||
@apply flex items-center rounded-xl shadow-lg relative w-full;
|
||||
@apply relative flex w-full items-center rounded-xl shadow-lg;
|
||||
/* @apply col-span-3 md:col-span-2 lg:col-span-6; */
|
||||
@apply p-8;
|
||||
|
||||
& > .status_bar {
|
||||
@apply w-1 h-full absolute left-0 top-0 rounded-l sm:hidden;
|
||||
@apply absolute top-0 left-0 h-full w-1 rounded-l sm:hidden;
|
||||
}
|
||||
|
||||
& > .icon {
|
||||
@apply hidden flex-shrink-0 items-center justify-center rounded-lg shadow-md w-12 h-12;
|
||||
@apply hidden h-12 w-12 shrink-0 items-center justify-center rounded-lg shadow-md;
|
||||
@apply transition-colors duration-500;
|
||||
@apply sm:flex sm:mr-4;
|
||||
@apply sm:mr-4 sm:flex;
|
||||
|
||||
& > svg {
|
||||
@apply w-6 h-6 m-auto;
|
||||
@apply m-auto h-6 w-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terminal {
|
||||
@apply flex flex-col w-full h-full relative;
|
||||
@apply relative flex h-full w-full flex-col;
|
||||
|
||||
& > .container {
|
||||
@apply min-h-[453px] rounded-t-xl pt-8 pl-8 bg-[#131313] border-x-[1px] border-[#ffffff11] border-t-[1px] font-mono text-sm h-full;
|
||||
& > .terminalContainer {
|
||||
@apply h-full min-h-[453px] rounded-t-xl border-x-[1px] border-t-[1px] border-[#ffffff11] bg-[#131313] pt-8 pl-8 font-mono text-sm;
|
||||
|
||||
& #terminal {
|
||||
@apply h-full w-full;
|
||||
@@ -38,16 +40,16 @@
|
||||
}
|
||||
|
||||
& .command_icon {
|
||||
@apply flex items-center top-0 left-0 absolute z-10 select-none h-full px-3 transition-colors duration-100;
|
||||
@apply absolute top-0 left-0 z-10 flex h-full items-center px-3 transition-colors duration-100 select-none;
|
||||
}
|
||||
|
||||
& .command_input {
|
||||
@apply relative bg-[#131313] border-[#ffffff11] border-x-[1px] border-b-[1px] px-4 pb-6 pt-2 text-zinc-100 pl-8 pr-4 w-full font-mono text-sm rounded-b-xl;
|
||||
@apply focus:ring-0 outline-none focus-visible:outline-none;
|
||||
@apply active:border-b-blue-500 focus:border-b-blue-500;
|
||||
@apply relative w-full rounded-b-xl border-x-[1px] border-b-[1px] border-[#ffffff11] bg-[#131313] px-4 pt-2 pr-4 pb-6 pl-8 font-mono text-sm text-zinc-100;
|
||||
@apply outline-hidden focus:ring-0 focus-visible:outline-none;
|
||||
@apply focus:border-b-blue-500 active:border-b-blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.chart_container {
|
||||
@apply bg-[#131313] rounded-xl border-[#ffffff11] border-[1px] relative;
|
||||
@apply relative rounded-xl border-[1px] border-[#ffffff11] bg-[#131313];
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@ export default () => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
New Database
|
||||
|
||||
@@ -202,7 +202,7 @@ export default ({ database }: Props) => {
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'View database connection details'}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-zinc-100 transition-colors duration-150 mr-4 flex align-middle items-center justify-center flex-col`}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-zinc-100 transition-colors duration-150 mr-4 flex align-middle items-center justify-center flex-col cursor-pointer`}
|
||||
onClick={() => setConnectionVisible(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEye} className={`px-5`} size='lg' />
|
||||
@@ -212,7 +212,7 @@ export default ({ database }: Props) => {
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'Delete database'}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-red-600 transition-colors duration-150 flex align-middle items-center justify-center flex-col`}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-red-600 transition-colors duration-150 flex align-middle items-center justify-center flex-col cursor-pointer`}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrashAlt} className={`px-5`} size='lg' />
|
||||
|
||||
@@ -102,7 +102,7 @@ const JavaVersionModalFeature = () => {
|
||||
<DropdownMenu onOpenChange={(open) => setDropDownOpen(open)}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className='flex items-center justify-center h-8 px-4 text-sm font-medium text-white transition-colors duration-150 bg-gradient-to-b from-[#ffffff10] to-[#ffffff09] inner-border-[1px] inner-border-[#ffffff15] border border-transparent rounded-xl shadow-sm hover:from-[#ffffff05] hover:to-[#ffffff04]'
|
||||
className='flex items-center justify-center h-8 px-4 text-sm font-medium text-white transition-colors duration-150 bg-linear-to-b from-[#ffffff10] to-[#ffffff09] border border-[#ffffff15] rounded-xl shadow-xs hover:from-[#ffffff05] hover:to-[#ffffff04] cursor-pointer'
|
||||
disabled={!data}
|
||||
>
|
||||
{selectedVersion
|
||||
@@ -121,7 +121,7 @@ const JavaVersionModalFeature = () => {
|
||||
)}
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='z-[99999]' sideOffset={8}>
|
||||
<DropdownMenuContent className='z-99999' sideOffset={8}>
|
||||
<DropdownMenuRadioGroup value={selectedVersion} onValueChange={setSelectedVersion}>
|
||||
{data &&
|
||||
Object.keys(data.dockerImages).map((key) => (
|
||||
|
||||
@@ -60,7 +60,7 @@ const SteamDiskSpaceFeature = () => {
|
||||
</p>
|
||||
<p className='mt-3'>
|
||||
Ensure the machine has enough disk space by typing{' '}
|
||||
<code className={`font-mono bg-zinc-900 rounded py-1 px-2`}>df -h</code> on the machine
|
||||
<code className={`font-mono bg-zinc-900 rounded-sm py-1 px-2`}>df -h</code> on the machine
|
||||
hosting this server. Delete files or increase the available disk space to resolve the issue.
|
||||
</p>
|
||||
</>
|
||||
|
||||
@@ -126,22 +126,22 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
|
||||
<ContextMenuContent className='flex flex-col gap-1'>
|
||||
<Can action={'file.update'}>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={() => setModal('rename')}>
|
||||
<HugeIconsPencil className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsPencil className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Rename</span>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={() => setModal('move')}>
|
||||
<HugeIconsMoveTo className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsMoveTo className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Move</span>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={() => setModal('chmod')}>
|
||||
<HugeIconsFileSecurity className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsFileSecurity className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Permissions</span>
|
||||
</ContextMenuItem>
|
||||
</Can>
|
||||
{file.isFile && (
|
||||
<Can action={'file.create'}>
|
||||
<ContextMenuItem className='flex gap-2' onClick={doCopy}>
|
||||
<HugeIconsCopy className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsCopy className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Duplicate</span>
|
||||
</ContextMenuItem>
|
||||
</Can>
|
||||
@@ -149,27 +149,27 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
|
||||
{file.isArchiveType() ? (
|
||||
<Can action={'file.create'}>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={doUnarchive} title={'Unarchive'}>
|
||||
<HugeIconsFileZip className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsFileZip className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Unarchive</span>
|
||||
</ContextMenuItem>
|
||||
</Can>
|
||||
) : (
|
||||
<Can action={'file.archive'}>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={doArchive}>
|
||||
<HugeIconsFileZip className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsFileZip className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Archive</span>
|
||||
</ContextMenuItem>
|
||||
</Can>
|
||||
)}
|
||||
{file.isFile && (
|
||||
<ContextMenuItem className='flex gap-2' onSelect={doDownload}>
|
||||
<HugeIconsFileDownload className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsFileDownload className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Download</span>
|
||||
</ContextMenuItem>
|
||||
)}
|
||||
<Can action={'file.delete'}>
|
||||
<ContextMenuItem className='flex gap-2' onSelect={() => setShowConfirmation(true)}>
|
||||
<HugeIconsDelete className='!h-4 !w-4' fill='currentColor' />
|
||||
<HugeIconsDelete className='h-4! w-4!' fill='currentColor' />
|
||||
<span>Delete</span>
|
||||
</ContextMenuItem>
|
||||
</Can>
|
||||
|
||||
@@ -121,7 +121,7 @@ export default () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContentBlock title={action === 'edit' ? `Editing ${filename}` : `New File`} className='!p-0'>
|
||||
<PageContentBlock title={action === 'edit' ? `Editing ${filename}` : `New File`} className='p-0!'>
|
||||
<FlashMessageRender byKey={'files:view'} />
|
||||
|
||||
<ErrorBoundary>
|
||||
@@ -134,14 +134,14 @@ export default () => {
|
||||
</ErrorBoundary>
|
||||
|
||||
{filename === '.pteroignore' ? (
|
||||
<div className={`mb-4 p-4 border-l-4 bg-neutral-900 rounded border-cyan-400`}>
|
||||
<div className={`mb-4 p-4 border-l-4 bg-neutral-900 rounded-sm border-cyan-400`}>
|
||||
<p className={`text-neutral-300 text-sm`}>
|
||||
You're editing a{' '}
|
||||
<code className={`font-mono bg-black rounded py-px px-1`}>.pteroignore</code> file. Any files or
|
||||
directories listed in here will be excluded from backups. Wildcards are supported by using an
|
||||
asterisk (<code className={`font-mono bg-black rounded py-px px-1`}>*</code>). You can negate a
|
||||
prior rule by prepending an exclamation point (
|
||||
<code className={`font-mono bg-black rounded py-px px-1`}>!</code>).
|
||||
<code className={`font-mono bg-black rounded-sm py-px px-1`}>.pteroignore</code> file. Any files
|
||||
or directories listed in here will be excluded from backups. Wildcards are supported by using an
|
||||
asterisk (<code className={`font-mono bg-black rounded-sm py-px px-1`}>*</code>). You can negate
|
||||
a prior rule by prepending an exclamation point (
|
||||
<code className={`font-mono bg-black rounded-sm py-px px-1`}>!</code>).
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
@@ -156,7 +156,7 @@ export default () => {
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`relative h-full bg-[#ffffff11] border-[1px] border-[#ffffff07] border-t-0 [&>div>div]:h-full [&>div>div]:!outline-none w-full`}
|
||||
className={`relative h-full bg-[#ffffff11] border-[1px] border-[#ffffff07] border-t-0 [&>div>div]:h-full [&>div>div]:outline-hidden! w-full`}
|
||||
>
|
||||
<Editor
|
||||
style={{ height: 'calc(100vh - 86px)', width: '100%' }}
|
||||
@@ -216,7 +216,7 @@ export default () => {
|
||||
/>
|
||||
</svg>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='max-h-[calc(100vh-4rem)] overflow-auto z-[99999]' sideOffset={8}>
|
||||
<DropdownMenuContent className='max-h-[calc(100vh-4rem)] overflow-auto z-99999' sideOffset={8}>
|
||||
<For each={languages.sort((a, b) => a.name.localeCompare(b.name))} memo>
|
||||
{(language) => (
|
||||
<DropdownMenuItem
|
||||
@@ -240,7 +240,7 @@ export default () => {
|
||||
background:
|
||||
'radial-gradient(109.26% 109.26% at 49.83% 13.37%, rgb(255, 52, 60) 0%, rgb(240, 111, 83) 100%)',
|
||||
}}
|
||||
className='h-[46px] pl-8 pr-6 py-3 border-[1px] border-[#ffffff12] rounded-l-full text-sm font-bold shadow-md'
|
||||
className='h-[46px] pl-8 pr-6 py-3 border-[1px] border-[#ffffff12] rounded-l-full text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={() => save()}
|
||||
>
|
||||
Save <span className='ml-2 font-mono text-xs font-bold uppercase'>CTRL + S</span>
|
||||
@@ -269,7 +269,7 @@ export default () => {
|
||||
</svg>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className='max-h-[calc(100vh-4rem)] overflow-auto z-[99999]'
|
||||
className='max-h-[calc(100vh-4rem)] overflow-auto z-99999'
|
||||
sideOffset={8}
|
||||
>
|
||||
<DropdownMenuItem onSelect={() => saveAndRestart()}>
|
||||
@@ -286,7 +286,7 @@ export default () => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={() => setModalVisible(true)}
|
||||
>
|
||||
Create File
|
||||
|
||||
@@ -46,7 +46,7 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`group select-none flex flex-grow-0 items-center text-sm overflow-x-hidden`}>
|
||||
<div className={`group select-none flex grow-0 items-center text-sm overflow-x-hidden`}>
|
||||
{renderLeft || <div className={`w-12`} />}
|
||||
<NavLink to={`/server/${id}/files`} className={`px-1 text-zinc-200 no-underline hover:text-zinc-100`}>
|
||||
root
|
||||
|
||||
@@ -99,7 +99,7 @@ export default () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<ServerContentBlock className='!p-0' title={'File Manager'} showFlashKey={'files'}>
|
||||
<ServerContentBlock className='p-0!' title={'File Manager'} showFlashKey={'files'}>
|
||||
<div className='px-2 sm:px-14 pt-2 sm:pt-14'>
|
||||
<ErrorBoundary>
|
||||
<MainPageHeader title={'Files'}>
|
||||
|
||||
@@ -45,16 +45,16 @@ const FileUploadList = () => {
|
||||
return (
|
||||
<div className={'space-y-2 mt-6'}>
|
||||
{uploads.map(([name, file]) => (
|
||||
<div key={name} className={'flex items-center space-x-3 bg-zinc-700 p-3 rounded'}>
|
||||
<div key={name} className={'flex items-center space-x-3 bg-zinc-700 p-3 rounded-sm'}>
|
||||
{/* <Tooltip content={`${Math.floor((file.loaded / file.total) * 100)}%`} placement={'left'}> */}
|
||||
<div className={'flex-shrink-0'}>
|
||||
<div className={'shrink-0'}>
|
||||
<Spinner progress={(file.loaded / file.total) * 100} className={'w-6 h-6'} />
|
||||
</div>
|
||||
{/* </Tooltip> */}
|
||||
<Code className={'flex-1 truncate'}>{name}</Code>
|
||||
<button
|
||||
onClick={cancelFileUpload.bind(this, name)}
|
||||
className={'text-zinc-500 hover:text-zinc-200 transition-colors duration-75'}
|
||||
className={'text-zinc-500 hover:text-zinc-200 transition-colors duration-75 cursor-pointer'}
|
||||
>
|
||||
FIXME: add X icon Cancel Upload
|
||||
</button>
|
||||
@@ -90,7 +90,10 @@ export default () => {
|
||||
<>
|
||||
{count > 0 && (
|
||||
// <Tooltip content={`${count} files are uploading, click to view`}>
|
||||
<button className={'flex items-center justify-center w-10 h-10'} onClick={() => (open.value = true)}>
|
||||
<button
|
||||
className={'flex items-center justify-center w-10 h-10 cursor-pointer'}
|
||||
onClick={() => (open.value = true)}
|
||||
>
|
||||
<svg
|
||||
className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
|
||||
@@ -100,7 +100,7 @@ const MassActionsBar = () => {
|
||||
'pointer-events-none fixed bottom-0 left-0 right-0 mb-6 flex justify-center w-full z-50'
|
||||
}
|
||||
>
|
||||
<div className={`flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50`}>
|
||||
<div className={`flex items-center space-x-4 pointer-events-auto rounded-sm p-4 bg-black/50`}>
|
||||
<Button onClick={() => setShowMove(true)}>Move</Button>
|
||||
<Button onClick={onClickCompress}>Archive</Button>
|
||||
<Button.Danger variant={Button.Variants.Secondary} onClick={() => setShowConfirm(true)}>
|
||||
|
||||
@@ -75,7 +75,7 @@ const NewDirectoryDialog = asDialog({
|
||||
<FlashMessageRender key={'files:directory-modal'} />
|
||||
<Form className={`m-0`}>
|
||||
<Field autoFocus id={'directoryName'} name={'directoryName'} label={'Name'} />
|
||||
<p className={`mt-2 !text-xs break-all`}>
|
||||
<p className={`mt-2 text-xs! break-all`}>
|
||||
<span className={`text-zinc-200`}>This folder will be created as </span>
|
||||
<Code>
|
||||
/root/
|
||||
@@ -110,7 +110,7 @@ export default () => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-l-full rounded-r-md text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-l-full rounded-r-md text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={setOpen.bind(this, true)}
|
||||
>
|
||||
New Folder
|
||||
|
||||
@@ -71,7 +71,7 @@ const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
|
||||
<div className='w-full'>
|
||||
<Field type={'string'} id={'file_name'} name={'name'} label={'File Name'} autoFocus />
|
||||
{useMoveTerminology && (
|
||||
<p className={`mt-2 !text-xs break-all`}>
|
||||
<p className={`mt-2 text-xs! break-all`}>
|
||||
<strong className={`text-sm text-zinc-200`}>New location: </strong>
|
||||
<Code>
|
||||
/root/
|
||||
|
||||
@@ -171,7 +171,7 @@ export default () => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-r-full rounded-l-md text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-r-full rounded-l-md text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={() => fileUploadInput.current && fileUploadInput.current.click()}
|
||||
>
|
||||
Upload
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
@import '../../../assets/tailwind.css';
|
||||
|
||||
.manager_actions {
|
||||
@apply grid grid-cols-2 sm:grid-cols-3 w-full gap-4 mb-4;
|
||||
@apply mb-4 grid w-full grid-cols-2 gap-4 sm:grid-cols-3;
|
||||
|
||||
& button {
|
||||
@apply w-full first:col-span-2 sm:first:col-span-1;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
@apply flex flex-1 justify-end mb-0;
|
||||
@apply mb-0 flex flex-1 justify-end;
|
||||
|
||||
& button {
|
||||
@apply w-auto;
|
||||
@@ -15,11 +17,11 @@
|
||||
}
|
||||
|
||||
.file_row {
|
||||
@apply rounded-sm p-1 transition bg-[#ffffff08] border-[1px] border-[#ffffff07] flex items-center text-sm no-underline;
|
||||
@apply flex items-center rounded-sm border-[1px] border-[#ffffff07] bg-[#ffffff08] p-1 text-sm no-underline transition;
|
||||
@apply hover:bg-[#ffffff12] hover:duration-0;
|
||||
|
||||
& > .details {
|
||||
@apply flex flex-1 items-center text-zinc-300 no-underline px-4 py-2 overflow-hidden truncate;
|
||||
@apply flex flex-1 items-center truncate overflow-hidden px-4 py-2 text-zinc-300 no-underline;
|
||||
|
||||
&:not(a) {
|
||||
@apply cursor-default;
|
||||
|
||||
@@ -98,7 +98,7 @@ const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl, nonApiUrl }) =>
|
||||
<button
|
||||
onClick={fetchProjects}
|
||||
id='fetchNewProjects'
|
||||
className='btn btn-primary mb-4 flex hidden'
|
||||
className='btn btn-primary mb-4 flex hidden cursor-pointer'
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? 'Loading...' : 'Fetch Projects'}
|
||||
@@ -110,13 +110,13 @@ const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl, nonApiUrl }) =>
|
||||
projects.map((project) => (
|
||||
<ContentBox
|
||||
key={project.project_id}
|
||||
className='p-4 bg-[#ffffff09] border border-gray-600 shadow-sm rounded-xl w-full mb-4'
|
||||
className='p-4 bg-[#ffffff09] border border-gray-600 shadow-xs rounded-xl w-full mb-4'
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<ContentBox className='pt-1 rounded-xl mr-4'>
|
||||
<a href={`${nonApiUrl}/mod/${project.project_id}`} target='_blank' rel='noreferrer'>
|
||||
{project.icon_url !== 'N/A' ? (
|
||||
<img src={project.icon_url} className='w-24 h-20 object-contain rounded' />
|
||||
<img src={project.icon_url} className='w-24 h-20 object-contain rounded-sm' />
|
||||
) : (
|
||||
<svg
|
||||
fillRule='evenodd'
|
||||
@@ -159,7 +159,7 @@ const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl, nonApiUrl }) =>
|
||||
</div>
|
||||
<div className='flex flex-col py-2 px-6 mx-6'>
|
||||
<button
|
||||
className='flex items-center border-2 border-solid rounded py-1 px-6 border-brand hover:border-white hover:bg-red-600 hover:scale-110 justify-center'
|
||||
className='flex items-center border-2 border-solid rounded-sm py-1 px-6 border-brand hover:border-white hover:bg-red-600 hover:scale-110 justify-center cursor-pointer'
|
||||
onClick={() => setModalProject(project.project_id)}
|
||||
>
|
||||
<HugeIconsDownload className='px-2 mx-2' fill='currentColor' /> Install
|
||||
|
||||
@@ -68,7 +68,7 @@ const DownloadModrinth: React.FC<DownloadProps> = ({ url, serverUuid, directory
|
||||
<button
|
||||
onClick={downloadAndUploadFile}
|
||||
disabled={loading}
|
||||
className='px-4 py-2 bg-blue-500 text-white rounded-lg'
|
||||
className='px-4 py-2 bg-blue-500 text-white rounded-lg cursor-pointer'
|
||||
>
|
||||
{loading ? 'Processing...' : 'Download & Upload'}
|
||||
</button>
|
||||
|
||||
@@ -52,7 +52,7 @@ const DropdownButton = ({ list }: Props) => {
|
||||
<ChevronDownIcon className='w-4 h-4 ml-2' />
|
||||
</Button>
|
||||
{open && (
|
||||
<div className='absolute mt-1 w-full bg-[#ffffff09] border rounded-sm shadow-lg text-white'>
|
||||
<div className='absolute mt-1 w-full bg-[#ffffff09] border rounded-xs shadow-lg text-white'>
|
||||
{list.map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
|
||||
@@ -63,12 +63,12 @@ export default () => {
|
||||
|
||||
return (
|
||||
<PageContentBlock title={'Mods/Plugins'}>
|
||||
<ContentBox className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl mb-5'>
|
||||
<ContentBox className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-xs rounded-xl mb-5'>
|
||||
{/* TODO: Add a navbar to cycle between Downloaded, Download, and Dependency resolver*/}
|
||||
</ContentBox>
|
||||
<div className='flex flex-wrap gap-4'>
|
||||
<ContentBox
|
||||
className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl md:w-1/6'
|
||||
className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-xs rounded-xl md:w-1/6'
|
||||
title='Settings'
|
||||
>
|
||||
<Can action={'modrinth.loader'}>
|
||||
@@ -107,7 +107,7 @@ export default () => {
|
||||
</ContentBox>
|
||||
|
||||
<ContentBox
|
||||
className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full md:w-4/5'
|
||||
className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-xs rounded-xl w-full md:w-4/5'
|
||||
title='Modrinth'
|
||||
>
|
||||
<div className='relative w-full h-full mb-4'>
|
||||
|
||||
@@ -45,9 +45,9 @@ export function ExpandableScrollBox({
|
||||
{/* Selection Button */}
|
||||
<button
|
||||
className={cn(
|
||||
'w-full px-6 py-3 rounded-md font-medium',
|
||||
'w-full px-6 py-3 rounded-md font-medium cursor-pointer',
|
||||
'bg-custom-red text-white',
|
||||
'hover:bg-custom-red-hover focus:outline-none focus:ring-2 focus:ring-custom-red-hover focus:ring-offset-2 focus:ring-offset-black',
|
||||
'hover:bg-custom-red-hover focus:outline-hidden focus:ring-2 focus:ring-custom-red-hover focus:ring-offset-2 focus:ring-offset-black',
|
||||
'transition-colors duration-200 shadow-md',
|
||||
'flex items-center justify-between',
|
||||
buttonClassName,
|
||||
@@ -58,9 +58,9 @@ export function ExpandableScrollBox({
|
||||
>
|
||||
<span className='truncate'>{selectedItem ? selectedItem.label : placeholder}</span>
|
||||
{isOpen ? (
|
||||
<ChevronUpIcon className='ml-2 h-5 w-5 flex-shrink-0' />
|
||||
<ChevronUpIcon className='ml-2 h-5 w-5 shrink-0' />
|
||||
) : (
|
||||
<ChevronDownIcon className='ml-2 h-5 w-5 flex-shrink-0' />
|
||||
<ChevronDownIcon className='ml-2 h-5 w-5 shrink-0' />
|
||||
)}
|
||||
</button>
|
||||
|
||||
@@ -71,7 +71,7 @@ export function ExpandableScrollBox({
|
||||
'w-full mt-4 rounded-md overflow-hidden',
|
||||
'bg-custom-medium-gray border-2 border-custom-dark-gray',
|
||||
'shadow-lg transition-all duration-300 ease-in-out',
|
||||
isOpen ? 'max-h-[var(--max-height)] opacity-100 my-4' : 'max-h-0 opacity-0 my-0 border-0',
|
||||
isOpen ? 'max-h-(--max-height) opacity-100 my-4' : 'max-h-0 opacity-0 my-0 border-0',
|
||||
boxClassName,
|
||||
)}
|
||||
style={{ '--max-height': maxHeight } as React.CSSProperties}
|
||||
|
||||
@@ -45,7 +45,9 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
|
||||
>
|
||||
This allocation will be immediately removed from your server.
|
||||
</Dialog.Confirm>
|
||||
<button onClick={() => setConfirm(true)}>Delete</button>
|
||||
<button className='cursor-pointer' onClick={() => setConfirm(true)}>
|
||||
Delete
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -70,7 +70,7 @@ const NetworkContainer = () => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={onCreateAllocation}
|
||||
>
|
||||
New Allocation
|
||||
|
||||
@@ -118,7 +118,7 @@ const EditScheduleModal = ({ schedule }: Props) => {
|
||||
The schedule system supports the use of Cronjob syntax when defining when tasks should begin
|
||||
running. Use the fields above to specify when these tasks should begin running.
|
||||
</p>
|
||||
<div className={`space-y-3 my-6`}>
|
||||
<div className='gap-3 my-6 flex flex-col'>
|
||||
<a href='https://crontab.guru/' target='_blank' rel='noreferrer'>
|
||||
<ItemContainer
|
||||
description={'Online editor for cron schedule experessions.'}
|
||||
|
||||
@@ -48,7 +48,7 @@ function ScheduleContainer() {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='rounded-full border-[1px] border-[#ffffff12] px-8 py-3 text-sm font-bold shadow-md'
|
||||
className='rounded-full border-[1px] border-[#ffffff12] px-8 py-3 text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
New Schedule
|
||||
|
||||
@@ -74,7 +74,7 @@ export default () => {
|
||||
{!schedule || isLoading ? (
|
||||
<Spinner size={'large'} centered />
|
||||
) : (
|
||||
<div className={`rounded shadow flex flex-col gap-6`}>
|
||||
<div className={`rounded-sm shadow-sm flex flex-col gap-6`}>
|
||||
<div
|
||||
className={`bg-[#ffffff09] border-[1px] border-[#ffffff11] flex items-center place-content-between flex-col md:flex-row gap-6 p-6 rounded-2xl overflow-hidden`}
|
||||
>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default ({ schedule, task }: Props) => {
|
||||
icon={icon}
|
||||
divClasses={`mb-2 gap-6`}
|
||||
copyDescription={copyOnClick}
|
||||
descriptionClasses={`whitespace-nowrap overflow-hidden overflow-ellipsis`}
|
||||
descriptionClasses={`whitespace-nowrap overflow-hidden text-ellipsis`}
|
||||
>
|
||||
<SpinnerOverlay visible={isLoading} fixed size={'large'} />
|
||||
<TaskDetailsModal
|
||||
@@ -103,7 +103,7 @@ export default ({ schedule, task }: Props) => {
|
||||
<p className={`text-xs uppercase text-zinc-400 mb-1`}>Ignoring files & folders:</p>
|
||||
)}
|
||||
<div
|
||||
className={`font-mono bg-zinc-800 rounded py-1 px-2 text-sm w-auto inline-block whitespace-pre-wrap break-all`}
|
||||
className={`font-mono bg-zinc-800 rounded-sm py-1 px-2 text-sm w-auto inline-block whitespace-pre-wrap break-all`}
|
||||
>
|
||||
{task.payload}
|
||||
</div>
|
||||
@@ -125,7 +125,7 @@ export default ({ schedule, task }: Props) => {
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'Edit scheduled task'}
|
||||
className={`block text-sm p-2 text-zinc-500 hover:text-zinc-100 transition-colors duration-150 mr-4 ml-auto sm:ml-0`}
|
||||
className={`block text-sm p-2 text-zinc-500 hover:text-zinc-100 transition-colors duration-150 mr-4 ml-auto sm:ml-0 cursor-pointer`}
|
||||
onClick={() => setIsEditing(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPen} className={`px-5`} size='lg' />
|
||||
@@ -136,7 +136,7 @@ export default ({ schedule, task }: Props) => {
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'Delete scheduled task'}
|
||||
className={`block text-sm p-2 text-zinc-500 hover:text-red-600 transition-colors duration-150`}
|
||||
className={`block text-sm p-2 text-zinc-500 hover:text-red-600 transition-colors duration-150 cursor-pointer`}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} className={`px-5`} size='lg' />
|
||||
|
||||
@@ -41,12 +41,12 @@ export default () => {
|
||||
<TitledGreyBox title={'Debug Information'}>
|
||||
<div className={`flex items-center justify-between text-sm`}>
|
||||
<p>Node</p>
|
||||
<code className={`font-mono bg-zinc-900 rounded py-1 px-2`}>{node}</code>
|
||||
<code className={`font-mono bg-zinc-900 rounded-sm py-1 px-2`}>{node}</code>
|
||||
</div>
|
||||
<CopyOnClick text={uuid}>
|
||||
<div className={`flex items-center justify-between mt-2 text-sm`}>
|
||||
<p>Server ID</p>
|
||||
<code className={`font-mono bg-zinc-900 rounded py-1 px-2`}>{uuid}</code>
|
||||
<code className={`font-mono bg-zinc-900 rounded-sm py-1 px-2`}>{uuid}</code>
|
||||
</div>
|
||||
</CopyOnClick>
|
||||
</TitledGreyBox>
|
||||
@@ -56,14 +56,14 @@ export default () => {
|
||||
<Label>Server Address</Label>
|
||||
<CopyOnClick text={`sftp://${ip(sftp.ip)}:${sftp.port}`}>
|
||||
<code
|
||||
className={`font-mono bg-zinc-900 rounded py-1 px-2`}
|
||||
className={`font-mono bg-zinc-900 rounded-sm py-1 px-2`}
|
||||
>{`sftp://${ip(sftp.ip)}:${sftp.port}`}</code>
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
<div className={`mt-2 flex items-center justify-between text-sm`}>
|
||||
<Label>Username</Label>
|
||||
<CopyOnClick text={`${username}.${id}`}>
|
||||
<code className={`font-mono bg-zinc-900 rounded py-1 px-2`}>{`${username}.${id}`}</code>
|
||||
<code className={`font-mono bg-zinc-900 rounded-sm py-1 px-2`}>{`${username}.${id}`}</code>
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
<div className={`mt-6 flex items-center`}>
|
||||
|
||||
@@ -272,7 +272,10 @@ const SoftwareContainer = () => {
|
||||
{isLongDescription && !shouldShowFull ? (
|
||||
<>
|
||||
{`${description.slice(0, MAX_DESCRIPTION_LENGTH)}... `}
|
||||
<button className='text-brand' onClick={() => toggleDescriptionVisibility(index)}>
|
||||
<button
|
||||
className='text-brand cursor-pointer'
|
||||
onClick={() => toggleDescriptionVisibility(index)}
|
||||
>
|
||||
Show More
|
||||
</button>
|
||||
</>
|
||||
@@ -280,7 +283,10 @@ const SoftwareContainer = () => {
|
||||
<>
|
||||
{description}
|
||||
{isLongDescription && (
|
||||
<button className='text-brand' onClick={() => toggleDescriptionVisibility(index)}>
|
||||
<button
|
||||
className='text-brand cursor-pointer'
|
||||
onClick={() => toggleDescriptionVisibility(index)}
|
||||
>
|
||||
<span className='text-neutral-400'>..</span>Show Less
|
||||
</button>
|
||||
)}
|
||||
@@ -316,7 +322,7 @@ const SoftwareContainer = () => {
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className='rounded-full border-[1px] border-[#ffffff12] px-4 py-2 text-sm font-bold shadow-md hover:border-[#ffffff22] hover:shadow-lg bg-gradient-to-b from-[#ffffff10] to-[#ffffff09] text-white'
|
||||
className='rounded-full border-[1px] cursor-pointer border-[#ffffff12] px-4 py-2 text-sm font-bold shadow-md hover:border-[#ffffff22] hover:shadow-lg bg-linear-to-b from-[#ffffff10] to-[#ffffff09] text-white'
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
Change Egg
|
||||
@@ -341,7 +347,7 @@ const SoftwareContainer = () => {
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<div
|
||||
className={`${index < step + 1 ? 'border-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-[#FF343C] to-[#F06F53] text-brand' : 'border-[#ffffff20] text-[#ffffff20]'} border-[2px] rounded-full p-1 w-8 h-8 text-sm font-bold shadow-md hover:shadow-lg items-center text-center`}
|
||||
className={`${index < step + 1 ? 'border-[radial-gradient(circle_at_center,var(--tw-gradient-stops))] from-[#FF343C] to-[#F06F53] text-brand' : 'border-[#ffffff20] text-[#ffffff20]'} border-[2px] rounded-full p-1 w-8 h-8 text-sm font-bold shadow-md hover:shadow-lg items-center text-center`}
|
||||
>
|
||||
{index + 1}
|
||||
</div>
|
||||
|
||||
@@ -108,7 +108,7 @@ const StartupContainer = () => {
|
||||
<TitledGreyBox title={'Startup Command'} className={`col-span-2`}>
|
||||
<CopyOnClick text={data.invocation}>
|
||||
<div className={`px-1 py-2`}>
|
||||
<p className={`font-mono bg-zinc-900 rounded py-2 px-4`}>{data.invocation}</p>
|
||||
<p className={`font-mono bg-zinc-900 rounded-sm py-2 px-4`}>{data.invocation}</p>
|
||||
</div>
|
||||
</CopyOnClick>
|
||||
</TitledGreyBox>
|
||||
@@ -118,7 +118,7 @@ const StartupContainer = () => {
|
||||
<InputSpinner visible={loading}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className='flex items-center gap-2 font-bold text-sm px-3 py-1 rounded-md bg-[#ffffff11]'>
|
||||
<button className='flex items-center gap-2 font-bold text-sm px-3 py-1 rounded-md bg-[#ffffff11] cursor-pointer'>
|
||||
<div>{variables.dockerImage}</div>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
@@ -137,7 +137,7 @@ const StartupContainer = () => {
|
||||
</svg>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='flex flex-col gap-1 z-[99999]' sideOffset={8}>
|
||||
<DropdownMenuContent className='flex flex-col gap-1 z-99999' sideOffset={8}>
|
||||
<DropdownMenuRadioGroup
|
||||
value={variables.dockerImage}
|
||||
onValueChange={(value) => updateSelectedDockerImage(value)}
|
||||
|
||||
@@ -111,7 +111,7 @@ const VariableBox = ({ variable }: Props) => {
|
||||
<DropdownMenu onOpenChange={(open) => setDropDownOpen(open)}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className='flex items-center justify-center h-8 px-4 text-sm font-medium text-white transition-colors duration-150 bg-gradient-to-b from-[#ffffff10] to-[#ffffff09] inner-border-[1px] inner-border-[#ffffff15] border border-transparent rounded-xl shadow-sm hover:from-[#ffffff05] hover:to-[#ffffff04]'
|
||||
className='flex items-center justify-center h-8 px-4 text-sm font-medium text-white transition-colors duration-150 bg-linear-to-b from-[#ffffff10] to-[#ffffff09] border border-[#ffffff15] rounded-xl shadow-xs hover:from-[#ffffff05] hover:to-[#ffffff04] cursor-pointer'
|
||||
disabled={!canEdit || !variable.isEditable}
|
||||
>
|
||||
{variable.serverValue}
|
||||
@@ -128,7 +128,7 @@ const VariableBox = ({ variable }: Props) => {
|
||||
)}
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='z-[99999]' sideOffset={8}>
|
||||
<DropdownMenuContent className='z-99999' sideOffset={8}>
|
||||
<DropdownMenuRadioGroup
|
||||
value={variable.serverValue}
|
||||
onValueChange={setVariableValue}
|
||||
|
||||
@@ -13,7 +13,7 @@ export default () => {
|
||||
background:
|
||||
'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(36, 36, 36) 0%, rgb(20, 20, 20) 100%)',
|
||||
}}
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md'
|
||||
className='px-8 py-3 border-[1px] border-[#ffffff12] rounded-full text-sm font-bold shadow-md cursor-pointer'
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
New User
|
||||
|
||||
@@ -50,7 +50,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'Delete subuser'}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-red-600 transition-colors duration-150 flex align-middle items-center justify-center flex-col`}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-red-600 transition-colors duration-150 flex align-middle items-center justify-center flex-col cursor-pointer`}
|
||||
onClick={() => setShowConfirmation(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrashAlt} className={`px-5`} size='lg' />
|
||||
|
||||
@@ -48,7 +48,7 @@ export default ({ subuser }: Props) => {
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'Edit subuser'}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-zinc-100 transition-colors duration-150 flex align-middle items-center justify-center flex-col`}
|
||||
className={`text-sm p-2 text-zinc-500 hover:text-zinc-100 transition-colors duration-150 flex align-middle items-center justify-center flex-col cursor-pointer`}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEdit} className={`px-5`} size='lg' />
|
||||
|
||||
@@ -84,13 +84,13 @@ export default () => {
|
||||
<Fragment key={'dashboard-router'}>
|
||||
{isSidebarVisible && (
|
||||
<div
|
||||
className='lg:hidden fixed inset-0 bg-black bg-opacity-50 z-[9998] transition-opacity duration-300 '
|
||||
className='lg:hidden fixed inset-0 bg-black bg-opacity-50 z-9998 transition-opacity duration-300 '
|
||||
onClick={() => setSidebarVisible(false)}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
id='sidebarToggle'
|
||||
className='lg:hidden fixed flex items-center justify-center top-4 left-4 z-50 bg-[#1a1a1a] p-3 rounded-md text-white shadow-md'
|
||||
className='lg:hidden fixed flex items-center justify-center top-4 left-4 z-50 bg-[#1a1a1a] p-3 rounded-md text-white shadow-md cursor-pointer'
|
||||
onClick={toggleSidebar}
|
||||
aria-label='Toggle sidebar'
|
||||
>
|
||||
@@ -98,7 +98,7 @@ export default () => {
|
||||
</button>
|
||||
|
||||
<MainSidebar
|
||||
className={`fixed inset-y-0 left-0 z-[9999] w-[300px] bg-[#1a1a1a] transition-transform duration-300 ease-in-out absolute backdrop-blur-sm ${
|
||||
className={`fixed inset-y-0 left-0 z-9999 w-[300px] bg-[#1a1a1a] transition-transform duration-300 ease-in-out absolute backdrop-blur-xs ${
|
||||
isSidebarVisible ? 'translate-x-0' : '-translate-x-full'
|
||||
} lg:translate-x-0 lg:relative lg:flex lg:shrink-0`}
|
||||
>
|
||||
@@ -128,7 +128,7 @@ export default () => {
|
||||
</NavLink>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2'>
|
||||
<button className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2 cursor-pointer'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='16'
|
||||
@@ -141,7 +141,7 @@ export default () => {
|
||||
</svg>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='z-[99999]' sideOffset={8}>
|
||||
<DropdownMenuContent className='z-99999' sideOffset={8}>
|
||||
{rootAdmin && (
|
||||
<DropdownMenuItem onSelect={onSelectAdminPanel}>
|
||||
Admin Panel
|
||||
|
||||
@@ -266,14 +266,14 @@ export default () => {
|
||||
<>
|
||||
{isSidebarVisible && (
|
||||
<div
|
||||
className='lg:hidden fixed inset-0 bg-black bg-opacity-50 z-[9998] transition-opacity duration-300'
|
||||
className='lg:hidden fixed inset-0 bg-black bg-opacity-50 z-9998 transition-opacity duration-300'
|
||||
onClick={() => setSidebarVisible(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<button
|
||||
id='sidebarToggle'
|
||||
className='lg:hidden fixed flex items-center justify-center top-4 left-4 z-50 bg-[#1a1a1a] p-3 rounded-md text-white shadow-md'
|
||||
className='lg:hidden fixed flex items-center justify-center top-4 left-4 z-50 bg-[#1a1a1a] p-3 rounded-md text-white shadow-md cursor-pointer'
|
||||
onClick={toggleSidebar}
|
||||
aria-label='Toggle sidebar'
|
||||
>
|
||||
@@ -283,7 +283,7 @@ export default () => {
|
||||
<div className='flex flex-row w-full'>
|
||||
<MainSidebar
|
||||
ref={sidebarRef}
|
||||
className={`fixed inset-y-0 left-0 z-[9999] w-[300px] bg-[#1a1a1a] transition-transform duration-300 ease-in-out absolute backdrop-blur-sm ${
|
||||
className={`fixed inset-y-0 left-0 z-9999 w-[300px] bg-[#1a1a1a] transition-transform duration-300 ease-in-out absolute backdrop-blur-xs ${
|
||||
isSidebarVisible ? 'translate-x-0' : '-translate-x-full'
|
||||
} lg:translate-x-0 lg:relative lg:flex lg:shrink-0`}
|
||||
onTouchStart={handleTouchStart}
|
||||
@@ -314,7 +314,7 @@ export default () => {
|
||||
</NavLink>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2 select-none'>
|
||||
<button className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2 select-none cursor-pointer'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='16'
|
||||
@@ -328,7 +328,7 @@ export default () => {
|
||||
</svg>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className='z-[99999] select-none relative' sideOffset={8}>
|
||||
<DropdownMenuContent className='z-99999 select-none relative' sideOffset={8}>
|
||||
{rootAdmin && (
|
||||
<DropdownMenuItem onSelect={onSelectManageServer}>
|
||||
Manage Server
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
const colors = require('tailwindcss/colors');
|
||||
|
||||
// I'm literally so smart :3
|
||||
delete colors['lightBlue'];
|
||||
delete colors['warmGray'];
|
||||
delete colors['trueGray'];
|
||||
delete colors['coolGray'];
|
||||
delete colors['blueGray'];
|
||||
|
||||
module.exports = {
|
||||
content: ['./resources/views/**/*.blade.php', './resources/scripts/**/*.{js,ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
jakarta: ['"Plus Jakarta Sans"', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
...colors,
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
black: '#000000',
|
||||
brandGrad: 'radial-gradient(109.26% 109.26% at 49.83% 13.37%, #FF343C 0%, #F06F53 100%)',
|
||||
brand: '#fa4e49',
|
||||
},
|
||||
transitionDuration: {
|
||||
250: '250ms',
|
||||
},
|
||||
},
|
||||
},
|
||||
// plugins: [require('tailwindcss-animate'), require('tailwindcss-inner-border'), require('tailwind-scrollbar')],
|
||||
};
|
||||
Reference in New Issue
Block a user