Merge pull request #769 from culturecreates/feature/issue-755

feat: added translations for image crop modal,changed radio button co…
culturecreates · Nov 9, 2023 · 56af057 · 56af057
2 parents 7b08d1e + 33d6295
commit 56af057
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 18 deletions.
diff --git a/src/components/ImageCrop/ImageCrop.jsx b/src/components/ImageCrop/ImageCrop.jsx
@@ -186,26 +186,24 @@ 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}
               value={aspectRatioType}
               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
@@ -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;
-}
+}
+
+.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
@@ -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
@@ -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"
             }