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;