Merge pull request #916 from ita-social-projects/develop

Develop
ita-social-projects · Oct 13, 2023 · d614e55 · d614e55
2 parents 6a87705 + cc3522d
commit d614e55
Show file tree

Hide file tree

Showing 41 changed files with 500 additions and 197 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "react-draggable": "^4.4.5",
     "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^2.1.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.8.0",
     "react-idle-timer": "^4.6.4",
     "react-image-size": "^2.0.0",
@@ -117,6 +118,7 @@
     "@types/leaflet": "^1.9.0",
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-google-recaptcha": "^2.1.5",
+    "@types/react-helmet": "^6.1.7",
     "@types/react-slick": "^0.23.10",
     "@types/react-slider": "^1.3.1",
     "@typescript-eslint/eslint-plugin": "^5.48.0",

diff --git a/public/banner.webp b/public/banner.webp
diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,22 @@
 <!DOCTYPE html>
-<html lang="uk">
+<html lang="uk" prefix="og: https://ogp.me/ns#">
 
 <head>
       <script src="/env-config.js"></script>
       <meta charset="utf-8" />
       <link rel="icon" href="favicon.ico" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta name="theme-color" content="#000000" />
-      <meta name="description" content="Стріткод - це найбільша платформа про історію України, вбудована в простори міст.
-      Ми створюємо соціальний проєкт, який працюватиме на інформаційну безпеку України.
-      Пропонуємо інструмент для посилення української ідентичності через неформальну освіту.
-      Будуємо ком'юніті експертів." />
+      <meta property='og:title' content="«Стріткод: історія на кожному кроці» — платформа про імена в назвах вулиць." data-react-helmet="true" />
+      <meta property='og:description' content="" data-react-helmet="true" />
+      <meta name="twitter:card" content="«Стріткод: історія на кожному кроці»" data-react-helmet="true" />
+      <meta
+              data-react-helmet="true"
+              property="og:image"
+              content='/banner.webp'
+      />
+      <meta property="og:image:width" content="3202" data-react-helmet="true" />
+      <meta property="og:image:height" content="1472" data-react-helmet="true" />
       <!-- Google Tag Manager -->
       <script>(function (w, d, s, l, i) {
                   w[l] = w[l] || []; w[l].push({
@@ -54,4 +60,4 @@
       <div id="root"></div>
 </body>
 
-</html>
+</html>
diff --git a/src/app/common/components/modals/ContactUsModal/ContactUsModal.component.tsx b/src/app/common/components/modals/ContactUsModal/ContactUsModal.component.tsx
@@ -1,8 +1,9 @@
 import ContactForm from '@/app/common/components/ContactForm/ContactForm.component'
 import './ContactUsModal.styles.scss'
-import { Modal, Typography } from 'antd'
+import { Form, Modal, Popover, Typography } from 'antd'
 const { Text } = Typography
 import { useEffect, useState } from 'react';
+import CancelBtn from '@images/utils/Cancel_btn.svg';
 
 interface Props {
     text: string;
@@ -11,14 +12,22 @@ interface Props {
 
 export const ContactUsModal = ({ text, toggleState }: Props) => {
     const [isActive, setActive] = useState(false);
+
     const handleClick = () => {
         setActive(true);
         toggleState();
     };
     return (
         <>
             <Text onClick={() => handleClick()} className='text-white'>{text}</Text>
-            <Modal open={isActive} footer={null} onCancel={() => setActive(false)} width={"max-content"}>
+            <Modal
+                className="contactUsModal"
+                open={isActive}
+                footer={null}
+                onCancel={() => setActive(false)}
+                width={"max-content"}
+                closeIcon={<CancelBtn />}
+            >
                 <ContactForm customClass={"formWrapper__modal"} />
             </Modal>
         </>

diff --git a/src/app/common/components/modals/ContactUsModal/ContactUsModal.styles.scss b/src/app/common/components/modals/ContactUsModal/ContactUsModal.styles.scss
@@ -1,15 +1,71 @@
 @use "@sass/variables/_variables.colors.scss" as c;
 @use "@sass/mixins/_utils.mixins.scss" as mut;
+@use "@assets/sass/_utils.functions.scss" as f;
 
-.headerItem{
+.contactUsModal {
+    &.ant-modal {
+        .ant-modal-content {
+            @include mut.full-rounded(20px, $overflow: visible);
+            padding: f.pxToRem(24px) f.pxToRem(40px);
+            box-shadow: 0 7px 11px 2px rgba(0, 0, 0, 0.25);
+        }
+        .ant-modal-close {
+            @include mut.positioned-as(absolute, $left: 94%, $top: -25px);
+            @include mut.circular(80px, c.$pure-white-color);
+
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            .ant-modal-close-x{
+              font-size: 24px;
+            }
+            &:hover {
+              background-color: c.$modal-hover-color;
+            }
+          }
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .contactUsModal {
+        @include mut.sizedImportant(90%, 498px);
+
+        &.ant-modal {
+            .ant-modal-close {
+                @include mut.sizedImportant(60px, 60px);
+                @include mut.circular(65px, c.$pure-white-color);
+
+                .ant-modal-close-x svg{
+                    transform: scale(0.9);
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .contactUsModal {
+        &.ant-modal {
+            .ant-modal-close {
+                @include mut.positioned-as($position: absolute, $left: 92.36%, $top: -13px);
+                @include mut.sizedImportant(40px, 40px);
+                @include mut.circular(65px, c.$pure-white-color);
+
+                .ant-modal-close-x svg{
+                  transform: scale(0.6);
+                }
+              }
+        }
+    }
+}
+
+.headerItem {
     background-color: transparent;
     border: none;
     text-align: left;
     color: inherit;
     text-decoration: none;
 }
 
-.headerItem:hover {    
+.headerItem:hover {
     cursor: pointer;
     color: c.$dark-red-color;
 }

diff --git a/src/app/common/components/modals/Donates/DonatesModal.styles.scss b/src/app/common/components/modals/Donates/DonatesModal.styles.scss
@@ -164,14 +164,14 @@
         }
 
         &:last-child {
-          @include mut.with-font(ft.$roboto-font, $font-size: 15px, $font-weight: 300);
+          @include mut.with-font(ft.$roboto-font, $font-size: 15px, $font-weight: 500);
 
           font-style: normal;
-          line-height: f.pxToRem(18px);
-          padding-inline-start: f.pxToRem(16px);
+          line-height: f.pxToRem(12px);
           padding-top: f.pxToRem(2px);
           height: f.pxToRem(15px);
           text-align: left;
+          color: c.$checkbox-light-grey;
         }
       }
     }
@@ -180,6 +180,36 @@
       @include mut.full-rounded(11px);
       @include mut.with-font($font-weight: 300);
     }
+    .ant-checkbox {
+      @include mut.sized(25px, 25px);
+    }
+
+    .ant-checkbox-inner {
+      @include mut.sizedImportant(25px, 25px);
+
+      border: 3px solid c.$normal-darker-gray-color;
+      border-radius: 0  !important;
+      overflow: visible;
+    }
+
+    .ant-checkbox-checked {
+      .ant-checkbox-inner {
+        border: 3px solid c.$accented-red-color;
+      }
+    }
+
+    .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner::after {
+      opacity: 0;
+    }
+
+    .ant-checkbox-checked:after {
+      border-color: none !important;
+    }
+
+    .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
+      background: c.$accented-red-color;
+      box-shadow: inset 0 0 0 2px c.$pure-white-color;
+    }
   }
 
   .donatesDonateBtn {

diff --git a/src/app/common/components/modals/HeaderLogin/HeaderLoginModal.component.tsx b/src/app/common/components/modals/HeaderLogin/HeaderLoginModal.component.tsx
@@ -3,7 +3,7 @@ import './HeaderLoginModal.styles.scss';
 import CancelBtn from '@images/utils/Cancel_btn.svg';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { HashLink as Link } from 'react-router-hash-link';
 import FRONTEND_ROUTES from '@constants/frontend-routes.constants';
 import { useModalContext } from '@stores/root-store';
@@ -72,7 +72,8 @@ const HeaderLoginModal = () => {
                     >
                         <Link
                             to={`${FRONTEND_ROUTES.OTHER_PAGES.ABOUT_US}#vacancies`}
-                            scroll={(el:any) => scrollWithOffset(el, 100)}
+                            scroll={(el: any) => scrollWithOffset(el, 100)}
+                            className="linkInsideButton"
                         >
                             Долучитися до команди
                         </Link>
@@ -91,4 +92,4 @@ const HeaderLoginModal = () => {
     );
 };
 
-export default observer(HeaderLoginModal);
+export default observer(HeaderLoginModal);
diff --git a/src/app/common/components/modals/HeaderLogin/HeaderLoginModal.styles.scss b/src/app/common/components/modals/HeaderLogin/HeaderLoginModal.styles.scss
@@ -4,7 +4,7 @@
 
 .loginModal {
   @include mut.sized(574px, 479px);
-
+  
   &.ant-modal {
     .ant-modal-content {
       height: inherit;
@@ -40,7 +40,22 @@
     @include mut.full-rounded(14px);
     background-color: c.$accented-red-color;
     border: none;
+    position: relative;
+
+    &.ant-btn {
+      padding: 0 !important;
+    }
 
+    .linkInsideButton {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      text-decoration: none;
+    }
+
     > * {
       @include mut.with-font($font-weight: 500);
       color: c.$pure-white-color;
@@ -51,4 +66,4 @@
       background-color: c.$dark-red-color;
     }
   }
-}
+}
diff --git a/src/app/common/components/modals/Partners/PartnersModal.component.tsx b/src/app/common/components/modals/Partners/PartnersModal.component.tsx
@@ -57,6 +57,7 @@ const PartnersModal = () => {
             type: 'success',
             content: 'Лист успішно надісланий',
         });
+        form.resetFields();
     };
 
     const errorMessage = () => {
@@ -74,7 +75,7 @@ const PartnersModal = () => {
             centered
             footer={null}
             onCancel={onCancel}
-            closeIcon={<Popover><CancelBtn className='iconSize' onClick={onClear} />
+            closeIcon={<Popover content="Внесені зміни не будуть збережені!" trigger='hover'><CancelBtn className='iconSize' onClick={onClear} />
             </Popover>}
         >
             {messageContextHolder}

diff --git a/src/app/layout/header/HeaderBlock.component.tsx b/src/app/layout/header/HeaderBlock.component.tsx
@@ -151,8 +151,9 @@ const HeaderBlock = () => {
                         open={isPopoverVisible}
                         arrow={true}
                         overlayClassName="searchMobPopover"
+                        placement='bottom'
                         content={(
-                            <div >
+                            <div>
                                 <SearchBlock searchQuery={searchQuery} />
                             </div>
                         )}

diff --git a/src/app/layout/header/HeaderBlock.styles.scss b/src/app/layout/header/HeaderBlock.styles.scss
@@ -210,8 +210,7 @@ $navbar-hidden-innerwidth: 400px;
 
   .searchMobPopover {
     .ant-popover-inner {
-      margin-top: 35px;
-
+      margin-top: 20px;
     }
 }
 }
diff --git a/src/app/layout/header/HeaderSkeleton/HeaderSkeleton.styles.scss b/src/app/layout/header/HeaderSkeleton/HeaderSkeleton.styles.scss
@@ -3,14 +3,14 @@
 @use "@sass/mixins/_utils.mixins.scss" as mut;
 
 .headerPopupSkeleton {
-  width: auto;
+  width: f.pxToRem(915px);
   @include mut.flexed($justify-content: flex-start);
   transition: all 1s;
   overflow-x: auto;
 
   position: relative;
   z-index: 1;
-
+  
   h2.textHeader {
     line-height: f.pxToEm(13px);
     @include mut.with-font($font-size: 14px);

diff --git a/src/app/layout/header/SearchBlock/SearchBlock.component.tsx b/src/app/layout/header/SearchBlock/SearchBlock.component.tsx
@@ -31,9 +31,10 @@ const SearchBlock = ({ searchQuery } : Props) => {
 
     return (
         <div className="searchResultsBlock" style={{ height: blockHeight }}>
-            {searchResult.map((searchResultItem: StreetcodeFilterResultDTO, index) => (
+            {searchResult.length === 0 ? <p style={{paddingLeft: 30}}>Результатів немає</p> : 
+            (searchResult.map((searchResultItem: StreetcodeFilterResultDTO, index) => (
                 <SearchResultItem key={index} searchResultItem={searchResultItem} />
-            ))}
+            )))}
         </div>
     );
 };

diff --git a/src/app/layout/header/SearchBlock/SearchBlock.styles.scss b/src/app/layout/header/SearchBlock/SearchBlock.styles.scss
@@ -13,7 +13,7 @@
 @media screen and (max-width: 1024px) {
     .searchResultsBlock{ 
         width: 100vw;
-        overflow-y: hidden;
+        overflow-y: scroll;
 
     }
 

diff --git a/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx b/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx
@@ -2,21 +2,22 @@ import './SearchItem.styles.scss';
 
 import { StreetcodeFilterResultDTO } from '@/models/filters/streetcode-filter.model';
 import htmlReactParser, { domToReact } from 'html-react-parser';
+
 interface Props {
     searchResultItem: StreetcodeFilterResultDTO;
 }
 
 const SearchResultItem = ({ searchResultItem } : Props) => {
-    const url = `/${searchResultItem.streetcodeTransliterationUrl
-    }${searchResultItem.blockName ? (`#${searchResultItem.blockName}`) : ''}`;
+    const url = `/${searchResultItem.streetcodeTransliterationUrl}${searchResultItem.factId !== 0 ? (`?factId=${searchResultItem.factId}`) : ('')}${searchResultItem.timelineItemId !== 0 ? (`?timelineItemId=${searchResultItem.timelineItemId}`) : ('')}${searchResultItem.blockName ? (`#${searchResultItem.blockName}`) : ('')}`;
 
     const sourceName = `Стріткод #${searchResultItem.streetcodeIndex.toString().padStart(4, '0')
     }${searchResultItem.sourceName ? `/${searchResultItem.sourceName}` : ''}`;
 
     const contentToDisplay = searchResultItem.content ? searchResultItem.content.slice(0, 67) : '';
 
     return (
-        <a href={url} className="resultItemContainer">
+        <a href={url}
+        className="resultItemContainer">
             <div className="resultItemContent">
                  {htmlReactParser(contentToDisplay)}
             </div>