Refactored component custom styling

Switched to library bootstrap css

front/src/components/AnnouncementDetails.tsx

@@ -6,19 +6,28 @@ import { categoryNames } from '../assets/category'
 import { useBook } from '../hooks/api'
 import { Announcement } from '../api/announcement/types'
 import { iconItem } from '../utils/markerIcons'
+import { CSSProperties } from 'react'
 
 type AnnouncementDetailsProps = {
     close: () => void,
     announcement: Announcement
 }
 
+const styles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    } as CSSProperties,
+}
+
 function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }: AnnouncementDetailsProps) {
     const { handleBook, status: bookStatus } = useBook(id)
 
     return (
         <div
             className='modal'
-            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            style={styles.container}
         >
             <Modal.Dialog style={{ minWidth: '50vw' }}>
                 <Modal.Header closeButton onHide={close}>

front/src/components/BottomNavBar.tsx

@@ -3,27 +3,30 @@ import { Link } from 'react-router-dom'
 import addIcon from '../assets/addIcon.svg'
 import filterIcon from '../assets/filterIcon.svg'
 import userIcon from '../assets/userIcon.svg'
+import { CSSProperties } from 'react'
 
-const navBarStyles: React.CSSProperties = {
-    backgroundColor: 'var(--bs-success)',
-    height: 56,
-    width: '100%',
+const styles = {
+    navBar: {
+        backgroundColor: 'var(--bs-success)',
+        height: 56,
+        width: '100%',
+    } as CSSProperties,
+    navBarGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        height: '100%',
+        margin: 'auto'
+    } as CSSProperties,
+    navBarElement: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    } as CSSProperties,
 }
 
-const navBarGroupStyles: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'row',
-    height: '100%',
-    margin: 'auto'
-}
 
-const navBarElementStyles: React.CSSProperties = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-}
 
 type BottomNavBarProps = {
     width: number,
@@ -32,18 +35,18 @@ type BottomNavBarProps = {
 
 function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) {
     return (
-        <div style={navBarStyles}>
-            <div style={{ ...navBarGroupStyles, width: width }}>
+        <div style={styles.navBar}>
+            <div style={{ ...styles.navBarGroup, width: width }}>
 
-                <a style={navBarElementStyles} onClick={() => toggleFilters(true)}>
+                <a style={styles.navBarElement} onClick={() => toggleFilters(true)}>
                     <img src={filterIcon} alt='Фильтровать объявления' title='Фильтровать объявления' />
                 </a>
 
-                <Link style={navBarElementStyles} to='/add' >
+                <Link style={styles.navBarElement} to='/add' >
                     <img src={addIcon} alt='Опубликовать объявление' title='Опубликовать объявление' />
                 </Link>
 
-                <Link style={navBarElementStyles} to={'/user'} >
+                <Link style={styles.navBarElement} to={'/user'} >
                     <img src={userIcon} alt='Личный кабинет' title='Личный кабинет' />
                 </Link>