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>

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,8 +124,8 @@ export const RadioGroupSelector = ({
             </div>
           )}
         </InputLabel>
-
-        <div className={classes.radioBoxContainer}>
+      </Grid>
+      <Grid item xs>
         <RadioGroup
           aria-label={id}
           id={id}
@@ -139,6 +133,7 @@ export const RadioGroupSelector = ({
           value={currentSelection}
           onChange={onChange}
           row={!displayInColumn}
+          style={{ display: "block", textAlign: "right" }}
         >
           {selectorOptions.map((selectorOption) => {
             return (
@@ -156,9 +151,8 @@ export const RadioGroupSelector = ({
             );
           })}
         </RadioGroup>
-        </div>
       </Grid>
-    </React.Fragment>
+    </Grid>
   );
 };