diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx index 030ed9371a446b6451fc4c2726a6321e73b0db37..333a703cfce737c1fa7496782ce1f960fc48d0fa 100644 --- a/src/components/CustomPopup/CustomPopupModal.tsx +++ b/src/components/CustomPopup/CustomPopupModal.tsx @@ -38,7 +38,6 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({ }} > <div id="accessibility-title">{customPopup.title}</div> - <div id="accessibility-content">{customPopup.description}</div> <IconButton aria-label={t('feedback.accessibility.button_close')} className="modal-paper-close-button" @@ -47,15 +46,18 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({ <Icon icon={CloseIcon} size={16} /> </IconButton> <div className="customPopupModal"> - <StyledIcon icon={Speaker} size={100} className={'warn-icon'} /> + <StyledIcon icon={Speaker} size={100} /> <div className="customPopup-title text-20-bold"> {customPopup.title} </div> - <div className="customPopup-content text-16-normal"> - {customPopup.description} - </div> + <div + className="customPopup-content text-16-normal" + dangerouslySetInnerHTML={{ + __html: customPopup.description, + }} + /> <Button onClick={handleCloseClick} diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap index 763abb2f2d90f65a61f92aa5db07d8850cae1a1f..7a89a437bc8205c4758d0a148d7120fb50dcaf50 100644 --- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap +++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap @@ -417,11 +417,6 @@ exports[`CustomPopupModal component should render correctly 1`] = ` > Bold title </div> - <div - id="accessibility-content" - > - Interesting description - </div> <button aria-label="feedback.accessibility.button_close" class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" @@ -450,7 +445,7 @@ exports[`CustomPopupModal component should render correctly 1`] = ` > <svg aria-hidden="true" - class="warn-icon styles__icon___23x3R" + class="styles__icon___23x3R" height="100" width="100" > @@ -695,11 +690,6 @@ exports[`CustomPopupModal component should render correctly 1`] = ` > Bold title </div> - <div - id="accessibility-content" - > - Interesting description - </div> <WithStyles(ForwardRef(IconButton)) aria-label="feedback.accessibility.button_close" className="modal-paper-close-button" @@ -829,27 +819,25 @@ exports[`CustomPopupModal component should render correctly 1`] = ` className="customPopupModal" > <StyledIcon - className="warn-icon" icon="test-file-stub" size={100} > <Icon aria-hidden={true} - className="warn-icon" icon="test-file-stub" size={100} spin={false} > <Component aria-hidden={true} - className="warn-icon styles__icon___23x3R" + className="styles__icon___23x3R" height={100} style={Object {}} width={100} > <svg aria-hidden={true} - className="warn-icon styles__icon___23x3R" + className="styles__icon___23x3R" height={100} style={Object {}} width={100} @@ -868,9 +856,12 @@ exports[`CustomPopupModal component should render correctly 1`] = ` </div> <div className="customPopup-content text-16-normal" - > - Interesting description - </div> + dangerouslySetInnerHTML={ + Object { + "__html": "Interesting description", + } + } + /> <WithStyles(ForwardRef(Button)) classes={ Object { diff --git a/src/components/CustomPopup/customPopupModal.scss b/src/components/CustomPopup/customPopupModal.scss index 4262831b6a91356c8fe5424287429fac1a1fc638..c780b1363d19185ad268e008180db4042f348e52 100644 --- a/src/components/CustomPopup/customPopupModal.scss +++ b/src/components/CustomPopup/customPopupModal.scss @@ -6,29 +6,35 @@ } .customPopupModal { + display: flex; + flex-direction: column; + align-items: center; padding: 1rem; max-width: 20rem; - .warn-icon { - margin: 1rem auto; - display: block; - } .customPopup-title { - text-align: center; color: $gold-shadow; margin: 1rem auto; } .customPopup-content { text-align: center; - color: $grey-bright; + font-weight: 700; + p { + color: $grey-bright; + } + + a { + color: $gold-shadow; + } } button.btn-highlight { - padding: 0.65rem; + padding: 0.65rem 2.5rem; + margin-top: 1rem; + width: unset; } } -#accessibility-title, -#accessibility-content { +#accessibility-title { display: none; }