From 25402923b3d82c497b6fefb9bd54de66c79799d0 Mon Sep 17 00:00:00 2001 From: Sasha Chabin Date: Thu, 20 Jun 2024 01:20:34 +0500 Subject: [PATCH] Add feedback button to mainpage (#111) --- .../Feedback/Feedback.module.css | 34 ++++++++++++------- .../components/Common/Feedback/Feedback.tsx | 26 ++++++++++++++ .../Common/Feedback/Feedback.types.tsx | 4 +++ .../components/MainPage/MainPage.module.css | 1 + client/components/MainPage/MainPage.tsx | 2 ++ client/components/Map/Feedback/Feedback.tsx | 19 ----------- .../Map/MainContainer/MapMainContainer.tsx | 4 +-- client/pages/_document.tsx | 1 + client/pages/map.tsx | 1 - 9 files changed, 57 insertions(+), 35 deletions(-) rename client/components/{Map => Common}/Feedback/Feedback.module.css (64%) create mode 100644 client/components/Common/Feedback/Feedback.tsx create mode 100644 client/components/Common/Feedback/Feedback.types.tsx delete mode 100644 client/components/Map/Feedback/Feedback.tsx diff --git a/client/components/Map/Feedback/Feedback.module.css b/client/components/Common/Feedback/Feedback.module.css similarity index 64% rename from client/components/Map/Feedback/Feedback.module.css rename to client/components/Common/Feedback/Feedback.module.css index 8a4ef781..3b5cb857 100644 --- a/client/components/Map/Feedback/Feedback.module.css +++ b/client/components/Common/Feedback/Feedback.module.css @@ -1,23 +1,31 @@ .MapFeedback { display: flex; - height: 48px; - padding: 8px 24px; - - background: #f9d548; - border-radius: 64px; - justify-content: center; align-items: center; - - text-decoration: none; - - font-size: 20px; - font-style: normal; + border-radius: 64px; + background: #f9d548; font-weight: 400; - line-height: 105%; + font-style: normal; + font-size: 20px; + line-height: 1.05; + text-decoration: none; } /* leaflet styles for links have more specificity */ .MapFeedback.MapFeedback { color: var(--text-primary); -} \ No newline at end of file +} + +.MapFeedback_Size-m, +.MapFeedback_Size-l { + height: 48px; + padding: 8px 24px; +} + +@media screen and (min-width: 768px) { + .MapFeedback_Size-l { + height: 65px; + padding: 24px 32px; + font-size: 24px; + } +} diff --git a/client/components/Common/Feedback/Feedback.tsx b/client/components/Common/Feedback/Feedback.tsx new file mode 100644 index 00000000..cca30431 --- /dev/null +++ b/client/components/Common/Feedback/Feedback.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import classNames from 'classnames/bind'; + +import type { FeedbackProps } from './Feedback.types'; + +import styles from './Feedback.module.css'; + +const cn = classNames.bind(styles); + +export function Feedback({ + caption = 'Фидбек', + size +} : FeedbackProps) { + return ( + + {caption} + + ); +} diff --git a/client/components/Common/Feedback/Feedback.types.tsx b/client/components/Common/Feedback/Feedback.types.tsx new file mode 100644 index 00000000..c576bc7c --- /dev/null +++ b/client/components/Common/Feedback/Feedback.types.tsx @@ -0,0 +1,4 @@ +export type FeedbackProps = { + caption?: string; + size: 'm' | 'l'; +}; diff --git a/client/components/MainPage/MainPage.module.css b/client/components/MainPage/MainPage.module.css index ada050a9..d332cf77 100644 --- a/client/components/MainPage/MainPage.module.css +++ b/client/components/MainPage/MainPage.module.css @@ -35,6 +35,7 @@ font-weight: 400; margin: 0 0 0.4vw; font-size: 20px; + flex-grow: 1; } .MainPageCardGrid { diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx index 26298e00..2a592e71 100644 --- a/client/components/MainPage/MainPage.tsx +++ b/client/components/MainPage/MainPage.tsx @@ -17,6 +17,7 @@ import Logo from './Logo.svg'; import styles from './MainPage.module.css'; import { Marquee } from './Marquee/Marquee'; +import { Feedback } from 'components/Common/Feedback/Feedback'; const cn = classNames.bind(styles); @@ -101,6 +102,7 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems, articles }: Ma
Екатеринбурга +
diff --git a/client/components/Map/Feedback/Feedback.tsx b/client/components/Map/Feedback/Feedback.tsx deleted file mode 100644 index de33d348..00000000 --- a/client/components/Map/Feedback/Feedback.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import classNames from 'classnames/bind'; - -import styles from './Feedback.module.css'; - -const cn = classNames.bind(styles); - -export function Feedback() { - return ( - - Фидбек - - ); -} diff --git a/client/components/Map/MainContainer/MapMainContainer.tsx b/client/components/Map/MainContainer/MapMainContainer.tsx index 7f9c92b1..7565db9a 100644 --- a/client/components/Map/MainContainer/MapMainContainer.tsx +++ b/client/components/Map/MainContainer/MapMainContainer.tsx @@ -14,7 +14,7 @@ import { MapZoomControl } from 'components/Map/ZoomControl/MapZoomControl'; import { MapWelcomeMessage } from 'components/Map/WelcomeMessage/MapWelcomeMessage'; import { MapSearchBar } from 'components/Map/SearchBar/SearchBar'; import { Info } from 'components/Map/Info/Info'; -import { Feedback } from 'components/Map/Feedback/Feedback'; +import { Feedback } from 'components/Common/Feedback/Feedback'; import styles from './MapMainContainer.module.css'; import 'leaflet/dist/leaflet.css'; @@ -85,7 +85,7 @@ function MapMainContainer({ zoom = 16, showControls = true }) { styles.MapAdditionalButtons, )} > - +
diff --git a/client/pages/_document.tsx b/client/pages/_document.tsx index 335f4909..d7b07d52 100644 --- a/client/pages/_document.tsx +++ b/client/pages/_document.tsx @@ -34,6 +34,7 @@ export default function Document() {
+ {/* eslint-disable-next-line react/no-danger */} {process.env.YANDEX_METRIKA &&
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(${process.env.YANDEX_METRIKA}, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true });` }} />} diff --git a/client/pages/map.tsx b/client/pages/map.tsx index 4772301d..ecbbc413 100644 --- a/client/pages/map.tsx +++ b/client/pages/map.tsx @@ -21,7 +21,6 @@ export default function Map() { Карта транспорта Екатеринбурга -