Improve permission select styles

Feature #14365

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/sharing-dialog/permission-select.tsx b/src/views-components/sharing-dialog/permission-select.tsx
index 6a889225f9d8c394cff07fc523578c470c3c5e32..582f3bcff96e09560fd5c1ab5f97b7c7b7a4f40b 100644 (file)
--- a/src/views-components/sharing-dialog/permission-select.tsx
+++ b/src/views-components/sharing-dialog/permission-select.tsx
@@ -44,32 +44,38 @@ export const PermissionSelect = withStyles(PermissionSelectStyles)(
 const renderPermissionItem = (value: string) =>
     <PermissionItem {...{ value }} />;
 
-type PermissionItemClasses = 'value';
+type PermissionItemClasses = 'value' | 'icon';
 
 const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
     value: {
         marginLeft: theme.spacing.unit,
+    },
+    icon: {
+       margin: `-${theme.spacing.unit / 2}px 0`,
     }
 });
 
 const PermissionItem = withStyles(permissionItemStyles)(
-    ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) =>
-        <Grid container alignItems='center'>
-            {renderPermissionIcon(value)}
-            <span className={classes.value}>
-                {value}
-            </span>
-        </Grid>);
+    ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) => {
+        const Icon = getIcon(value);
+        return (
+            <Grid container alignItems='center'>
+                <Icon className={classes.icon} />
+                <span className={classes.value}>
+                    {value}
+                </span>
+            </Grid>);
+    });
 
-const renderPermissionIcon = (value: string) => {
+const getIcon = (value: string) => {
     switch (value) {
         case PermissionSelectValue.READ:
-            return <RemoveRedEye />;
+            return RemoveRedEye;
         case PermissionSelectValue.WRITE:
-            return <Edit />;
+            return Edit;
         case PermissionSelectValue.MANAGE:
-            return <Computer />;
+            return Computer;
         default:
-            return null;
+            return Computer;
     }
 };