restart always to containers, adjusted date displaying

client/index.html

@@ -4,6 +4,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/turtle.svg"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

client/src/components/chat/chatArea/MessageElement.tsx

@@ -5,7 +5,6 @@ import { ChatMessagesProps } from '@/types/types.ts';
 import { useChat } from '@/context/chat/useChat.ts';
 import { AuthContext } from '@/utils/AuthProvider.tsx';
 import { format, isToday, isYesterday, formatDistanceToNow } from 'date-fns';
-import { pl } from 'date-fns/locale';
 
 type AnimatedMessageProps = {
   message: ChatMessagesProps;
@@ -26,20 +25,19 @@ const MessageElement = ({ onDelete, message }: AnimatedMessageProps) => {
 
   const formatMessageDate = (date: Date) => {
     if (isToday(date)) {
-      return `Dzisiaj o ${format(date, 'HH:mm')}`;
+      return `Today ${format(date, 'HH:mm')}`;
     }
     if (isYesterday(date)) {
-      return `Wczoraj o ${format(date, 'HH:mm')}`;
+      return `Yesterday ${format(date, 'HH:mm')}`;
     }
-    return format(date, "d MMMM yyyy 'o' HH:mm", { locale: pl });
+    return format(date, 'dd.MM.yyyy HH:mm');
   };
 
   const messageDate = new Date(message.sent_at);
   const formattedDate = formatMessageDate(messageDate);
-  const fullDate = format(messageDate, "d MMMM yyyy 'o' HH:mm", { locale: pl });
+  const fullDate = format(messageDate, 'dd.MM.yyyy HH:mm');
   const timeAgo = formatDistanceToNow(messageDate, {
     addSuffix: true,
-    locale: pl,
   });
 
   const canDelete =
@@ -57,7 +55,7 @@ const MessageElement = ({ onDelete, message }: AnimatedMessageProps) => {
           <div className="flex items-baseline space-x-2">
             <span className="font-bold text-emerald-400">{message.sender}</span>
             <span
-              className="text-gray-600 text-[11px] antialiased"
+              className="text-gray-600 text-[11px] antialiased font-sans font-semibold"
               title={`${fullDate} (${timeAgo})`}
             >
               {formattedDate}

client/tailwind.config.js

@@ -3,6 +3,9 @@ export default {
   darkMode: ['class'],
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
+    fontFamily: {
+      sans: ['"Open Sans"', 'sans-serif'],
+    },
     extend: {
       borderRadius: {
         lg: 'var(--radius)',