From 27ae5909818f7ce6b17fc2784b59324f1796873f Mon Sep 17 00:00:00 2001 From: dm1sh Date: Sat, 15 Jul 2023 12:24:13 +0300 Subject: [PATCH] Refactored component custom styling Switched to library bootstrap css --- front/index.html | 2 - front/src/components/AnnouncementDetails.tsx | 11 ++++- front/src/components/BottomNavBar.tsx | 47 +++++++++++--------- front/src/main.tsx | 1 + front/src/pages/AddPage.tsx | 27 ++++++++--- front/src/pages/HomePage.tsx | 19 +++++--- 6 files changed, 68 insertions(+), 39 deletions(-) diff --git a/front/index.html b/front/index.html index 16a1e36..1b9c6ff 100644 --- a/front/index.html +++ b/front/index.html @@ -5,8 +5,6 @@ Porridger - -
diff --git a/front/src/components/AnnouncementDetails.tsx b/front/src/components/AnnouncementDetails.tsx index c4b8da6..352b138 100644 --- a/front/src/components/AnnouncementDetails.tsx +++ b/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 (
diff --git a/front/src/components/BottomNavBar.tsx b/front/src/components/BottomNavBar.tsx index 88a4cab..03c8d7f 100644 --- a/front/src/components/BottomNavBar.tsx +++ b/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 ( -
-
+
+
- toggleFilters(true)}> + toggleFilters(true)}> Фильтровать объявления - + Опубликовать объявление - + Личный кабинет diff --git a/front/src/main.tsx b/front/src/main.tsx index a3955bf..20632c1 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' +import 'bootstrap/dist/css/bootstrap.min.css' ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/front/src/pages/AddPage.tsx b/front/src/pages/AddPage.tsx index 17816b6..425bc42 100644 --- a/front/src/pages/AddPage.tsx +++ b/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 ( - - + +
Заголовок объявления @@ -84,7 +97,7 @@ function AddPage() {
@@ -143,19 +156,19 @@ function AddPage() {
{trashboxes.loading ? ( -
+

Загрузка...

) : ( gotError(trashboxes) ? (

{trashboxes.error}

) : ( [{ useEffect(() => { action('pause') }, [action]) return ( -
+
{text || }
) }, }] -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 (<> -
+