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>
minio · Nov 2, 2021 · e7f1aef · e7f1aef
1 parent 2f91713
commit e7f1aef
Showing 1 changed file with 30 additions and 36 deletions.
diff --git a/...al-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx b/...al-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>
   );
 };