@@ -334,7 +334,7 @@ const PlayersComponent = () => {
@@ -343,7 +343,7 @@ const PlayersComponent = () => {
Neil Sims
- email@flowbite.com
+ email@mixyboos.com
@@ -356,7 +356,7 @@ const PlayersComponent = () => {
@@ -365,7 +365,7 @@ const PlayersComponent = () => {
Bonnie Green
- email@flowbite.com
+ email@mixyboos.com
@@ -378,7 +378,7 @@ const PlayersComponent = () => {
@@ -387,7 +387,7 @@ const PlayersComponent = () => {
Michael Gough
- email@flowbite.com
+ email@miyboos.com
@@ -400,7 +400,7 @@ const PlayersComponent = () => {
@@ -409,7 +409,7 @@ const PlayersComponent = () => {
Thomes Lean
- email@flowbite.com
+ email@mixyboos.com
@@ -422,7 +422,7 @@ const PlayersComponent = () => {
@@ -431,7 +431,7 @@ const PlayersComponent = () => {
Lana Byrd
- email@flowbite.com
+ email@mixyboos.com
diff --git a/src/lib/components/widgets/CopyInput.tsx b/src/lib/components/widgets/CopyInput.tsx
index a2fe0c8..20c9508 100644
--- a/src/lib/components/widgets/CopyInput.tsx
+++ b/src/lib/components/widgets/CopyInput.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import { Tooltip } from "flowbite-react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { HiOutlineDuplicate } from "react-icons/hi";
diff --git a/src/lib/utils/styles.ts b/src/lib/utils/styles.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/src/lib/utils/styles.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c9..270ab0b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,99 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 47.4% 11.2%;
+
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 47.4% 11.2%;
+
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 47.4% 11.2%;
+
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: 0 100% 50%;
+ --destructive-foreground: 210 40% 98%;
+
+ --ring: 215 20.2% 65.1%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 224 71% 4%;
+ --foreground: 213 31% 91%;
+
+ --muted: 223 47% 11%;
+ --muted-foreground: 215.4 16.3% 56.9%;
+
+ --accent: 216 34% 17%;
+ --accent-foreground: 210 40% 98%;
+
+ --popover: 224 71% 4%;
+ --popover-foreground: 215 20.2% 65.1%;
+
+ --border: 216 34% 17%;
+ --input: 216 34% 17%;
+
+ --card: 224 71% 4%;
+ --card-foreground: 213 31% 91%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 1.2%;
+
+ --secondary: 222.2 47.4% 11.2%;
+ --secondary-foreground: 210 40% 98%;
+
+ --destructive: 0 63% 31%;
+ --destructive-foreground: 210 40% 98%;
+
+ --ring: 216 34% 17%;
+
+ --radius: 0.5rem;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ font-feature-settings: "rlig" 1, "calt" 1;
+ }
+}
+
+@layer utilities {
+ .step {
+ counter-increment: step;
+ }
+
+ .step:before {
+ @apply absolute inline-flex h-8 w-8 items-center justify-center rounded-full bg-muted text-center -indent-px text-base font-medium;
+ @apply ml-[-41px];
+ content: counter(step);
+ }
+}
+
+@media (max-width: 640px) {
+ .container {
+ @apply px-4;
+ }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d4d3fa2..f754fd1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,9 +1,77 @@
import { type Config } from "tailwindcss";
+import { fontFamily } from "tailwindcss/defaultTheme";
export default {
+ darkMode: ["class"],
+
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
- extend: {},
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: `var(--radius)`,
+ md: `calc(var(--radius) - 2px)`,
+ sm: "calc(var(--radius) - 4px)",
+ },
+ fontFamily: {
+ sans: ["var(--font-sans)", ...fontFamily.sans],
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
},
- plugins: [],
+ plugins: [require("tailwindcss-animate")],
} satisfies Config;