Refactored component custom styling

Switched to library bootstrap css

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>