chore: upgrade dependencies

Author: peritpatrio

app/globals.css

@@ -1,15 +1,43 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-xs: 440px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  --text-xxs: 0.625rem;
+}
+
+/*
+  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);
   }
+}
 
-  .text-shadow {
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
+@utility text-balance {
+  text-wrap: balance;
+}
+
+@utility text-shadow {
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .title-highlight {
@@ -118,3 +146,7 @@ input[type='checkbox']:focus + .checkbox {
   opacity: 20%;
   animation: fadeInOut 4s ease-in-out infinite;
 }
+
+button {
+  cursor: pointer;
+}

app/page.tsx

@@ -30,7 +30,7 @@ export default async function Home() {
           <Hero />
 
           <div className="text-shadow py-16 lg:my-24">
-            <h2 className="mx-auto max-w-screen-xs text-center text-2xl font-extrabold md:max-w-none md:text-3xl">
+            <h2 className="mx-auto max-w-(--breakpoint-xs) text-center text-2xl font-extrabold md:max-w-none md:text-3xl">
               Suosituimmat keskustelunaiheet tänään
             </h2>
 

bun.lockb

@@ -1,5 +1,5 @@
 export default function BottomFade() {
   return (
-    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 h-32 bg-gradient-to-t from-[#070b1e] to-black/0"></div>
+    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 h-32 bg-linear-to-t from-[#070b1e] to-black/0"></div>
   );
 }

components/BottomFade.tsx

@@ -4,7 +4,7 @@ const DELAYS = shuffle([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1
 
 export default function ChannelGrid({ channels }: { channels: Channel[] }) {
   return (
-    <div className="mt-8 grid gap-3 rounded-3xl border-t border-t-pink-100/10 bg-gradient-to-b from-black/10 to-black/0 p-6 backdrop-blur-sm xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 md:p-12">
+    <div className="mt-8 grid gap-3 rounded-3xl border-t border-t-pink-100/10 bg-linear-to-b from-black/10 to-black/0 p-6 backdrop-blur-xs xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 md:p-12">
       {channels.map((channel, i) => (
         <div key={channel.id} className="relative h-[5.5rem]">
           <div

components/ChannelGrid.tsx

@@ -14,7 +14,7 @@ export default function FeatureImage({
   return (
     <div className="relative rounded-[18px] p-px shadow-2xl">
       <div
-        className="fade-in-out absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[17px] bg-gradient-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
+        className="fade-in-out absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[17px] bg-linear-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
         style={{
           WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
           animationDelay: `${Math.floor(Math.random() * 5) + 1 * 0.5}s`,

components/FeatureImage.tsx

@@ -93,12 +93,12 @@ export default function Form() {
           </h2>
 
           <div className="mx-auto my-5 max-w-[300px] gap-2 space-y-2 sm:grid sm:max-w-none sm:grid-cols-4 sm:space-y-0">
-            <div className="col-span-3 flex rounded-[5px] bg-gradient-to-b from-fuchsia-50/30 to-fuchsia-800/50 md:rounded-[9px]">
+            <div className="col-span-3 flex rounded-[5px] bg-linear-to-b from-fuchsia-50/30 to-fuchsia-800/50 md:rounded-[9px]">
               <input
                 type="email"
                 name="email"
                 required
-                className={`m-px block grow rounded bg-gradient-to-b from-[#0b0b21] to-[#1e092e] px-3 py-2 text-fuchsia-100 placeholder:text-fuchsia-100/25 md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg ${isSubmitting ? 'opacity-75' : ''}`}
+                className={`m-px block grow rounded-sm bg-linear-to-b from-[#0b0b21] to-[#1e092e] px-3 py-2 text-fuchsia-100 placeholder:text-fuchsia-100/25 md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg ${isSubmitting ? 'opacity-75' : ''}`}
                 placeholder="[email protected]"
                 tabIndex={1}
               />
@@ -107,7 +107,7 @@ export default function Form() {
               <button
                 tabIndex={3}
                 type="submit"
-                className="text-shadow bg-button block h-full w-full rounded border border-pink-400 border-b-pink-600 border-t-pink-300 px-3 py-2 font-bold sm:text-base md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg"
+                className="text-shadow bg-button block h-full w-full rounded-sm border border-pink-400 border-b-pink-600 border-t-pink-300 px-3 py-2 font-bold sm:text-base md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg"
               >
                 {isSubmitting ? <Spinner /> : 'Liity'}
               </button>
@@ -120,10 +120,10 @@ export default function Form() {
                 type="checkbox"
                 name="terms"
                 required
-                className="h-3 w-3 opacity-5 focus:outline-none"
+                className="h-3 w-3 opacity-5 focus:outline-hidden"
                 tabIndex={2}
               />
-              <div className="checkbox absolute left-0 top-0 flex h-full w-full items-center justify-center rounded border border-white bg-transparent transition-colors">
+              <div className="checkbox absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-sm border border-white bg-transparent transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
                   <path
                     fillRule="evenodd"
@@ -159,7 +159,7 @@ export default function Form() {
 
       {message && (
         <>
-          <div className="text-shadow text-balance rounded-2xl border-t border-t-pink-100/10 bg-gradient-to-b from-black/20 to-black/0 p-10 text-center font-mono text-sm backdrop-blur-sm">
+          <div className="text-shadow text-balance rounded-2xl border-t border-t-pink-100/10 bg-linear-to-b from-black/20 to-black/0 p-10 text-center font-mono text-sm backdrop-blur-xs">
             {message}
           </div>
           {isSuccess && (

components/Form.tsx

@@ -6,7 +6,7 @@ export default function Spinner() {
       fill="none"
       viewBox="0 0 24 24"
     >
-      <circle className="opacity-35" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <circle className="opacity-35" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
       <path
         fill="currentColor"
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"

components/Spinner.tsx

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next-env.d.ts

@@ -12,23 +12,24 @@
   },
   "dependencies": {
     "lodash.shuffle": "4.2.0",
-    "next": "15.0.3",
-    "react": "18.3.1",
-    "react-confetti": "6.1.0",
-    "react-dom": "^18"
+    "next": "15.2.3",
+    "react": "19.0.0",
+    "react-confetti": "6.4.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.0.15",
     "@types/lodash.shuffle": "4.2.9",
-    "@types/node": "22.9.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "eslint": "9.15.0",
-    "eslint-config-next": "15.0.3",
-    "postcss": "8.4.49",
-    "prettier": "3.3.3",
-    "prettier-plugin-tailwindcss": "0.6.8",
-    "tailwindcss": "3.4.15",
-    "typescript": "5.6.3"
+    "@types/node": "22.13.12",
+    "@types/react": "19.0.12",
+    "@types/react-dom": "19.0.4",
+    "eslint": "9.23.0",
+    "eslint-config-next": "15.2.3",
+    "postcss": "8.5.3",
+    "prettier": "3.5.3",
+    "prettier-plugin-tailwindcss": "0.6.11",
+    "tailwindcss": "4.0.15",
+    "typescript": "5.8.2"
   },
   "prettier": {
     "printWidth": 120,