Improving simple user container appearance.

ReCodEx · Jan 10, 2018 · 9e8151c · SemaiCZE · Jan 10, 2018 · 9e8151c
1 parent 8bf3bda
commit 9e8151c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/containers/UsersNameContainer/UsersNameContainer.css b/src/containers/UsersNameContainer/UsersNameContainer.css
@@ -1,5 +1,19 @@
 .simpleName {
-  margin-left: 4px;
-  margin-right: 4px;
   white-space: nowrap;
 }
+
+.simpleName:after {
+  content: ', ';
+}
+
+.simpleName:first-of-type {
+  margin-left: 2px;
+}
+
+.simpleName:last-of-type {
+  margin-right: 3px;
+}
+
+.simpleName:last-of-type:after {
+  content: '';
+}
diff --git a/src/containers/UsersNameContainer/UsersNameContainer.js b/src/containers/UsersNameContainer/UsersNameContainer.js
@@ -11,6 +11,7 @@ import UsersName, {
   LoadingUsersName,
   FailedUsersName
 } from '../../components/Users/UsersName';
+import { LoadingIcon, FailedIcon } from '../../components/icons';
 
 import './UsersNameContainer.css';
 
@@ -35,8 +36,8 @@ class UsersNameContainer extends Component {
     return (
       <ResourceRenderer
         resource={user}
-        loading={<LoadingUsersName size={size} />}
-        failed={<FailedUsersName size={size} />}
+        loading={isSimple ? <LoadingIcon /> : <LoadingUsersName size={size} />}
+        failed={isSimple ? <FailedIcon /> : <FailedUsersName size={size} />}
       >
         {user =>
           isSimple