From 5f435a524e4930a894ef9cb823dc8a68a5a622f8 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 16:27:16 +0200
Subject: [PATCH] clarifiy checkbox

---
 .../packages/ui-components/src/forms/Radio.js | 25 +++++++++----------
 scm-ui/src/groups/components/GroupForm.js     |  6 ++---
 scm-ui/src/users/components/UserForm.js       | 20 ++++++++++-----
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/forms/Radio.js b/scm-ui-components/packages/ui-components/src/forms/Radio.js
index 6460e67070..7e61b25ec0 100644
--- a/scm-ui-components/packages/ui-components/src/forms/Radio.js
+++ b/scm-ui-components/packages/ui-components/src/forms/Radio.js
@@ -22,19 +22,18 @@ class Radio extends React.Component<Props> {
 
   render() {
     return (
-
-          <label className="radio" disabled={this.props.disabled}>
-            <input
-              type="radio"
-              name={this.props.name}
-              value={this.props.value}
-              checked={this.props.checked}
-              onChange={this.props.onChange}
-              disabled={this.props.disabled}
-            />{" "}
-            {this.props.label}
-            {this.renderHelp()}
-          </label>
+      <label className="radio" disabled={this.props.disabled}>
+        <input
+          type="radio"
+          name={this.props.name}
+          value={this.props.value}
+          checked={this.props.checked}
+          onChange={this.props.onChange}
+          disabled={this.props.disabled}
+        />{" "}
+        {this.props.label}
+        {this.renderHelp()}
+      </label>
     );
   }
 }
diff --git a/scm-ui/src/groups/components/GroupForm.js b/scm-ui/src/groups/components/GroupForm.js
index dae1229f10..07e9085af7 100644
--- a/scm-ui/src/groups/components/GroupForm.js
+++ b/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}
diff --git a/scm-ui/src/users/components/UserForm.js b/scm-ui/src/users/components/UserForm.js
index 48314bef47..a6de2e7bca 100644
--- a/scm-ui/src/users/components/UserForm.js
+++ b/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,11 +140,17 @@ class UserForm extends React.Component<Props, State> {
       subtitle = <Subtitle subtitle={t("userForm.subtitle")} />;
     }
 
-    const iconType = user && user.active ? (
-      <Icon title={t("user.active")} name="user" />
-    ) : (
-      <Icon title={t("user.inactive")} name="user-slash" />
-    );
+    const iconType =
+      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")}