From 33d62955d90f618d64f68133a5bfb411ad034582 Mon Sep 17 00:00:00 2001
From: Abhishek P Anil <abhishek@culturecreates.com>
Date: Thu, 9 Nov 2023 15:18:45 +0530
Subject: [PATCH] feat: added translations for image crop modal,changed radio
 button color,closes #755

---
 src/components/ImageCrop/ImageCrop.jsx | 22 ++++++++++------------
 src/components/ImageCrop/imageCrop.css | 19 +++++++++++++++++--
 src/locales/en/translationEn.json      |  4 +++-
 src/locales/fr/transalationFr.json     |  8 +++++---
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/ImageCrop/ImageCrop.jsx b/src/components/ImageCrop/ImageCrop.jsx
index 40c3928bf..b22bddbb3 100644
--- a/src/components/ImageCrop/ImageCrop.jsx
+++ b/src/components/ImageCrop/ImageCrop.jsx
@@ -186,14 +186,6 @@ function ImageCrop(props) {
               {t('dashboard.events.addEditEvent.otherInformation.image.crop.subHeading')}
             </span>
           </Col>
-          <Col span={24}>
-            <span
-              className="quick-select-modal-sub-heading"
-              style={{ fontWeight: 700, color: '#222732' }}
-              data-cy="span-image-crop-frame-size-text">
-              {t('dashboard.events.addEditEvent.otherInformation.image.crop.savedFrameSize')}
-            </span>
-          </Col>
           <Col span={24}>
             <Radio.Group
               defaultValue={ASPECT_RATIO_TYPE.large.type}
@@ -201,11 +193,17 @@ function ImageCrop(props) {
               onChange={(event) => aspectRatioControl(event.target.value)}
               style={{ color: '#222732' }}>
               <Space direction="vertical">
-                <Radio value={ASPECT_RATIO_TYPE.large.type} data-cy="radio-button-large-aspect-ratio">
-                  {largeAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.ratio')}
+                <Radio
+                  value={ASPECT_RATIO_TYPE.large.type}
+                  data-cy="radio-button-large-aspect-ratio"
+                  className="image-ratio-text">
+                  {largeAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.largeImage')}
                 </Radio>
-                <Radio value={ASPECT_RATIO_TYPE.thumbnail.type} data-cy="radio-button-thumbnail-aspect-ratio">
-                  {thumbnailAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.ratio')}
+                <Radio
+                  value={ASPECT_RATIO_TYPE.thumbnail.type}
+                  data-cy="radio-button-thumbnail-aspect-ratio"
+                  className="image-ratio-text">
+                  {thumbnailAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.thumbnailImage')}
                 </Radio>
               </Space>
             </Radio.Group>
diff --git a/src/components/ImageCrop/imageCrop.css b/src/components/ImageCrop/imageCrop.css
index f5753f8ad..fa1e42278 100644
--- a/src/components/ImageCrop/imageCrop.css
+++ b/src/components/ImageCrop/imageCrop.css
@@ -60,6 +60,21 @@
   box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
 }
 
-.image-crop-wrapper .crop-container .reactEasyCrop_Contain{
+.image-crop-wrapper .crop-container .reactEasyCrop_Contain {
   z-index: -1;
-}
\ No newline at end of file
+}
+
+.image-crop-wrapper .image-ratio-text {
+  color: #222732;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 24px;
+}
+
+.image-crop-wrapper .image-ratio-text .ant-radio-inner::after {
+  background-color: #1b3de6;
+}
+
+.image-crop-wrapper .ant-radio-checked .ant-radio-inner {
+  border-color: #1b3de6;
+}
diff --git a/src/locales/en/translationEn.json b/src/locales/en/translationEn.json
index eddfa2cec..a9d076c86 100644
--- a/src/locales/en/translationEn.json
+++ b/src/locales/en/translationEn.json
@@ -233,8 +233,10 @@
             "crop": {
               "title": "Position image",
               "subHeading": "Adjust position if necessary.",
-              "savedFrameSize": "Saved frame sizes",
+              "savedFrameSize": "Available image ratios",
               "ratio": "Ratio",
+              "thumbnailImage": "Thumbnail image",
+              "largeImage": "Large image",
               "save": "Save",
               "cancel": "Cancel"
             }
diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json
index 7d30c9c76..cda83b4ff 100644
--- a/src/locales/fr/transalationFr.json
+++ b/src/locales/fr/transalationFr.json
@@ -230,10 +230,12 @@
             "dragAndDrop": "ou glisser pour télécharger",
             "browse": "Parcourir",
             "crop": {
-              "title": "Position image",
-              "subHeading": "Adjust position if necessary.",
-              "savedFrameSize": "Saved frame sizes",
+              "title": "Positionnement de l’image",
+              "subHeading": "Ajuster la position de l’image si nécessaire.",
+              "savedFrameSize": "Ratios d'images disponibles",
               "ratio": "Ratio",
+              "thumbnailImage": "Vignette",
+              "largeImage": "Image grand format",
               "save": "Sauvegarder",
               "cancel": "Annuler"
             }