diff --git a/web/src/components/Feedback.tsx b/web/src/components/Feedback.tsx index c463262551..b2ecd48221 100644 --- a/web/src/components/Feedback.tsx +++ b/web/src/components/Feedback.tsx @@ -24,7 +24,7 @@ export const Container = styled.div<{ fullWidth?: boolean }>` font-size: ${props => props.theme.fonts.contentFontSize}; overflow: auto; align-self: center; - gap: ${props => (props.fullWidth ? '7px' : 0)}; + gap: 7px; @media ${dimensions.mediumLargeViewport} { width: ${props => (props.fullWidth ? 'auto' : '400px')}; @@ -42,13 +42,17 @@ const TextContainer = styled.div` align-items: center; ` -const DescriptionOption = styled.div` +const LabelContainer = styled(TextContainer)` margin-top: 12px; + width: 100%; ` -export const Description = styled.label` +const LabelsOption = styled.div` + right: auto; +` + +export const Labels = styled.label` font-weight: 700; - margin-top: 12px; ` export const ErrorSendingStatus = styled.div` @@ -113,14 +117,18 @@ const Feedback = ({ {isSearchFeedback ? ( <> - {t('searchTermDescription')} + + {t('searchTermDescription')} + setSearchTerm(event.target.value)} /> > ) : ( <> - {t('description')} + + {t('description')} + )} - {t(description)} - ({t('optionalInfo')}) + + {t(description)} + ({t('optionalInfo')}) + {t('commentDescription', { appName: buildConfig().appName })} onCommentChanged(event.target.value)} /> - {t('contactMailAddress')} - ({t('optionalInfo')}) + + {t('contactMailAddress')} + ({t('optionalInfo')}) +