Merge develop to master (#1076)

* Hide a slide outline * fix news modal from closing when image is not created (#1061) * - getting news from cache - green notification on news modal success (#1063) * fix scrolling to the main text (#1075) * remove react helmet + add banner (#1072) * Fixed progress bar visibility and popups (#1070) * Fixed progress bar visibility and popups * add animation transition to make it smoother --------- Co-authored-by: Oleh-Kril <[email protected]> * Fix issue 847 Fix Url Ref (#1068) * Fix PrivatePolicy streetcode reference * Change ref to https://streetcode.com.ua * Add some fix * Fixed the amount buttons and input in donates modal (#1060) * Fix news image on safari (#1058) * refactor newsImage styles * add max-height * Fix for fans category editing (#1037) * Fixed unavalaible categories on new streetcode * Fixed category editing of for fans categories * Made a mobile ornament with varying lengths for screens with a width … (#1030) * Made a mobile ornament with varying lengths for screens with a width of 480 pixels or less * adjust margins to correspond design --------- Co-authored-by: Oleh-Kril <[email protected]> * Fixed Issue 870, 871 (#1025) * Add red * to Timeline date field and vanish an error * Fix logic when error message shoud vanish * fix data check in timelineAdminModal * set fixed position for arrows in connection(streetcode) (#1029) * set fixed position for arrows in connection(streetcode) * adjust position of arrows --------- Co-authored-by: Oleh-Kril <[email protected]> * fix our partners title (#1022) now it takes only 1 row instead of 2 * Refactor teams modal & list (#1069) * Refactor teams modal & list * remove commented code --------- Co-authored-by: ValDekh <[email protected]> Co-authored-by: Valerii Dekhtiyk <[email protected]> Co-authored-by: Bohdan Bozhyk <[email protected]> Co-authored-by: BohdanBybliv <[email protected]> Co-authored-by: mykola-krai <[email protected]>
ita-social-projects · Dec 21, 2023 · e36287a · e36287a
1 parent 9c37f01
commit e36287a
Show file tree

Hide file tree

Showing 36 changed files with 619 additions and 534 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,6 @@
     "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",
@@ -66,7 +65,7 @@
     "react-remove-scroll": "^2.5.5",
     "react-resize-detector": "^7.1.2",
     "react-responsive": "^9.0.2",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.19.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",

diff --git a/public/index.html b/public/index.html
@@ -7,19 +7,15 @@
       <link rel="icon" href="favicon.ico" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta name="theme-color" content="#000000" />
-      <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" />
+      <meta property='og:title' content="«Стріткод: історія на кожному кроці» — платформа про імена в назвах вулиць." />
+      <meta property='og:description' content="" />
+      <meta name="twitter:card" content="«Стріткод: історія на кожному кроці»" />
+      <meta property="og:image" content='https://oleh-kril.github.io/Todo/banner.webp' />
+      <meta property="og:image:width" content="3202" />
+      <meta property="og:image:height" content="1472" />
       <!-- Google Tag Manager -->
       <script>(function (w, d, s, l, i) {
-                  w[l] = w[l] || []; w[l].push({
+            https://github.com/w[l] = w[l] || []; w[l].push({
                         'gtm.start':
                               new Date().getTime(), event: 'gtm.js'
                   }); var f = d.getElementsByTagName(s)[0],

diff --git a/src/app/common/components/modals/Donates/DonatesModal.component.tsx b/src/app/common/components/modals/Donates/DonatesModal.component.tsx
@@ -21,7 +21,6 @@ const DonatesModal = () => {
     const { setModal, modalsState: { donates } } = modalStore;
 
     const [donateAmount, setDonateAmount] = useState<number>(0);
-    const [activeBtnIdx, setActiveBtnIndex] = useState<number>();
     const [inputStyle, setInputStyle] = useState({ width: '100%' });
 
     const [isCheckboxChecked, setIsCheckboxChecked] = useState<boolean>(false);
@@ -30,7 +29,6 @@ const DonatesModal = () => {
 
     const handleAmountBtnClick = (btnIdx: number) => {
         setDonateAmount(possibleDonateAmounts[btnIdx]);
-        setActiveBtnIndex(btnIdx);
     };
 
     const handleModalClose = () => {
@@ -57,7 +55,7 @@ const DonatesModal = () => {
 
     const charWidth = windowSize.width > 1024 ? 42 : 21;
     const firstWidth = windowSize.width > 1024 ? 13 : 6;
-    const baseValWidth = windowSize.width > 1024 ? 3 : 4;
+    const baseValWidth = windowSize.width > 1024 ? 2 : 1;
     const count = (donateAmount.toString().match(/1/g) || []).length;
     const zeroCount = (donateAmount.toString().match(/[0689]/g) || []).length;
 
@@ -124,7 +122,7 @@ const DonatesModal = () => {
                         onChange={handleDonateInputChange}
                         style={{ ...style, width: 'var(--input-width)' }}
                         placeholder="0"
-                        maxLength={15}
+                        maxLength={14}
                         value={donateAmount === 0 ? '' : donateAmount}
                         className={`amountInput ${(donateAmount !== 0) ? 'active' : ''} `}
                     />
@@ -134,8 +132,7 @@ const DonatesModal = () => {
                     {possibleDonateAmounts.map((amount, idx) => (
                         <Button
                             key={amount}
-                            className={(activeBtnIdx === idx
-                                && donateAmount === possibleDonateAmounts[idx]) ? 'active' : ''}
+                            className={(donateAmount === possibleDonateAmounts[idx]) ? 'active' : ''}
                             onClick={() => handleAmountBtnClick(idx)}
                         >
                             {amount}
@@ -149,7 +146,7 @@ const DonatesModal = () => {
                         checked={isCheckboxChecked}
                         onChange={(e) => setIsCheckboxChecked(e.target.checked)}
                     >
-                        Я даю згоду на обробку моїх <a className='privacyPolicy' href='/privacy-policy'>персональних даних</a>
+                        Я даю згоду на обробку моїх <a className="privacyPolicy" href="/privacy-policy">персональних даних</a>
                     </Checkbox>
                 </div>
                 <button

diff --git a/src/app/common/components/modals/Donates/DonatesModal.styles.scss b/src/app/common/components/modals/Donates/DonatesModal.styles.scss
@@ -118,7 +118,7 @@
       @include mut.flex-centered();
 
       border-radius: 15px !important;
-      border: 3px solid c.$dark-red-color;
+      border: 3px solid c.$button-border-red-color;
       @include vnd.vendored(transition, 'background-color .75s ease');
       box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.19);
 
@@ -131,7 +131,7 @@
 
       &:where(:hover, &.active) {
         background-color: c.$accented-red-color;
-        border: 3px solid c.$accented-red-color;
+        border: none !important;
 
         > span {
           color: c.$pure-white-color;
@@ -331,11 +331,15 @@
           width: f.pxToRem(100px) !important;
           height: f.pxToRem(37px) !important;
           border-radius: 11px !important;
-          border: 2px solid c.$dark-red-color;
+          border: 2px solid c.$button-border-red-color;
 
           > span{
             @include mut.with-font(ft.$closer-text-font, $font-size: 16px, $font-weight: 350);
           }
+
+          &:where(:hover, &.active) {
+            border: none !important;
+          }
         }
       }
 

diff --git a/src/app/common/components/modals/Partners/PartnersModal.component.tsx b/src/app/common/components/modals/Partners/PartnersModal.component.tsx
@@ -3,8 +3,9 @@ import './PartnersModal.styles.scss';
 import CancelBtn from '@images/utils/Cancel_btn.svg';
 
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
+import { useNavigate } from 'react-router-dom';
 import useMobx, { useModalContext } from '@stores/root-store';
 
 import {
@@ -48,6 +49,7 @@ const PartnersModal = () => {
 
     const onCancel = () => {
         partners.isOpen = false;
+        form.resetFields();
     };
 
     const handleVerify = () => {
@@ -69,6 +71,21 @@ const PartnersModal = () => {
         });
     };
 
+    useEffect(() => {
+        const handleRouteChange = () => {
+            if (partners.isOpen) {
+                onCancel();
+                window.history.replaceState(null, '');
+            }
+        };
+
+        window.addEventListener('popstate', handleRouteChange);
+
+        return () => {
+            window.removeEventListener('popstate', handleRouteChange);
+        };
+    }, [partners.isOpen]);
+
     return (
         <Modal
             className="partnersModal"