Added back header to ann add and auth pages

Unified card layout

front/src/components/CardLayout.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react'
+import { Card } from 'react-bootstrap'
+
+import { BackHeader } from '.'
+
+type CardLayoutProps = {
+    text: string
+}
+
+const CardLayout = ({ text, children }: PropsWithChildren<CardLayoutProps>) => (
+    <>
+        <div className='mx-4 px-3'>
+            <BackHeader text={text} />
+        </div>
+        <Card className='m-4 mt-0'>
+            <Card.Body>
+                {children}
+            </Card.Body>
+        </Card>
+    </>
+)
+
+export default CardLayout

front/src/pages/AddPage.tsx

@@ -3,20 +3,15 @@ import { Form, Button, Card } from 'react-bootstrap'
 import { MapContainer, TileLayer } from 'react-leaflet'
 import { latLng } from 'leaflet'
 
-import { ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
+import { BackHeader, ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
 import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
 import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
 import { fallbackError, gotError } from '../hooks/useFetch'
 import { useOsmAddresses } from '../hooks/api'
+import CardLayout from '../components/CardLayout'
 
 const styles = {
-    modal: {
-        height: 'calc(100vh - 3rem)',
-    } as CSSProperties,
-    body: {
-        overflowY: 'auto',
-    } as CSSProperties,
     map: {
         width: '100%',
         height: 400,
@@ -48,8 +43,7 @@ function AddPage() {
     }
 
     return (
-        <Card className='m-4' style={styles.modal}>
-            <Card.Body style={styles.body} >
+        <CardLayout text='Опубликовать объявление'>
             <Form onSubmit={handleSubmit}>
                 <Form.Group className='mb-3' controlId='name'>
                     <Form.Label>Заголовок объявления</Form.Label>
@@ -178,8 +172,7 @@ function AddPage() {
 
                 <Button variant='success' type='submit' {...addButton} />
             </Form>
-            </Card.Body>
-        </Card>
+        </CardLayout>
     )
 }
 

front/src/pages/LoginPage.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react'
-import { Card, Tabs, Tab } from 'react-bootstrap'
+import { Tabs, Tab } from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom'
 
 import { AuthForm } from '../components'
 import { isLiteralUnion } from '../utils/types'
+import CardLayout from '../components/CardLayout'
 
 const tabKeys = ['register', 'login'] as const
 type TabKeys = typeof tabKeys[number]
@@ -22,8 +23,7 @@ function LoginPage() {
     ), [navigate])
 
     return (
-        <Card className='m-4'>
-            <Card.Body>
+        <CardLayout text='Представьтесь'>
             <Tabs
                 activeKey={tab}
                 onSelect={(k) => isTabKeys(k) && setTab(k)}
@@ -37,8 +37,7 @@ function LoginPage() {
                     <AuthForm goBack={goBack} register={false} />
                 </Tab>
             </Tabs>
-            </Card.Body>
-        </Card>
+        </CardLayout>
     )
 }