From 332c9c277d8dc642e478abe1545620945625100c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E9=9B=AA=E5=86=B0?=
 <33832990+lxuebing@users.noreply.github.com>
Date: Thu, 21 Mar 2024 10:45:49 +0800
Subject: [PATCH] [ADM-774] style: enhance style for img and note text (#1251)

---
 .../MetricsStep/ReworkSettings/ReworkDialog/index.tsx  |  7 ++++---
 .../MetricsStep/ReworkSettings/ReworkDialog/style.tsx  | 10 +++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/index.tsx b/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/index.tsx
index 7bf85b9ea7..d3c3b2450d 100644
--- a/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/index.tsx
+++ b/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/index.tsx
@@ -7,7 +7,8 @@ import {
   StyledNote,
   StyledNoteTitle,
   StyledNoteText,
-  StyledImg,
+  StyledSelectedImg,
+  StyledJiraImg,
   StyledButtonGroup,
   StyledStepButton,
   StyledStepLabel,
@@ -39,8 +40,8 @@ export const ReworkDialog = (props: { isShowDialog: boolean; hiddenDialog: () =>
   const renderContent = (selectedImg: string, jiraImg: string, explanationText: string, noteText: string) => {
     return (
       <StyledStepOfRework>
-        <StyledImg src={selectedImg} alt='selected' />
-        <StyledImg src={jiraImg} alt='jira' />
+        <StyledSelectedImg src={selectedImg} alt='selected' />
+        <StyledJiraImg src={jiraImg} alt='jira' />
         <StyledNote>
           <StyledNoteTitle>Explanation: </StyledNoteTitle>
           <StyledNoteText>{explanationText}</StyledNoteText>
diff --git a/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/style.tsx b/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/style.tsx
index adf8db3cb9..fc8288ae1d 100644
--- a/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/style.tsx
+++ b/frontend/src/containers/MetricsStep/ReworkSettings/ReworkDialog/style.tsx
@@ -57,8 +57,15 @@ export const StyledStepOfRework = styled('div')({
   margin: '1rem auto',
 });
 
-export const StyledImg = styled('img')({
+export const StyledSelectedImg = styled('img')({
   width: '100%',
+  height: '6rem',
+  margin: '0.5rem 0',
+});
+
+export const StyledJiraImg = styled('img')({
+  width: '100%',
+  height: '13.5rem',
   margin: '0.5rem 0',
 });
 
@@ -80,6 +87,7 @@ export const StyledNoteText = styled('p')({
   fontWeight: '400',
   color: theme.main.note,
   lineHeight: '1.25rem',
+  opacity: '0.8',
 });
 
 export const StyledButtonGroup = styled('div')({