Merge pull request #390 from Alt-Org/Samu/enhancement/304-redesign-fe…

…edback-button Samu/enhancement/304-redesign-feedback-button
Alt-Org · Feb 14, 2025 · 5b3775b · 5b3775b
2 parents 38494f3 + b8bee76
commit 5b3775b
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 31 deletions.
diff --git 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) {
         <html
             lang={lng}
             dir={dir(lng)}
-            className={`${urbanist.variable} ${rubik.variable}`}
+            className={`${urbanist.variable} ${rubik.variable} ${sedgwickFont.variable}`}
         >
             <head>
                 <link

diff --git a/frontend-next-migration/src/app/_styles/variables/global.scss b/frontend-next-migration/src/app/_styles/variables/global.scss
@@ -3,6 +3,8 @@
 :root {
   --font-family-texts: "Rubik";
   --font-family-main: 'Urbanist', sans-serif;
+  --font-family-secondary: "DM Sans";
+  //--font-family-title: "Sedgwick Ave Display";
 
   --font-size-s: 14px;
   --font-line-s: 20px;

diff --git a/frontend-next-migration/src/features/Feedback/ui/FeedbackSideButton/FeedbackSideButton.tsx b/frontend-next-migration/src/features/Feedback/ui/FeedbackSideButton/FeedbackSideButton.tsx
@@ -6,6 +6,10 @@ import useIsMobileSize from '@/shared/lib/hooks/useIsMobileSize';
 import { FeedbackCard } from '@/shared/ui/v2/Feedback';
 import cls from './FeedbackSideButton.module.scss';
 
+/**
+ * @deprecated
+ */
+
 type Props = {
     disableMobile?: boolean;
 };

diff --git a/frontend-next-migration/src/shared/assets/icons/Feedback/Megafone.svg b/frontend-next-migration/src/shared/assets/icons/Feedback/Megafone.svg
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
@@ -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
@@ -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();
             }}
         >
-            <h3 className={`${cls.feedbackTitle} ${sedgwickFont.className}`}>{t('title')}</h3>
+            <h3 className={cls.feedbackTitle}>{t('title')}</h3>
             <FeedbackEmoji
                 listClassName={cls.emojiList}
                 value={feedbackEmoji}

diff --git a/...-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.module.scss b/...-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.module.scss
@@ -1,34 +1,73 @@
 .SideButton{
   //width: fit-content;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  font-family: var(--font-family-main) !important;
+  font-size: var(--font-size-m) !important;
 
 
   height: fit-content;
-  min-height: 100px;
+  min-height: 110px;
+  width: 3rem;
   position: fixed;
   bottom: 50%;
+  align-items: center;
 
 
   -webkit-writing-mode: vertical-lr;
   writing-mode: vertical-lr;
+  border-radius: 15px;
+  border-width: 4px !important;
+  border-style: solid !important;
+
 
 
 
   right: 10px;
   background-color: var(--inverted-bg-color)!important;
   z-index: var(--sideButton-z-index) !important;
-  font-family: var(--font-family-texts) !important;
+  font-family:  16px !important;
   line-height: 1 !important;
   transform: rotate(180deg);
-  padding: 12px !important;
+  padding: 14px 0 14px 0 !important;
 
+  &:focus {
+    outline: none !important;
+  }
+
+}
 
+.nonActiveButton {
+  @extend .SideButton;
+  background-color: var(--inverted-bg-color) !important;
+  color: var(--secondary-color) !important;
+  border-color: var(--secondary-color) !important;
 }
+
+.activeButton {
+  @extend .SideButton;
+  background-color: var(--secondary-color) !important;
+  color: var(--inverted-bg-color) !important;
+  border-color: var(--inverted-bg-color) !important;
+}
+
+.feedbackButtonContainer {
+  display: flex;
+}
+
+.megafone {
+  transform: rotate( 180deg);
+}
+
 .FeedbackCardContainer {
   display: flex;
   position: fixed;
-  bottom: 20%;
-  right: calc(60px);
+  right: calc(10px);
   z-index: calc(var(--sideButton-z-index) + 1);
+
+  top: 50%;
+  transform: translate(-18%, -40%);
 }
 
 .feedbackForm.hidden {

diff --git a/...ext-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.test.tsx b/...ext-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.test.tsx
@@ -16,7 +16,7 @@ describe('FeedbackSideButton', () => {
 
         render(<FeedbackSideButton disableMobile={false} />);
 
-        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(<FeedbackSideButton disableMobile={true} />);
 
-        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(<FeedbackSideButton disableMobile={false} />);
 
-        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(<FeedbackSideButton disableMobile={true} />);
-        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(<FeedbackSideButton disableMobile={false} />);
-        const button = screen.getByRole('button', { name: 'feedback' });
+        const button = screen.getByRole('button', { name: 'feedback megafone' });
         expect(button).toBeInTheDocument();
         expect(button).toBeEnabled();
     });

diff --git a/...end-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.tsx b/...end-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<HTMLDivElement>(null);
+    const feedbackRef = useRef<HTMLDivElement>(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) && (
             <>
-                <Button
-                    theme={ButtonTheme.Graffiti}
-                    className={cls.SideButton}
-                    type="button"
-                    onClick={handleButtonClick}
+                <div
+                    className={cls.feedbackButtonContainer}
+                    ref={buttonRef}
                 >
-                    {t('feedback')}
-                </Button>
+                    <Button
+                        theme={ButtonTheme.CLEAR}
+                        square={false}
+                        size={ButtonSize.L}
+                        className={isFeedbackVisible ? cls.activeButton : cls.nonActiveButton}
+                        type="button"
+                        onClick={handleButtonClick}
+                    >
+                        {t('feedback')}
+                        <Image
+                            src={megafone}
+                            alt={'megafone'}
+                            width={25}
+                            height={25}
+                            className={cls.megafone}
+                        />
+                    </Button>
+                </div>
                 {isFeedbackVisible && (
                     <div className={cls.FeedbackOverlay}>
-                        <div className={cls.FeedbackCardContainer}>
+                        <div
+                            ref={feedbackRef}
+                            className={cls.FeedbackCardContainer}
+                        >
                             <FeedbackCard />
                         </div>
                     </div>