diff --git a/frontend-next-migration/src/app/[lng]/layout.tsx b/frontend-next-migration/src/app/[lng]/layout.tsx index 006247996..e7bdde6d5 100644 --- a/frontend-next-migration/src/app/[lng]/layout.tsx +++ b/frontend-next-migration/src/app/[lng]/layout.tsx @@ -1,10 +1,10 @@ import { dir } from 'i18next'; import type { Viewport } from 'next'; -import { Urbanist, Rubik } from 'next/font/google'; +import { Urbanist, Rubik, Sedgwick_Ave_Display } from 'next/font/google'; import { ReactNode } from 'react'; import cls from '@/preparedPages/MainPage/ui/page.module.scss'; import { CookieConsentComponent } from '@/features/CookieConsent'; -import { FeedbackSideButton } from '@/features/Feedback'; +import { FeedbackSideButton } from '@/shared/ui/v2/Feedback'; import { languages } from '@/shared/i18n/settings/settings'; import { withBackgroundImage } from '@/shared/lib/hocs/withBackgroundImage'; import bgPicture from '@/shared/assets/images/backgrounds/background.webp'; @@ -16,6 +16,13 @@ import '../_styles/index.scss'; // display: 'swap', // }); +const sedgwickFont = Sedgwick_Ave_Display({ + subsets: ['latin'], + weight: '400', + variable: '--font-family-title', + fallback: ['system-ui', 'arial'], +}); + const urbanist = Urbanist({ variable: '--font-family-main', subsets: ['latin'], @@ -62,7 +69,7 @@ export default function RootLayout(props: Props) { + + + + + + + + diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss index e037b5877..50d961e0f 100644 --- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss +++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss @@ -8,7 +8,10 @@ padding-top: 0; align-items: center; gap: 10px; - box-shadow: 3px 4px 0 #121212; + box-shadow: 6px 8px 1px #000000; + border-width: 4px; + border-style: solid; + border-color: #000000; } .feedbackTitle { @@ -19,6 +22,7 @@ padding: 5px 1em 0 1em; height: fit-content; color: var(--secondary-color) !important; + font-family: var(--font-family-title); text-align: center; width: 100%; margin: 0 auto; @@ -71,6 +75,7 @@ .linkToForm { display: flex; flex-direction: row; + font-family: var(--font-family-secondary); font-size: 1rem; } diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx index 4322361fd..e50b4b788 100644 --- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx +++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx @@ -12,12 +12,6 @@ import { useClientTranslation } from '@/shared/i18n'; import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks'; import cls from './FeedbackCard.module.scss'; import FeedbackEmoji from '../FeedbackEmoji/FeedbackEmoji'; -import { Sedgwick_Ave_Display } from 'next/font/google'; - -const sedgwickFont = Sedgwick_Ave_Display({ - subsets: ['latin'], - weight: '400', -}); /** * Props for the FeedbackCard component. @@ -90,7 +84,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J await submitFeedback(); }} > -

{t('title')}

+

{t('title')}

{ render(); - const button = screen.getByRole('button', { name: 'feedback' }); + const button = screen.getByRole('button', { name: 'feedback megafone' }); expect(button).toBeInTheDocument(); }); @@ -25,7 +25,7 @@ describe('FeedbackSideButton', () => { render(); - const button = screen.queryByRole('button', { name: 'feedback' }); + const button = screen.queryByRole('button', { name: 'feedback megafone' }); expect(button).not.toBeInTheDocument(); }); @@ -34,21 +34,21 @@ describe('FeedbackSideButton', () => { render(); - const button = screen.getByRole('button', { name: 'feedback' }); + const button = screen.getByRole('button', { name: 'feedback megafone' }); expect(button).toBeInTheDocument(); }); it('renders a disabled button when on mobile and disableMobile is true', () => { (useIsMobileSize as jest.Mock).mockReturnValue({ isMobileSize: true }); render(); - const button = screen.queryByRole('button', { name: 'feedback' }); + const button = screen.queryByRole('button', { name: 'feedback megafone' }); expect(button).not.toBeInTheDocument(); }); it('renders an enabled button when on mobile and disableMobile is false', () => { (useIsMobileSize as jest.Mock).mockReturnValue({ isMobileSize: true }); render(); - const button = screen.getByRole('button', { name: 'feedback' }); + const button = screen.getByRole('button', { name: 'feedback megafone' }); expect(button).toBeInTheDocument(); expect(button).toBeEnabled(); }); diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.tsx index 2efe55c72..fdaa84527 100644 --- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.tsx +++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.tsx @@ -1,10 +1,12 @@ 'use client'; -import { useState } from 'react'; -import { Button, ButtonTheme } from '@/shared/ui/Button/Button'; +import { useEffect, useRef, useState } from 'react'; +import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'; import { useClientTranslation } from '@/shared/i18n'; import useIsMobileSize from '@/shared/lib/hooks/useIsMobileSize'; import { FeedbackCard } from '@/shared/ui/v2/Feedback'; import cls from './FeedbackSideButton.module.scss'; +import Image from 'next/image'; +import megafone from '@/shared/assets/icons/Feedback/Megafone.svg'; type Props = { disableMobile?: boolean; @@ -16,25 +18,61 @@ const FeedbackSideButton = (props: Props) => { const { t } = useClientTranslation('translation'); const { isMobileSize } = useIsMobileSize(); const [isFeedbackVisible, setFeedbackVisible] = useState(false); + const buttonRef = useRef(null); + const feedbackRef = useRef(null); const handleButtonClick = () => { setFeedbackVisible(!isFeedbackVisible); }; + useEffect(() => { + const handleMouseEvent = (event: MouseEvent) => { + if ( + !feedbackRef.current?.contains(event.target as Node) && + !buttonRef.current?.contains(event.target as Node) + ) { + setFeedbackVisible(false); + } + }; + if (isFeedbackVisible) { + document.addEventListener('mousedown', handleMouseEvent); + } + return () => { + document.removeEventListener('mousedown', handleMouseEvent); + }; + }, [isFeedbackVisible]); + return ( (!isMobileSize || !disableMobile) && ( <> - + + {isFeedbackVisible && (
-
+