From 71ee0c1c0e88c9f1110fb24f936a5721192d8a26 Mon Sep 17 00:00:00 2001
From: Primakov Alexandr Alexandrovich <primakov.pro@yandex.ru>
Date: Mon, 17 Nov 2025 14:10:18 +0300
Subject: [PATCH] Enhance UI feedback and responsiveness across authentication
 and tracking pages

- Updated button text to reflect loading states in SignIn, SignUp, and Tracker pages.
- Adjusted padding and heading sizes for better responsiveness in Main, Stats, and Tracker pages.
- Improved layout consistency by modifying padding properties in Card components.
---
 src/pages/auth/signin.tsx     |  3 +--
 src/pages/auth/signup.tsx     |  3 +--
 src/pages/main/main.tsx       |  8 ++++----
 src/pages/stats/stats.tsx     | 15 +++++++--------
 src/pages/tracker/tracker.tsx | 16 +++++++---------
 5 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
index 9424a42..d5e0f31 100644
--- a/src/pages/auth/signin.tsx
+++ b/src/pages/auth/signin.tsx
@@ -118,10 +118,9 @@ export const SignInPage: React.FC = () => {
                   colorScheme="blue"
                   size="lg"
                   w="full"
-                  loading={isSubmitting}
                   disabled={isSubmitting}
                 >
-                  Войти
+                  {isSubmitting ? 'Вход...' : 'Войти'}
                 </Button>
 
                 <Text textAlign="center" fontSize="sm">
diff --git a/src/pages/auth/signup.tsx b/src/pages/auth/signup.tsx
index 37b6444..91b3ba6 100644
--- a/src/pages/auth/signup.tsx
+++ b/src/pages/auth/signup.tsx
@@ -136,10 +136,9 @@ export const SignUpPage: React.FC = () => {
                   colorScheme="blue"
                   size="lg"
                   w="full"
-                  loading={isSubmitting}
                   disabled={isSubmitting}
                 >
-                  Зарегистрироваться
+                  {isSubmitting ? 'Регистрация...' : 'Зарегистрироваться'}
                 </Button>
 
                 <Text textAlign="center" fontSize="sm">
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index 7948c3d..639a60a 100644
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -25,7 +25,7 @@ export const MainPage = () => {
   return (
     <Box minH="100vh" bg="gray.50">
       {/* Header */}
-      <Box bg="teal.500" color="white" py={4} px={8} shadow="md">
+      <Box bg="teal.500" color="white" py={4} px={{ base: 2, md: 8 }} shadow="md">
         <Container maxW="6xl">
           <HStack justify="space-between">
             <Heading size="lg">Smoke Tracker</Heading>
@@ -44,11 +44,11 @@ export const MainPage = () => {
       </Box>
 
       {/* Main content */}
-      <Container maxW="6xl" py={12}>
+      <Container maxW="6xl" py={{ base: 6, md: 12 }} px={{ base: 2, md: 6 }}>
         <VStack gap={8}>
           <VStack gap={2}>
-            <Heading size="2xl">Добро пожаловать в Smoke Tracker!</Heading>
-            <Text fontSize="lg" color="gray.600" textAlign="center">
+            <Heading size={{ base: 'xl', md: '2xl' }} textAlign="center">Добро пожаловать в Smoke Tracker!</Heading>
+            <Text fontSize={{ base: 'md', md: 'lg' }} color="gray.600" textAlign="center">
               Приложение для отслеживания привычки курения
             </Text>
           </VStack>
diff --git a/src/pages/stats/stats.tsx b/src/pages/stats/stats.tsx
index fa65fdf..6e12179 100644
--- a/src/pages/stats/stats.tsx
+++ b/src/pages/stats/stats.tsx
@@ -98,9 +98,9 @@ export const StatsPage: React.FC = () => {
   const maxPerDay = Math.max(...stats.map((s) => s.count), 0)
 
   return (
-    <Box minH="100vh" bg="gray.50" p={8}>
+    <Box minH="100vh" bg="gray.50" p={{ base: 2, md: 8 }}>
       <VStack gap={6} maxW="6xl" mx="auto">
-        <Heading size="2xl">Статистика курения</Heading>
+        <Heading size={{ base: 'xl', md: '2xl' }}>Статистика курения</Heading>
 
         <HStack w="full" gap={4}>
           <Link to={URLs.baseUrl}>
@@ -117,7 +117,7 @@ export const StatsPage: React.FC = () => {
 
         {/* Date range selector */}
         <Card.Root w="full">
-          <Card.Body>
+          <Card.Body p={{ base: 4, md: 6 }}>
             <VStack gap={4} align="stretch">
               <Heading size="md">Выберите период</Heading>
 
@@ -142,11 +142,10 @@ export const StatsPage: React.FC = () => {
                   <Button
                     colorScheme="teal"
                     onClick={fetchStats}
-                    loading={isLoading}
                     disabled={isLoading}
                     mt={7}
                   >
-                    Обновить
+                    {isLoading ? 'Загрузка...' : 'Обновить'}
                   </Button>
                 </Box>
               </HStack>
@@ -166,7 +165,7 @@ export const StatsPage: React.FC = () => {
 
         {/* Summary statistics */}
         <Card.Root w="full">
-          <Card.Body>
+          <Card.Body p={{ base: 4, md: 6 }}>
             <Stack direction={{ base: 'column', md: 'row' }} gap={6} justify="space-around">
               <VStack>
                 <Text fontSize="3xl" fontWeight="bold" color="blue.500">
@@ -200,7 +199,7 @@ export const StatsPage: React.FC = () => {
 
         {/* Chart */}
         <Card.Root w="full">
-          <Card.Body>
+          <Card.Body p={{ base: 2, md: 6 }}>
             <VStack gap={4} align="stretch">
               <Heading size="md">График по дням</Heading>
 
@@ -217,7 +216,7 @@ export const StatsPage: React.FC = () => {
                   <ResponsiveContainer width="100%" height="100%">
                     <LineChart
                       data={stats}
-                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                      margin={{ top: 5, right: 5, left: 0, bottom: 5 }}
                     >
                       <CartesianGrid strokeDasharray="3 3" />
                       <XAxis
diff --git a/src/pages/tracker/tracker.tsx b/src/pages/tracker/tracker.tsx
index 2a0bccc..110e419 100644
--- a/src/pages/tracker/tracker.tsx
+++ b/src/pages/tracker/tracker.tsx
@@ -114,9 +114,9 @@ export const TrackerPage: React.FC = () => {
   }
 
   return (
-    <Box minH="100vh" bg="gray.50" p={8}>
+    <Box minH="100vh" bg="gray.50" p={{ base: 2, md: 8 }}>
       <VStack gap={6} maxW="4xl" mx="auto">
-        <Heading size="2xl">Трекер курения</Heading>
+        <Heading size={{ base: 'xl', md: '2xl' }}>Трекер курения</Heading>
 
         <HStack w="full" gap={4}>
           <Link to={URLs.baseUrl}>
@@ -133,7 +133,7 @@ export const TrackerPage: React.FC = () => {
 
         {/* Quick log button */}
         <Card.Root w="full" bg="blue.50">
-          <Card.Body>
+          <Card.Body p={{ base: 4, md: 6 }}>
             <VStack gap={4}>
               <Text fontSize="lg" fontWeight="bold">
                 Быстрая запись
@@ -143,10 +143,9 @@ export const TrackerPage: React.FC = () => {
                 size="lg"
                 w="full"
                 onClick={logQuick}
-                loading={isLoading}
                 disabled={isLoading}
               >
-                Записать сигарету (текущее время)
+                {isLoading ? 'Запись...' : 'Записать сигарету (текущее время)'}
               </Button>
             </VStack>
           </Card.Body>
@@ -154,7 +153,7 @@ export const TrackerPage: React.FC = () => {
 
         {/* Form with custom time and note */}
         <Card.Root w="full">
-          <Card.Body>
+          <Card.Body p={{ base: 4, md: 6 }}>
             <form onSubmit={handleSubmit(onSubmit)}>
               <VStack gap={4} align="stretch">
                 <Heading size="md">Запись с дополнительными данными</Heading>
@@ -188,10 +187,9 @@ export const TrackerPage: React.FC = () => {
                   type="submit"
                   colorScheme="green"
                   w="full"
-                  loading={isLoading}
                   disabled={isLoading}
                 >
-                  Записать с заметкой
+                  {isLoading ? 'Запись...' : 'Записать с заметкой'}
                 </Button>
               </VStack>
             </form>
@@ -221,7 +219,7 @@ export const TrackerPage: React.FC = () => {
 
         {/* Recent cigarettes list */}
         <Card.Root w="full">
-          <Card.Body>
+          <Card.Body p={{ base: 4, md: 6 }}>
             <VStack gap={4} align="stretch">
               <Heading size="md">Последние записи</Heading>