Refactored component custom styling

Switched to library bootstrap css

front/src/pages/AddPage.tsx

@@ -1,4 +1,4 @@
-import { FormEventHandler, useEffect, useState } from 'react'
+import { CSSProperties, FormEventHandler, useEffect, useState } from 'react'
 import { Form, Button, Card } from 'react-bootstrap'
 import { MapContainer, TileLayer } from 'react-leaflet'
 import { latLng } from 'leaflet'
@@ -11,6 +11,19 @@ import { stations, lines, lineNames } from '../assets/metro'
 import { fallbackError, gotError } from '../hooks/api/useFetch'
 import { useOsmAddresses } from '../hooks/api'
 
+const styles = {
+    modal: {
+        height: 'calc(100vh - 3rem)',
+    } as CSSProperties,
+    body: {
+        overflowY: 'auto',
+    } as CSSProperties,
+    map: {
+        width: '100%',
+        height: 400,
+    } as CSSProperties,
+}
+
 function AddPage() {
     const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227))
 
@@ -54,8 +67,8 @@ function AddPage() {
     }
 
     return (
-        <Card className='m-4' style={{ height: 'calc(100vh - 3rem)' }}>
-            <Card.Body style={{ overflowY: 'auto' }} >
+        <Card className='m-4' style={styles.modal}>
+            <Card.Body style={styles.body} >
                 <Form onSubmit={handleSubmit}>
                     <Form.Group className='mb-3' controlId='name'>
                         <Form.Label>Заголовок объявления</Form.Label>
@@ -84,7 +97,7 @@ function AddPage() {
                         <div className='mb-3'>
                             <MapContainer
                                 scrollWheelZoom={false}
-                                style={{ width: '100%', height: 400 }}
+                                style={styles.map}
                                 center={addressPosition}
                                 zoom={13}
                             >
@@ -143,19 +156,19 @@ function AddPage() {
                         <div className='mb-3'>
                             {trashboxes.loading
                                 ? (
-                                    <div style={{ height: 400 }}>
+                                    <div style={styles.map}>
                                         <p>Загрузка...</p>
                                     </div>
                                 ) : (
                                     gotError(trashboxes) ? (
                                         <p
-                                            style={{ height: 400 }}
+                                            style={styles.map}
                                             className='text-danger'
                                         >{trashboxes.error}</p>
                                     ) : (
                                         <MapContainer
                                             scrollWheelZoom={false}
-                                            style={{ width: '100%', height: 400 }}
+                                            style={styles.map}
                                             center={addressPosition}
                                             zoom={13}
                                             className=''

front/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { CSSProperties, useEffect, useState } from 'react'
 import Stories from 'react-insta-stories'
 import { Story } from 'react-insta-stories/dist/interfaces'
 
@@ -44,17 +44,22 @@ const fallbackStory = (text = '', isError = false): Story[] => [{
         useEffect(() => { action('pause') }, [action])
 
         return (
-            <div style={{ margin: 'auto' }} className={isError ? 'text-danger' : ''}>
+            <div style={styles.center} className={isError ? 'text-danger' : ''}>
                 {text || <img src={puffSpinner} />}
             </div>
         )
     },
 }]
 
-const storiesContainerCSS = {
-    display: 'flex',
-    justifyContent: 'center',
-    backgroundColor: 'rgb(17, 17, 17)'
+const styles = {
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        backgroundColor: 'rgb(17, 17, 17)',
+    } as CSSProperties,
+    center: {
+        margin: 'auto'
+    } as CSSProperties,
 }
 
 function HomePage() {
@@ -69,7 +74,7 @@ function HomePage() {
 
     return (<>
         <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
-        <div style={storiesContainerCSS}>
+        <div style={styles.container}>
             <Stories
                 stories={stories}
                 defaultInterval={11000}