[ADM-774] style: enhance style for img and note text (#1251)

au-heartbeat · Mar 25, 2024 · 332c9c2 · 332c9c2
1 parent f6173e5
commit 332c9c2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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')({