diff --git a/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx b/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx index e79cfe6d2..75363b5e2 100644 --- a/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx +++ b/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx @@ -23,20 +23,31 @@ import RadioButton from './RadioButton'; */ const RadioButtonGroup = (props) => { const { indexClicked, handleItemClick } = props; + + const labels = props.labels.map(label => ( +
+ {t(label)} +
+ )); + + const buttons = props.labels.map((label, index) => ( +
+ handleItemClick(index)} + /> +
+ )); + return ( - props.labels.map((label, index) => ( -
- - {t(label)} - -
- handleItemClick(index)} - /> -
+
+
+ {labels} +
+
+ {buttons}
- )) +
); }; diff --git a/app/scss/partials/_radio_button.scss b/app/scss/partials/_radio_button.scss index 51ddeb4bb..44a33a3fd 100644 --- a/app/scss/partials/_radio_button.scss +++ b/app/scss/partials/_radio_button.scss @@ -11,13 +11,25 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ +.RadioButtonGroup__container { + margin-top: 20px; + display: flex; +} +.RadioButtonGroup__labelContainer { + display: flex; + flex-direction: column; + margin-right: 15px; +} .RadioButtonGroup__label { - margin-right: 10px; font-weight: bolder; + margin-bottom: 15px; } -.RadioButtonGroup__container { - margin: 16px 0; - width: 138px; +.RadioButtonGroup__buttonsContainer { + display: flex; + flex-direction: column; +} +.RadioButtonGroup__button { + margin-bottom: 15px; } .RadioButton__outerCircle { border: 1px solid #4a4a4a;