From 241a5bbaa09345a08df4d68b7f17adc0847c6358 Mon Sep 17 00:00:00 2001
From: Teemu Kalmari <95919515+temez26@users.noreply.github.com>
Date: Wed, 15 Apr 2026 16:29:04 +0300
Subject: [PATCH 1/6] enhancement: updated the emojis to be interactive with
 speechbubbles and related rating placeholders, updated i18n jsons related to
 feedbackcard, added text areafield to the customform for more customasiable
 inputform. Almost ready just needs some fine tuning and confirmation what the
 english text needs to be.

---
 .../shared/i18n/locales/en/feedbackCard.json  | 11 ++-
 .../shared/i18n/locales/fi/feedbackCard.json  | 15 +++-
 .../shared/i18n/locales/ru/feedbackCard.json  | 13 ++-
 .../shared/ui/CustomForm/ui/CustomForm.tsx    | 42 ++++++++++
 .../src/shared/ui/v2/Feedback/index.ts        |  1 +
 .../ui/FeedbackCard/FeedbackCard.module.scss  | 80 ++++++++++---------
 .../Feedback/ui/FeedbackCard/FeedbackCard.tsx | 34 +++++++-
 .../FeedbackCardSuccess.module.scss           | 60 ++++++++++++++
 .../FeedbackCardSuccess.tsx                   | 59 ++++++++++++++
 .../FeedbackEmoji/FeedbackEmoji.module.scss   | 51 +++++++++++-
 .../ui/FeedbackEmoji/FeedbackEmoji.tsx        | 52 ++++++++----
 11 files changed, 352 insertions(+), 66 deletions(-)
 create mode 100644 frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
 create mode 100644 frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.tsx

diff --git a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
index 7739d83ed..5f33bbeb2 100644
--- a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
@@ -1,10 +1,19 @@
 {
     "title": "Tell your opinion about our websites",
+    "success-title": "Thank you for your feedback!",
     "input-placeholder": "Please write here",
+    "input-placeholder-1": "What bothered you the most?",
+    "input-placeholder-2": "What fell short of your expectations?",
+    "input-placeholder-3": "What was good and what could be improved?",
+    "input-placeholder-4": "Great to hear! Any suggestions for improvement?",
+    "input-placeholder-5": "Wonderful! What did you like the most?",
     "send": "Send",
+    "loading": "Sending...",
     "href-to-fullform": "Go to the full form ->",
     "error": "Select emote and then write feedback",
+    "error-submit-failed": "Submission failed. Please try again.",
+    "feedback-text": "Give specific feedback",
     "success": "Thank you very much! We appreciate your feedback.",
-    "href-to-webform": "Website form",
+    "href-to-webform": "Web form",
     "href-to-gameform": "Game form"
 }
diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
index 831b82528..a862afaf9 100644
--- a/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
@@ -1,10 +1,19 @@
 {
     "title": "Kerro mielipiteesi verkkosivuistamme",
-    "input-placeholder": "Kirjoita tähän",
+    "success-title": "Kiitos palautteestasi!",
+    "input-placeholder": "(Valinnainen)",
+    "input-placeholder-1": "Harmi! Mikä mätti eniten?",
+    "input-placeholder-2": "Voi ei - mikä jäi vajaaksi?",
+    "input-placeholder-3": "Mikä oli hyvää ja mitä parantaisit?",
+    "input-placeholder-4": "Kiva kuulla! Parannus ehdotuksia?",
+    "input-placeholder-5": "Ihanaa! Mikä oli parasta?",
     "send": "Lähetä",
+    "loading": "Lähetetään...",
     "href-to-fullform": "Siirry koko lomakkeeseen ->",
     "error": "Valitse mieliala ja sitten kirjoita palaute.",
+    "error-submit-failed": "Lähetys epäonnistui. Yritä uudelleen.",
+    "feedback-text": "Anna tarkempi palaute",
     "success": "Kiitos paljon! Arvostamme palautettasi.",
-    "href-to-webform": "Verkkosivulomake",
-    "href-to-gameform": "Pelilomake"
+    "href-to-webform": "Web lomake",
+    "href-to-gameform": "Peli lomake"
 }
diff --git a/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json
index b7c65af3b..26d43cfba 100644
--- a/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json
@@ -1,10 +1,19 @@
 {
     "title": "Поделитесь своим мнением о нашем сайте",
+    "success-title": "Спасибо за ваш отзыв!",
     "input-placeholder": "Напишите сюда",
+    "input-placeholder-1": "Что вам не понравилось больше всего?",
+    "input-placeholder-2": "Что не оправдало ваших ожиданий?",
+    "input-placeholder-3": "Что было хорошо и что можно улучшить?",
+    "input-placeholder-4": "Приятно слышать! Есть предложения по улучшению?",
+    "input-placeholder-5": "Замечательно! Что понравилось больше всего?",
     "send": "Отправить",
+    "loading": "Отправка...",
     "href-to-fullform": "Перейти к полной форме ->",
     "error": "Выберите настроение и затем напишите отзыв.",
+    "error-submit-failed": "Отправка не удалась. Попробуйте снова.",
+    "feedback-text": "Оставьте подробный отзыв",
     "success": "Большое спасибо! Мы ценим ваш отзыв.",
-    "href-to-webform": "Отзыв о сайте",
-    "href-to-gameform": "Отзыв о игре"
+    "href-to-webform": "Форма сайта",
+    "href-to-gameform": "Форма игры"
 }
diff --git a/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx b/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
index eb552c0ed..70d704159 100644
--- a/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
+++ b/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
@@ -8,6 +8,7 @@ import React, {
     memo,
     DetailedHTMLProps,
     InputHTMLAttributes,
+    TextareaHTMLAttributes,
     useState,
     useEffect,
     useId,
@@ -318,12 +319,52 @@ function MultiSelectionDropdown<T>({
     );
 }
 
+type TextareaFieldProps = {
+    label?: string;
+    error?: any;
+    className?: string;
+    textareaProps?: DetailedHTMLProps<
+        TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+    >;
+};
+
+function TextareaField({ label, error, textareaProps, className = '' }: TextareaFieldProps) {
+    const reactId = useId();
+    const slug = slugifyLabel(label);
+    const normalizedReactId = reactId
+        .toString()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-');
+    const textareaId =
+        textareaProps?.id || (slug ? `textarea-${slug}` : `textarea-${normalizedReactId}`);
+
+    return (
+        <div className={classNames(cls.field, {}, [className])}>
+            {label && <label htmlFor={textareaId}>{label}</label>}
+            <textarea
+                id={textareaId}
+                {...textareaProps}
+            />
+            {error && (
+                <p
+                    role="alert"
+                    className={cls.error}
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+}
+
 interface IFormProps extends HTMLAttributes<HTMLFormElement> {}
 
 interface MemoizedFormCompose {
     Button: typeof Button;
     Header: typeof Header;
     InputField: typeof InputField;
+    TextareaField: typeof TextareaField;
     Checkbox: typeof Checkbox;
     MultiSelectionDropdown: typeof MultiSelectionDropdown;
 }
@@ -359,6 +400,7 @@ const MemoizedForm = memo(BaseForm) as NamedExoticComponent<IFormProps> & Memoiz
 MemoizedForm.Button = Button;
 MemoizedForm.Header = Header;
 MemoizedForm.InputField = InputField;
+MemoizedForm.TextareaField = TextareaField;
 MemoizedForm.Checkbox = Checkbox;
 MemoizedForm.MultiSelectionDropdown = MultiSelectionDropdown;
 
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts b/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts
index ed81f6b03..76d35200a 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts
@@ -1,3 +1,4 @@
 export { default as FeedbackSideButton } from './ui/FeedbackSideButton/FeedbackSideButton';
 export { default as FeedbackCard } from './ui/FeedbackCard/FeedbackCard';
 export { default as FeedbackEmoji } from './ui/FeedbackEmoji/FeedbackEmoji';
+export { default as FeedbackCardSuccess } from './ui/FeedbackCardSuccess/FeedbackCardSuccess';
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 72ac4c697..c49e31ae2 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
@@ -2,12 +2,10 @@
     background-color: var(--base-card-background);
     display: flex;
     flex-direction: column;
-    margin: 5px;
-    width: 330px !important;
-    height: fit-content;
-    padding-top: 0;
+    max-width: 300px;
+    height: 400px;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     box-shadow: 8px 8px 1px #000000;
     border-width: 4px;
     border-style: solid;
@@ -15,10 +13,10 @@
 }
 
 .feedbackTitle {
-    line-height: 40px !important;
-    font:var(--font-sw-xl);
-    padding: 5px 1em 0 1em;
-    height: fit-content;
+    font-size: 24px;
+    font-family: 'Marko One';
+    font-weight: 400;
+    line-height: 100%;
     color: var(--primary-color);
     text-align: center;
     width: 100%;
@@ -36,7 +34,7 @@
     align-items: center;
     padding: 9px 12px;
     gap: 10px;
-    width: 300px;
+    width:250px;
     height: 48px;
     background: var(--primary-color) !important;
     border: 2px solid var(--drop-shadows) !important;
@@ -44,56 +42,60 @@
     box-shadow: 2px 4px 0 var(--black) !important;
 }
 
+.inputField {
+    width: 100%;
+
+    label {
+        font: var(--font-dm-m);
+        font-size: 14px;
+        color: var(--white);
+     
+        display: block;
+    }
+}
+
 .textInput {
     font: var(--font-dm-m);
     color: var(--black);
-    width: 300px !important;
-    height: 45px;
-    padding: 10px 10px;
+    height: 81px;
+    padding: 10px;
+    border-radius: 12px;
     background: #FFFFFF;
     border: 2px solid #000000;
     box-shadow: 2px 4px 0 #121212;
-    border-radius: 25px !important;
     box-sizing: border-box;
+    resize: none;
+    vertical-align: top;
 }
-
 .emojiList {
     display: inline-flex !important;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
     width: 100%;
-    padding-bottom: 5px;
-    box-sizing: border-box;
-}
-
-.linkToForm {
-    display: flex;
-    flex-direction: row;
-    font: var(--font-dm-m);
-    color: var(--white);
+    height: 100px;
 }
-
 .linkToFormContainer {
-    width: 300px;
+    max-width:fit-content;
     display: inline-flex !important;
-    flex-direction: row;
     justify-content: space-between;
-    gap: unset;
+    gap: 10px;
 }
 
-.linkToFormContainer > * {
-    display: inline-block;
-    vertical-align: middle;
-    justify-items: end;
-    padding: 0 10px 0 10px;
+.linkToFormLabel {
+    font: var(--font-dm-m);
+    color: var(--white);
+    padding: 0;
+    margin: 0;
 }
 
-.embedabbleVersion {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
+.linkToForm {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font: var(--font-dm-m);
+    color: var(--white);
 }
+
 .externalLinkIcon {
     display: inline;
     vertical-align: middle !important;
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 7924090a2..5bb07b608 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,6 +12,7 @@ import { useClientTranslation } from '@/shared/i18n';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
 import cls from './FeedbackCard.module.scss';
 import FeedbackEmoji from '../FeedbackEmoji/FeedbackEmoji';
+import FeedbackCardSuccess from '../FeedbackCardSuccess/FeedbackCardSuccess';
 
 /**
  * Props for the FeedbackCard component.
@@ -35,8 +36,21 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
     const { t } = useClientTranslation('feedbackCard');
     const [feedback, setFeedback] = useState<string>('');
     const [feedbackEmoji, setFeedbackEmoji] = useState<number>();
+    const [isSubmitted, setIsSubmitted] = useState(false);
     const [addFeedback, { isLoading }] = useAddFeedbackMutation();
 
+    const RATING_PLACEHOLDERS: Record<number, string> = {
+        1: t('input-placeholder-1'),
+        2: t('input-placeholder-2'),
+        3: t('input-placeholder-3'),
+        4: t('input-placeholder-4'),
+        5: t('input-placeholder-5'),
+    };
+
+    const currentPlaceholder = feedbackEmoji
+        ? RATING_PLACEHOLDERS[feedbackEmoji]
+        : t('input-placeholder');
+
     /**
      * Display a toast message to the user.
      * @function
@@ -69,13 +83,22 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
             await addFeedback(feedbackData).unwrap();
 
             showToast(t('success'), 'success');
+            setIsSubmitted(true);
             setFeedback('');
-            setFeedbackEmoji(undefined);
         } catch {
             showToast(t('error-submit-failed'), 'error');
         }
     };
 
+    if (isSubmitted) {
+        return (
+            <FeedbackCardSuccess
+                className={variant === 'embedabble' ? cls.embedabbleVersion : ''}
+                rating={feedbackEmoji}
+            />
+        );
+    }
+
     return (
         <CustomForm
             className={`${cls.feedbackForm} ${variant === 'embedabble' ? cls.embedabbleVersion : ''}`}
@@ -90,9 +113,10 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                 value={feedbackEmoji}
                 onImageClick={setFeedbackEmoji}
             />
-            <CustomForm.InputField
-                label=""
-                inputProps={{
+            <CustomForm.TextareaField
+                className={cls.inputField}
+                label={feedbackEmoji ? currentPlaceholder : undefined}
+                textareaProps={{
                     className: cls.textInput,
                     placeholder: t('input-placeholder'),
                     value: feedback,
@@ -118,6 +142,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                     </>
                 )}
             </CustomForm.Button>
+            <span className={cls.linkToFormLabel}>{t('feedback-text')}</span>
             <div className={cls.linkToFormContainer}>
                 <a
                     className={cls.linkToForm}
@@ -132,6 +157,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                         icon={faExternalLink}
                     />
                 </a>
+
                 <a
                     className={cls.linkToForm}
                     href={AppExternalLinks.googleFeedback}
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
new file mode 100644
index 000000000..fbc22bd12
--- /dev/null
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
@@ -0,0 +1,60 @@
+.successCard {
+    background-color: var(--base-card-background);
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+    height: 450px;
+    align-items: center;
+    gap: 16px;
+    box-shadow: 8px 8px 1px #000000;
+    border-width: 4px;
+    border-style: solid;
+    border-color: #000000;
+}
+
+.successTitle {
+    font-size: 24px;
+    font-family: 'Marko One';
+    font-weight: 400;
+    line-height: 100%;
+    color: var(--primary-color);
+    text-align: center;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.emojiList {
+    display: inline-flex !important;
+    justify-content: space-between;
+    align-items: start;
+    width: 100%;
+    height: 100px;
+}
+
+.linkToFormLabel {
+    font: var(--font-dm-m);
+    color: var(--white);
+    margin: 0;
+}
+
+.linkToFormContainer {
+    max-width: fit-content;
+    display: inline-flex !important;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.linkToForm {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font: var(--font-dm-m);
+    color: var(--white);
+}
+
+.externalLinkIcon {
+    display: inline;
+    vertical-align: middle !important;
+    margin-left: 5px;
+    color: var(--primary-color);
+}
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.tsx
new file mode 100644
index 000000000..2041d45b1
--- /dev/null
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.tsx
@@ -0,0 +1,59 @@
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useClientTranslation } from '@/shared/i18n';
+import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
+import FeedbackEmoji from '../FeedbackEmoji/FeedbackEmoji';
+import cls from './FeedbackCardSuccess.module.scss';
+
+interface FeedbackCardSuccessProps {
+    className?: string;
+    rating: number | undefined;
+}
+
+/**
+ * FeedbackCardSuccess renders the post-submission view of the feedback card.
+ * Shows the selected emoji rating, a thank-you title, and links to full feedback forms.
+ */
+export default function FeedbackCardSuccess({ className = '', rating }: FeedbackCardSuccessProps) {
+    const { t } = useClientTranslation('feedbackCard');
+
+    return (
+        <div className={`${cls.successCard} ${className}`}>
+            <h3 className={cls.successTitle}>{t('success-title')}</h3>
+            <FeedbackEmoji
+                listClassName={cls.emojiList}
+                value={rating}
+                onImageClick={() => {}}
+            />
+            <span className={cls.linkToFormLabel}>{t('feedback-text')}</span>
+            <div className={cls.linkToFormContainer}>
+                <a
+                    className={cls.linkToForm}
+                    href={AppExternalLinks.googleWebFeedback}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {t('href-to-webform')}
+                    <FontAwesomeIcon
+                        className={cls.externalLinkIcon}
+                        size={'2xs'}
+                        icon={faExternalLink}
+                    />
+                </a>
+                <a
+                    className={cls.linkToForm}
+                    href={AppExternalLinks.googleFeedback}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {t('href-to-gameform')}
+                    <FontAwesomeIcon
+                        className={cls.externalLinkIcon}
+                        size={'2xs'}
+                        icon={faExternalLink}
+                    />
+                </a>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
index 4f708bc46..8dff5e732 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
@@ -1,3 +1,16 @@
+.emojiListContainer {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.emojiList {
+    display: flex;
+    gap: 8px; // adjust as needed
+    justify-content: center;
+    display: inline-flex !important;
+}
+
 .selectedEmoji {
     transition: 0.1s;
     transform: scale(1.2);
@@ -6,8 +19,7 @@
     outline-offset: -4px;
     box-shadow: 0px 1px 7px 1px rgba($color: #c5a804cc, $alpha: 1);
     cursor: pointer;
-    width: 48px;
-    height: 48px;
+
 }
 
 .Emoji:hover {
@@ -16,3 +28,38 @@
     border-radius: 25px;
     outline-offset: -4px;
 }
+
+.ratingLabel {
+    position: absolute;
+    top: 58px; 
+    margin: 0;
+    background-color: #ffa101;
+    color: white;
+    border: 1px solid black;
+    border-radius: 12px;
+    height: 25px;
+    width: 64px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 16px;
+    white-space: nowrap;
+}
+
+.ratingLabel::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #ffa101;
+}
+
+.ratingText {
+    padding: 5px;
+    font-size: 15px;
+    color: black !important;
+}
\ No newline at end of file
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
index a31eef994..abcb99057 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
@@ -37,23 +37,45 @@ const FeedbackEmoji = ({ listClassName = '', value, onImageClick }: Props) => {
         { src: JoyEmoji.src, value: 4 },
         { src: LoveEmoji.src, value: 5 },
     ];
+    const RATING_LABELS: Record<number, string> = {
+        1: 'Huono',
+        2: 'Meh..',
+        3: 'Ihan ok',
+        4: 'Hyvä',
+        5: 'Loistava',
+    };
 
     return (
-        <div className={classNames(cls.emojiList, {}, [listClassName])}>
-            {emojies.map((image: any, index: number) => (
-                <Image
-                    src={image.src}
-                    alt={`Feedback Emoji ${image.value}`}
-                    key={index}
-                    width={48}
-                    height={48}
-                    quality={100}
-                    className={value === image.value ? cls.selectedEmoji : cls.Emoji}
-                    onClick={() =>
-                        value !== image.value ? onImageClick(image.value) : onImageClick(undefined)
-                    }
-                />
-            ))}
+        <div className={classNames(cls.emojiListContainer, {}, [listClassName])}>
+            <div className={cls.emojiList}>
+                {emojies.map((image: any, index: number) => (
+                    <Image
+                        src={image.src}
+                        alt={`Feedback Emoji ${image.value}`}
+                        key={index}
+                        width={48}
+                        height={48}
+                        quality={100}
+                        className={value === image.value ? cls.selectedEmoji : cls.Emoji}
+                        onClick={() =>
+                            value !== image.value
+                                ? onImageClick(image.value)
+                                : onImageClick(undefined)
+                        }
+                    />
+                ))}
+            </div>
+            {value && (
+                <div
+                    className={cls.ratingLabel}
+                    style={{
+                        left: `calc(50% + ${(emojies.findIndex((e) => e.value === value) - 2) * 52}px)`,
+                        transform: 'translateX(-50%)',
+                    }}
+                >
+                    <p className={cls.ratingText}>{RATING_LABELS[value]}</p>
+                </div>
+            )}
         </div>
     );
 };

From 4c60cc66ee7d0c856660d58e548c5ba0a2149687 Mon Sep 17 00:00:00 2001
From: Teemu Kalmari <95919515+temez26@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:00:53 +0300
Subject: [PATCH 2/6] now the successcard looks more correct, and fixed some
 visual bugs that appeared when selecting the emoji

---
 .../ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx    |  2 +-
 .../FeedbackCardSuccess.module.scss                    |  9 +++++----
 .../ui/FeedbackEmoji/FeedbackEmoji.module.scss         | 10 +++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

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 5bb07b608..6a14c94fb 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
@@ -115,7 +115,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
             />
             <CustomForm.TextareaField
                 className={cls.inputField}
-                label={feedbackEmoji ? currentPlaceholder : undefined}
+                label={feedbackEmoji ? currentPlaceholder : '\u00A0'}
                 textareaProps={{
                     className: cls.textInput,
                     placeholder: t('input-placeholder'),
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
index fbc22bd12..558561090 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
@@ -3,9 +3,11 @@
     display: flex;
     flex-direction: column;
     max-width: 300px;
-    height: 450px;
+    height: 200px;
     align-items: center;
-    gap: 16px;
+    border-radius: 12px;
+    gap: 8px;
+    padding: 10px;
     box-shadow: 8px 8px 1px #000000;
     border-width: 4px;
     border-style: solid;
@@ -28,13 +30,12 @@
     justify-content: space-between;
     align-items: start;
     width: 100%;
-    height: 100px;
+    height: 150px !important;
 }
 
 .linkToFormLabel {
     font: var(--font-dm-m);
     color: var(--white);
-    margin: 0;
 }
 
 .linkToFormContainer {
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
index 8dff5e732..e1a22efc1 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
@@ -2,11 +2,12 @@
     position: relative;
     display: inline-block;
     width: 100%;
+    height: 100px;
 }
 
 .emojiList {
     display: flex;
-    gap: 8px; // adjust as needed
+    gap: 5px; 
     justify-content: center;
     display: inline-flex !important;
 }
@@ -39,7 +40,9 @@
     border-radius: 12px;
     height: 25px;
     width: 64px;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-weight: 500;
     font-size: 16px;
     white-space: nowrap;
@@ -59,7 +62,8 @@
 }
 
 .ratingText {
-    padding: 5px;
+    margin: 0;
+    padding: 0;
     font-size: 15px;
     color: black !important;
 }
\ No newline at end of file

From 70fe057a20d786476afe93ba49d1d29f8165e310 Mon Sep 17 00:00:00 2001
From: Teemu Kalmari <95919515+temez26@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:03:04 +0300
Subject: [PATCH 3/6] updated the english i18 json to more shorter sentences

---
 .../src/shared/i18n/locales/en/feedbackCard.json              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
index 5f33bbeb2..615cdd6dd 100644
--- a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
@@ -4,8 +4,8 @@
     "input-placeholder": "Please write here",
     "input-placeholder-1": "What bothered you the most?",
     "input-placeholder-2": "What fell short of your expectations?",
-    "input-placeholder-3": "What was good and what could be improved?",
-    "input-placeholder-4": "Great to hear! Any suggestions for improvement?",
+    "input-placeholder-3": "What could be improved?",
+    "input-placeholder-4": "Any suggestions for improvement?",
     "input-placeholder-5": "Wonderful! What did you like the most?",
     "send": "Send",
     "loading": "Sending...",

From fc9ec6f4dff009e157d08dc0047d8ae634f66a2e Mon Sep 17 00:00:00 2001
From: Teemu Kalmari <95919515+temez26@users.noreply.github.com>
Date: Sat, 18 Apr 2026 07:57:22 +0300
Subject: [PATCH 4/6] small ui adjustments in feedbackform

---
 .../src/shared/i18n/locales/en/feedbackCard.json  |  9 +++++++--
 .../src/shared/i18n/locales/fi/feedbackCard.json  |  7 ++++++-
 .../FeedbackCardSuccess.module.scss               |  4 +---
 .../ui/FeedbackEmoji/FeedbackEmoji.module.scss    |  3 +--
 .../Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx   | 15 +++++++++------
 5 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
index 615cdd6dd..ace6bcc56 100644
--- a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
@@ -1,7 +1,7 @@
 {
     "title": "Tell your opinion about our websites",
     "success-title": "Thank you for your feedback!",
-    "input-placeholder": "Please write here",
+    "input-placeholder": "(Optional)",
     "input-placeholder-1": "What bothered you the most?",
     "input-placeholder-2": "What fell short of your expectations?",
     "input-placeholder-3": "What could be improved?",
@@ -15,5 +15,10 @@
     "feedback-text": "Give specific feedback",
     "success": "Thank you very much! We appreciate your feedback.",
     "href-to-webform": "Web form",
-    "href-to-gameform": "Game form"
+    "href-to-gameform": "Game form",
+    "rating-label-1": "Bad",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "OK",
+    "rating-label-4": "Good",
+    "rating-label-5": "Great"
 }
diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
index a862afaf9..7ea297004 100644
--- a/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
@@ -15,5 +15,10 @@
     "feedback-text": "Anna tarkempi palaute",
     "success": "Kiitos paljon! Arvostamme palautettasi.",
     "href-to-webform": "Web lomake",
-    "href-to-gameform": "Peli lomake"
+    "href-to-gameform": "Peli lomake",
+    "rating-label-1": "Huono",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "Ihan ok",
+    "rating-label-4": "Hyvä",
+    "rating-label-5": "Loistava"
 }
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
index 558561090..a35f2f721 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
@@ -3,7 +3,6 @@
     display: flex;
     flex-direction: column;
     max-width: 300px;
-    height: 200px;
     align-items: center;
     border-radius: 12px;
     gap: 8px;
@@ -29,8 +28,7 @@
     display: inline-flex !important;
     justify-content: space-between;
     align-items: start;
-    width: 100%;
-    height: 150px !important;
+    height: 80px !important;
 }
 
 .linkToFormLabel {
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
index e1a22efc1..979404404 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
@@ -1,7 +1,6 @@
 .emojiListContainer {
     position: relative;
     display: inline-block;
-    width: 100%;
     height: 100px;
 }
 
@@ -32,7 +31,7 @@
 
 .ratingLabel {
     position: absolute;
-    top: 58px; 
+    top: 60px; 
     margin: 0;
     background-color: #ffa101;
     color: white;
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
index abcb99057..d99b01bef 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
@@ -1,3 +1,4 @@
+'use client';
 import AngerEmoji from '@/shared/assets/icons/Feedback/AngerChatEmoticon.png';
 import JoyEmoji from '@/shared/assets/icons/Feedback/JoyChatEmoticon.png';
 import LoveEmoji from '@/shared/assets/icons/Feedback/LoveChatEmoticon.png';
@@ -5,6 +6,7 @@ import PlayfulEmoji from '@/shared/assets/icons/Feedback/PlayfulChatEmoticon.png
 import SadEmoji from '@/shared/assets/icons/Feedback/SadnessChatEmoticon.png';
 import Image from 'next/image';
 import { classNames } from '@/shared/lib/classNames/classNames';
+import { useClientTranslation } from '@/shared/i18n';
 import cls from './FeedbackEmoji.module.scss';
 
 /**
@@ -30,6 +32,7 @@ type Props = {
 };
 
 const FeedbackEmoji = ({ listClassName = '', value, onImageClick }: Props) => {
+    const { t } = useClientTranslation('feedbackCard');
     const emojies = [
         { src: AngerEmoji.src, value: 1 },
         { src: SadEmoji.src, value: 2 },
@@ -38,11 +41,11 @@ const FeedbackEmoji = ({ listClassName = '', value, onImageClick }: Props) => {
         { src: LoveEmoji.src, value: 5 },
     ];
     const RATING_LABELS: Record<number, string> = {
-        1: 'Huono',
-        2: 'Meh..',
-        3: 'Ihan ok',
-        4: 'Hyvä',
-        5: 'Loistava',
+        1: t('rating-label-1'),
+        2: t('rating-label-2'),
+        3: t('rating-label-3'),
+        4: t('rating-label-4'),
+        5: t('rating-label-5'),
     };
 
     return (
@@ -69,7 +72,7 @@ const FeedbackEmoji = ({ listClassName = '', value, onImageClick }: Props) => {
                 <div
                     className={cls.ratingLabel}
                     style={{
-                        left: `calc(50% + ${(emojies.findIndex((e) => e.value === value) - 2) * 52}px)`,
+                        left: `calc(50% + ${(emojies.findIndex((emoji) => emoji.value === value) - 2) * 52}px)`,
                         transform: 'translateX(-50%)',
                     }}
                 >

From d4424eb4f6300749efcf150ef3f2f488eb907488 Mon Sep 17 00:00:00 2001
From: Teemu Kalmari <95919515+temez26@users.noreply.github.com>
Date: Sat, 18 Apr 2026 08:00:08 +0300
Subject: [PATCH 5/6] updated submitfeedback function to  accept the feedback
 text as optional

---
 .../src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 6a14c94fb..82a313049 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
@@ -70,7 +70,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
      * It sends the feedback data to the server if valid.
      */
     const submitFeedback = async () => {
-        if (!feedback || !feedbackEmoji) {
+        if (!feedbackEmoji) {
             showToast(t('error'), 'error');
             return;
         }

From 9635f342f80756785246274ab7e6956deb4e1d30 Mon Sep 17 00:00:00 2001
From: Teemu Kalmari <95919515+temez26@users.noreply.github.com>
Date: Sat, 18 Apr 2026 08:11:32 +0300
Subject: [PATCH 6/6] udpated feedback form textinput outline style to none

---
 .../ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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 c49e31ae2..81ac023cb 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
@@ -43,13 +43,10 @@
 }
 
 .inputField {
-    width: 100%;
-
     label {
         font: var(--font-dm-m);
         font-size: 14px;
         color: var(--white);
-     
         display: block;
     }
 }
@@ -66,6 +63,7 @@
     box-sizing: border-box;
     resize: none;
     vertical-align: top;
+    outline: none;
 }
 .emojiList {
     display: inline-flex !important;