feat: updated app to tailwind 4.x

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -55,7 +55,7 @@ export const ChannelChat = ({
         <div className="flex-1 flex items-center justify-center">
           <EmptyState />
         </div>
-        <div className="flex-shrink-0 p-4 w-full dark:bg-gray-900">
+        <div className="shrink-0 p-4 w-full dark:bg-gray-900">
           <MessageInput to={to} channel={channel} maxBytes={200} />
         </div>
       </div>
@@ -81,7 +81,7 @@ export const ChannelChat = ({
           <div ref={messagesEndRef} className="w-full" />
         </div>
       </div>
-      <div className="flex-shrink-0 mt-2 p-4 w-full dark:bg-gray-900">
+      <div className="shrink-0 mt-2 p-4 w-full dark:bg-gray-900">
         <MessageInput to={to} channel={channel} maxBytes={200} />
       </div>
     </div>

src/components/PageComponents/Messages/Message.tsx

@@ -76,7 +76,7 @@ const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => {
   const isFailed = state === MESSAGE_STATES.FAILED;
   const iconClass = cn(
     className,
-    "text-gray-500 dark:text-gray-400 w-4 h-4 flex-shrink-0",
+    "text-gray-500 dark:text-gray-400 w-4 h-4 shrink-0",
   );
 
   const Icon = STATUS_ICON_MAP[state];
@@ -99,8 +99,8 @@ const getMessageTextStyles = (state: MessageState) => {
   return cn(
     "break-words overflow-hidden",
     isAcknowledged
-      ? "text-black dark:text-white"
-      : "text-black dark:text-gray-400",
+      ? "text-slate-900 dark:text-white"
+      : "text-slate-900 dark:text-gray-400",
     isFailed && "text-red-500 dark:text-red-500",
   );
 };
@@ -109,7 +109,7 @@ const TimeDisplay = ({
   date,
   className,
 }: { date: Date; className?: string }) => (
-  <div className={cn("flex items-center gap-2 flex-shrink-0", className)}>
+  <div className={cn("flex items-center gap-2 shrink-0", className)}>
     <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
       {date.toLocaleDateString()}
     </span>

src/components/PageComponents/Messages/MessageInput.tsx

@@ -94,7 +94,7 @@ export const MessageInput = ({
           });
         }}
       >
-        <div className="flex flex-grow gap-2">
+        <div className="flex grow gap-2">
           <span className="w-full">
             <Input
               autoFocus={true}

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -24,7 +24,7 @@ export const TraceRoute = ({
 
   return (
     <div className="ml-5 flex">
-      <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+      <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
         <p className="font-semibold">Route to destination:</p>
         <p>{to?.user?.longName}</p>
         <p>↓ {snrTowards?.[0] ? snrTowards[0] : "??"}dB</p>
@@ -39,7 +39,7 @@ export const TraceRoute = ({
         {from?.user?.longName}
       </span>
       {routeBack ? (
-        <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+        <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
           <p className="font-semibold">Route back:</p>
           <p>{from?.user?.longName}</p>
           <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>