From e7f1aeff94f045527fde85e1d46d9c9db681e5e5 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Mon, 1 Nov 2021 18:46:43 -0700
Subject: [PATCH] Align right radio groups (#1167)

* Match Design for Switches

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Margins

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Align Right Radio Buttons

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>
---
 .../RadioGroupSelector/RadioGroupSelector.tsx | 66 +++++++++----------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
index c13eb85d0..3973b66d9 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
@@ -50,12 +50,6 @@ const styles = (theme: Theme) =>
     ...fieldBasic,
     ...tooltipHelper,
     radioBoxContainer: {},
-    fieldContainer: {
-      ...fieldBasic.fieldContainer,
-      display: "flex",
-      paddingBottom: 10,
-      marginTop: 11,
-    },
     optionLabel: {
       "&.Mui-disabled": {
         "& .MuiFormControlLabel-label": {
@@ -116,8 +110,8 @@ export const RadioGroupSelector = ({
   displayInColumn = false,
 }: RadioGroupProps) => {
   return (
-    <React.Fragment>
-      <Grid item xs={12} className={classes.fieldContainer}>
+    <Grid container alignItems={"center"}>
+      <Grid item xs>
         <InputLabel htmlFor={id} className={classes.inputLabel}>
           <span>{label}</span>
           {tooltip !== "" && (
@@ -130,35 +124,35 @@ export const RadioGroupSelector = ({
             </div>
           )}
         </InputLabel>
-
-        <div className={classes.radioBoxContainer}>
-          <RadioGroup
-            aria-label={id}
-            id={id}
-            name={name}
-            value={currentSelection}
-            onChange={onChange}
-            row={!displayInColumn}
-          >
-            {selectorOptions.map((selectorOption) => {
-              return (
-                <FormControlLabel
-                  key={`rd-${name}-${selectorOption.value}`}
-                  value={selectorOption.value}
-                  control={<RadioButton />}
-                  label={selectorOption.label}
-                  disabled={disableOptions}
-                  className={clsx(classes.optionLabel, {
-                    [classes.checkedOption]:
-                      selectorOption.value === currentSelection,
-                  })}
-                />
-              );
-            })}
-          </RadioGroup>
-        </div>
       </Grid>
-    </React.Fragment>
+      <Grid item xs>
+        <RadioGroup
+          aria-label={id}
+          id={id}
+          name={name}
+          value={currentSelection}
+          onChange={onChange}
+          row={!displayInColumn}
+          style={{ display: "block", textAlign: "right" }}
+        >
+          {selectorOptions.map((selectorOption) => {
+            return (
+              <FormControlLabel
+                key={`rd-${name}-${selectorOption.value}`}
+                value={selectorOption.value}
+                control={<RadioButton />}
+                label={selectorOption.label}
+                disabled={disableOptions}
+                className={clsx(classes.optionLabel, {
+                  [classes.checkedOption]:
+                    selectorOption.value === currentSelection,
+                })}
+              />
+            );
+          })}
+        </RadioGroup>
+      </Grid>
+    </Grid>
   );
 };