migrate to tailwind v4

5 files changed, 8 insertions, 10 deletions

diff --git a/src/app/globals.css b/src/app/globals.css
index c7bbd41..fa064cc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap')
+layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
diff --git a/src/components/ChannelCard/ChannelCard.tsx b/src/components/ChannelCard/ChannelCard.tsx
index 7a41c22..f02eedb 100644
--- a/src/components/ChannelCard/ChannelCard.tsx
+++ b/src/components/ChannelCard/ChannelCard.tsx
@@ -34,7 +34,7 @@ const ChannelCard: React.FC<ChannelCardProps> = ({
     diff_30d,
 }) => {
     return (
-        <div className="max-w-4xl w-full mb-4 mt-4 rounded-xl overflow-hidden shadow-lg bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 p-4 sm:p-8 hover:shadow-2xl transition-all duration-300">
+        <div className="max-w-4xl w-full mb-4 mt-4 rounded-xl overflow-hidden shadow-lg bg-linear-to-r from-gray-800 via-gray-900 to-gray-800 p-4 sm:p-8 hover:shadow-2xl transition-all duration-300">
             <div className="flex flex-col sm:flex-row items-center mb-6">
                 <Image
                     src={avatarUrl}
diff --git a/src/components/SubscriberTable/TwitchDataTable.tsx b/src/components/SubscriberTable/TwitchDataTable.tsx
index 2294be3..765cf1a 100644
--- a/src/components/SubscriberTable/TwitchDataTable.tsx
+++ b/src/components/SubscriberTable/TwitchDataTable.tsx
@@ -98,11 +98,11 @@ const TwitchDataTable = ({ channel_data, timestamp }: TwitchDataTableProp) => {
                     <h3 className="font-bold text-gray-800 mb-1">MAX Column Color Key</h3>
                     <div>
                       <div className="flex items-center mb-1">
-                        <div className="h-3 w-3 bg-red-600 rounded-full mr-2 flex-shrink-0"></div>
+                        <div className="h-3 w-3 bg-red-600 rounded-full mr-2 shrink-0"></div>
                         <span className="text-gray-600">YouTube subscriber count is higher</span>
                       </div>
                       <div className="flex items-center">
-                        <div className="h-3 w-3 bg-purple-600 rounded-full mr-2 flex-shrink-0"></div>
+                        <div className="h-3 w-3 bg-purple-600 rounded-full mr-2 shrink-0"></div>
                         <span className="text-gray-600">Twitch follower count is higher</span>
                       </div>
                     </div>
diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
index 9fc8c34..9ae8d1e 100644
--- a/src/components/TitleBar/TitleBar.tsx
+++ b/src/components/TitleBar/TitleBar.tsx
@@ -94,7 +94,7 @@ const TitleBar: React.FC<TitleBarProps> = ({
         >
           <button
             onClick={toggleSidebar}
-            className="text-white text-3xl mr-4 focus:outline-none"
+            className="text-white text-3xl mr-4 focus:outline-none hover:cursor-pointer"
           >
             <FontAwesomeIcon icon={isSidebarOpen ? faTimes : faBars} />
           </button>
diff --git a/src/pages/twitch/index.tsx b/src/pages/twitch/index.tsx
index fc389c2..eea05e9 100644
--- a/src/pages/twitch/index.tsx
+++ b/src/pages/twitch/index.tsx
@@ -2,7 +2,6 @@ import TwitchDataTable, {
   type TwitchDataTableProp,
 } from "../../components/SubscriberTable/TwitchDataTable";
 import TitleBar from "../../components/TitleBar/TitleBar";
-import Announcement from "../../components/Announcement";
 import "../../app/globals.css";
 
 type Props = {
@@ -50,4 +49,4 @@ export async function getServerSideProps() {
   };
 }
 
-export default TwitchPage;
\ No newline at end of file
+export default TwitchPage;