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:
parent
9b224ef4b7
commit
71ee0c1c0e
@ -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">
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user