Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/pages/Timers/Timers.tsx

src/components/Timer/Timer.module.css

@@ -31,6 +31,7 @@
     border-color: #DCC3F8;
     border-width: 0.8rem;
     border-style: solid;
+    margin: 0 auto;
 }
 
 .clock_text {
@@ -54,6 +55,22 @@
     gap: 1.6rem;
 }
 
+@media (max-width: 768px) {
+    .timer_container {
+        width: 100%;
+        max-width: 350px;
+    }
+
+    .clock {
+        width: 22rem;
+        height: 22rem;
+    }
+
+    .clock_text {
+        font-size: 3.5rem;
+    }
+    }
+
 .dates_item {
     display: flex;
     justify-content: center;

src/pages/Timers/Timers.module.css

@@ -13,8 +13,41 @@ body, html {
     gap: 1.6rem;
 }
 
+.mobile_row {
+    display: flex;
+    gap: 1.6rem;
+}
+
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .header .header_item:first-child {
+        align-self: center;
+        margin: 0 auto;
+    }
+
+    .mobile_row {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 1rem;
+    }
+
     .header .header_item:nth-child(2) {
-    margin-left: auto;
+        margin-left: 0;
+    }
+
+    .timers_container {
+        justify-content: center;
+    }
+
+    .title {
+        font-size: 3.2rem;
+    }
 }
 
 .content {

src/pages/Timers/Timers.tsx

@@ -1,14 +1,14 @@
 import {useEffect, useState} from 'react';
 import Timer from '../../components/Timer/Timer';
 import styles from './Timers.module.css';
-import {formatFullTime, getClosestTime, timeTillDate} from "../../helpers/DateFunctions.ts";
+import {formatFullTime} from "../../helpers/DateFunctions.ts";
 import ReleaseList from "../../components/ReleaseList/ReleaseList.tsx";
 import Button from "../../components/Button/Button.tsx";
 
 const Timers = () => {
     const [time, setTime] = useState(new Date());
     const [isReleasesListOpen, setIsReleasesListOpen] = useState(false);
-    const [isReverseTime, setIsReverseTime] = useState(false);
+
 
     useEffect(() => {
         const intervalId = setInterval(() => {
@@ -16,34 +16,16 @@ const Timers = () => {
         }, 500);
 
         return () => clearInterval(intervalId);
-    }, []);
+    }, [])
 
-    const handleToggleTime = () => {
-        setIsReverseTime((prev) => !prev);
-    };
-
-    const targetTime = getClosestTime(22, 0);
-    const displayTime = isReverseTime ? timeTillDate(targetTime) : formatFullTime(time);
 
     return (
         <>
             <div className={styles.content}>
                 <header className={styles.header}>
-                    <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>
+                    <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>MetaTimer</a>
-                        MetaTimer
+                    <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>{formatFullTime(time)}</a>
-                    </a>
+                    <Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/>
-                    <a
-                        className={`${styles.header_text} ${styles.title} ${styles.header_item}`}
-                        onClick={handleToggleTime}
-                        style={{ cursor: 'pointer' }}
-                    >
-                        {displayTime}
-                    </a>
-                    <Button
-                        className={styles.header_item}
-                        label={"?"}
-                        onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}
-                    />
                 </header>
                 <div className={styles.timers_container}>
                     <Timer id={"timer_1"}/>
@@ -54,7 +36,7 @@ const Timers = () => {
             </div>
             <ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} />
         </>
-    );
+    )
-};
+}
 
 export default Timers;