clarifiy checkbox

scm-ui-components/packages/ui-components/src/forms/Radio.js

@@ -22,7 +22,6 @@ class Radio extends React.Component<Props> {
 
   render() {
     return (
-
       <label className="radio" disabled={this.props.disabled}>
         <input
           type="radio"

scm-ui/src/groups/components/GroupForm.js

@@ -116,14 +116,14 @@ class GroupForm extends React.Component<Props, State> {
     }
 
     const iconType = group && group.external ? (
-      <Icon title={t("group.external")} name="sign-out-alt fa-rotate-270" />
+      <>{t("group.external")} <Icon title={t("group.external")} name="sign-out-alt fa-rotate-270" /></>
     ) : (
-      <Icon title={t("group.internal")} name="sign-in-alt fa-rotate-90" />
+      <>{t("group.internal")} <Icon title={t("group.internal")} name="sign-in-alt fa-rotate-90" /></>
     );
 
     return (
       <Checkbox
-        label={<>{iconType} {t("group.external")}</>}
+        label={iconType}
         checked={group.external}
         helpText={t("groupForm.help.externalHelpText")}
         onChange={this.handleExternalChange}

scm-ui/src/users/components/UserForm.js

@@ -17,6 +17,8 @@ type Props = {
   submitForm: User => void,
   user?: User,
   loading?: boolean,
+
+  // context props
   t: string => string
 };
 
@@ -138,10 +140,16 @@ class UserForm extends React.Component<Props, State> {
       subtitle = <Subtitle subtitle={t("userForm.subtitle")} />;
     }
 
-    const iconType = user && user.active ? (
+    const iconType =
-      <Icon title={t("user.active")} name="user" />
+      user && user.active ? (
+        <>
+          {t("user.active")} <Icon title={t("user.active")} name="user" />
+        </>
       ) : (
+        <>
+          {t("user.inactive")}{" "}
           <Icon title={t("user.inactive")} name="user-slash" />
+        </>
       );
 
     return (
@@ -175,7 +183,7 @@ class UserForm extends React.Component<Props, State> {
             <div className="column">
               {passwordChangeField}
               <Checkbox
-                label={<>{iconType} {t("user.active")}</>}
+                label={iconType}
                 onChange={this.handleActiveChange}
                 checked={user ? user.active : false}
                 helpText={t("help.activeHelpText")}