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.
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-11-17 14:10:18 +03:00
parent 9b224ef4b7
commit 71ee0c1c0e
5 changed files with 20 additions and 25 deletions

View File

@ -118,10 +118,9 @@ export const SignInPage: React.FC = () => {
colorScheme="blue" colorScheme="blue"
size="lg" size="lg"
w="full" w="full"
loading={isSubmitting}
disabled={isSubmitting} disabled={isSubmitting}
> >
Войти {isSubmitting ? 'Вход...' : 'Войти'}
</Button> </Button>
<Text textAlign="center" fontSize="sm"> <Text textAlign="center" fontSize="sm">

View File

@ -136,10 +136,9 @@ export const SignUpPage: React.FC = () => {
colorScheme="blue" colorScheme="blue"
size="lg" size="lg"
w="full" w="full"
loading={isSubmitting}
disabled={isSubmitting} disabled={isSubmitting}
> >
Зарегистрироваться {isSubmitting ? 'Регистрация...' : 'Зарегистрироваться'}
</Button> </Button>
<Text textAlign="center" fontSize="sm"> <Text textAlign="center" fontSize="sm">

View File

@ -25,7 +25,7 @@ export const MainPage = () => {
return ( return (
<Box minH="100vh" bg="gray.50"> <Box minH="100vh" bg="gray.50">
{/* Header */} {/* 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"> <Container maxW="6xl">
<HStack justify="space-between"> <HStack justify="space-between">
<Heading size="lg">Smoke Tracker</Heading> <Heading size="lg">Smoke Tracker</Heading>
@ -44,11 +44,11 @@ export const MainPage = () => {
</Box> </Box>
{/* Main content */} {/* 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={8}>
<VStack gap={2}> <VStack gap={2}>
<Heading size="2xl">Добро пожаловать в Smoke Tracker!</Heading> <Heading size={{ base: 'xl', md: '2xl' }} textAlign="center">Добро пожаловать в Smoke Tracker!</Heading>
<Text fontSize="lg" color="gray.600" textAlign="center"> <Text fontSize={{ base: 'md', md: 'lg' }} color="gray.600" textAlign="center">
Приложение для отслеживания привычки курения Приложение для отслеживания привычки курения
</Text> </Text>
</VStack> </VStack>

View File

@ -98,9 +98,9 @@ export const StatsPage: React.FC = () => {
const maxPerDay = Math.max(...stats.map((s) => s.count), 0) const maxPerDay = Math.max(...stats.map((s) => s.count), 0)
return ( 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"> <VStack gap={6} maxW="6xl" mx="auto">
<Heading size="2xl">Статистика курения</Heading> <Heading size={{ base: 'xl', md: '2xl' }}>Статистика курения</Heading>
<HStack w="full" gap={4}> <HStack w="full" gap={4}>
<Link to={URLs.baseUrl}> <Link to={URLs.baseUrl}>
@ -117,7 +117,7 @@ export const StatsPage: React.FC = () => {
{/* Date range selector */} {/* Date range selector */}
<Card.Root w="full"> <Card.Root w="full">
<Card.Body> <Card.Body p={{ base: 4, md: 6 }}>
<VStack gap={4} align="stretch"> <VStack gap={4} align="stretch">
<Heading size="md">Выберите период</Heading> <Heading size="md">Выберите период</Heading>
@ -142,11 +142,10 @@ export const StatsPage: React.FC = () => {
<Button <Button
colorScheme="teal" colorScheme="teal"
onClick={fetchStats} onClick={fetchStats}
loading={isLoading}
disabled={isLoading} disabled={isLoading}
mt={7} mt={7}
> >
Обновить {isLoading ? 'Загрузка...' : 'Обновить'}
</Button> </Button>
</Box> </Box>
</HStack> </HStack>
@ -166,7 +165,7 @@ export const StatsPage: React.FC = () => {
{/* Summary statistics */} {/* Summary statistics */}
<Card.Root w="full"> <Card.Root w="full">
<Card.Body> <Card.Body p={{ base: 4, md: 6 }}>
<Stack direction={{ base: 'column', md: 'row' }} gap={6} justify="space-around"> <Stack direction={{ base: 'column', md: 'row' }} gap={6} justify="space-around">
<VStack> <VStack>
<Text fontSize="3xl" fontWeight="bold" color="blue.500"> <Text fontSize="3xl" fontWeight="bold" color="blue.500">
@ -200,7 +199,7 @@ export const StatsPage: React.FC = () => {
{/* Chart */} {/* Chart */}
<Card.Root w="full"> <Card.Root w="full">
<Card.Body> <Card.Body p={{ base: 2, md: 6 }}>
<VStack gap={4} align="stretch"> <VStack gap={4} align="stretch">
<Heading size="md">График по дням</Heading> <Heading size="md">График по дням</Heading>
@ -217,7 +216,7 @@ export const StatsPage: React.FC = () => {
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart <LineChart
data={stats} data={stats}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}
> >
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis <XAxis

View File

@ -114,9 +114,9 @@ export const TrackerPage: React.FC = () => {
} }
return ( 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"> <VStack gap={6} maxW="4xl" mx="auto">
<Heading size="2xl">Трекер курения</Heading> <Heading size={{ base: 'xl', md: '2xl' }}>Трекер курения</Heading>
<HStack w="full" gap={4}> <HStack w="full" gap={4}>
<Link to={URLs.baseUrl}> <Link to={URLs.baseUrl}>
@ -133,7 +133,7 @@ export const TrackerPage: React.FC = () => {
{/* Quick log button */} {/* Quick log button */}
<Card.Root w="full" bg="blue.50"> <Card.Root w="full" bg="blue.50">
<Card.Body> <Card.Body p={{ base: 4, md: 6 }}>
<VStack gap={4}> <VStack gap={4}>
<Text fontSize="lg" fontWeight="bold"> <Text fontSize="lg" fontWeight="bold">
Быстрая запись Быстрая запись
@ -143,10 +143,9 @@ export const TrackerPage: React.FC = () => {
size="lg" size="lg"
w="full" w="full"
onClick={logQuick} onClick={logQuick}
loading={isLoading}
disabled={isLoading} disabled={isLoading}
> >
Записать сигарету (текущее время) {isLoading ? 'Запись...' : 'Записать сигарету (текущее время)'}
</Button> </Button>
</VStack> </VStack>
</Card.Body> </Card.Body>
@ -154,7 +153,7 @@ export const TrackerPage: React.FC = () => {
{/* Form with custom time and note */} {/* Form with custom time and note */}
<Card.Root w="full"> <Card.Root w="full">
<Card.Body> <Card.Body p={{ base: 4, md: 6 }}>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<VStack gap={4} align="stretch"> <VStack gap={4} align="stretch">
<Heading size="md">Запись с дополнительными данными</Heading> <Heading size="md">Запись с дополнительными данными</Heading>
@ -188,10 +187,9 @@ export const TrackerPage: React.FC = () => {
type="submit" type="submit"
colorScheme="green" colorScheme="green"
w="full" w="full"
loading={isLoading}
disabled={isLoading} disabled={isLoading}
> >
Записать с заметкой {isLoading ? 'Запись...' : 'Записать с заметкой'}
</Button> </Button>
</VStack> </VStack>
</form> </form>
@ -221,7 +219,7 @@ export const TrackerPage: React.FC = () => {
{/* Recent cigarettes list */} {/* Recent cigarettes list */}
<Card.Root w="full"> <Card.Root w="full">
<Card.Body> <Card.Body p={{ base: 4, md: 6 }}>
<VStack gap={4} align="stretch"> <VStack gap={4} align="stretch">
<Heading size="md">Последние записи</Heading> <Heading size="md">Последние записи</Heading>