Add feedback button to mainpage

ekaterinburgdev · Jun 19, 2024 · 42dc0e9 · 42dc0e9 · ekbdev · Jun 19, 2024
1 parent 66cc61f
commit 42dc0e9
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 35 deletions.
diff --git a/...mponents/Map/Feedback/Feedback.module.css → ...nents/Common/Feedback/Feedback.module.css b/...mponents/Map/Feedback/Feedback.module.css → ...nents/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);
-}
+}
+
+.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
@@ -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 (
+        <a
+            href="https://tally.so#tally-open=mRDkVd&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
+            target="_blank"
+            rel="noreferrer"
+            className={cn(styles.MapFeedback, {
+                [styles[`MapFeedback_Size-${size}`]]: size
+            })}
+        >
+            {caption}
+        </a>
+    );
+}
diff --git a/client/components/Common/Feedback/Feedback.types.tsx 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
@@ -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
@@ -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
                         <br />
                         Екатеринбурга
                     </h1>
+                    <Feedback size="l" />
                 </div>
 
                 <div className={styles.MainPageCardGrid}>

diff --git a/client/components/Map/Feedback/Feedback.tsx b/client/components/Map/Feedback/Feedback.tsx
diff --git 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,
                         )}
                     >
-                        <Feedback />
+                        <Feedback size="m" />
                         <Info />
                     </div>
                 </>

diff --git a/client/pages/_document.tsx b/client/pages/_document.tsx
@@ -34,6 +34,7 @@ export default function Document() {
             <body>
                 <Main />
                 <NextScript />
+                <script src="https://tally.so/widgets/embed.js" async></script>
 
                 {/* eslint-disable-next-line react/no-danger */}
                 {process.env.YANDEX_METRIKA && <div dangerouslySetInnerHTML={{ __html: `<script>(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 });</script><noscript><div><img src="https://mc.yandex.ru/watch/${process.env.YANDEX_METRIKA}" style="position:absolute; left:-9999px;" alt="" /></div></noscript>` }} />}

diff --git a/client/pages/map.tsx b/client/pages/map.tsx
@@ -21,7 +21,6 @@ export default function Map() {
                 <title>Карта транспорта Екатеринбурга</title>
                 <link rel="preconnect" href={TILE_SERVER_URL} />
                 <link rel="preconnect" href={STRAPI_URL} />
-                <script src="https://tally.so/widgets/embed.js" async></script>
             </Head>
 
             <MapComponent />