Small UI improvements, update dependencies

client/src/components/Header/Header.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Icon, Menu } from 'semantic-ui-react';
 
@@ -20,46 +19,40 @@ const Header = React.memo(
     onNotificationDelete,
     onUsers,
     onLogout,
-  }) => {
-    const [t] = useTranslation();
-
-    return (
-      <div className={styles.wrapper}>
-        <Link to={Paths.ROOT} className={styles.logo}>
-          Planka
-        </Link>
-        <Menu inverted size="large" className={styles.menu}>
+  }) => (
+    <div className={styles.wrapper}>
+      <Link to={Paths.ROOT} className={styles.logo}>
+        Planka
+      </Link>
+      <Menu inverted size="large" className={styles.menu}>
+        <Menu.Menu position="right">
           {isEditable && (
             <Menu.Item className={styles.item} onClick={onUsers}>
-              {t('common.users', {
-                context: 'title',
-              })}
+              <Icon fitted name="users" />
             </Menu.Item>
           )}
-          <Menu.Menu position="right">
-            <NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
-              <Menu.Item className={styles.item}>
-                <Icon name="bell" className={styles.icon} />
-                {notifications.length > 0 && (
-                  <span className={styles.notification}>{notifications.length}</span>
-                )}
-              </Menu.Item>
-            </NotificationsPopup>
-            <UserPopup
-              name={user.name}
-              avatar={user.avatar}
-              isAvatarUploading={user.isAvatarUploading}
-              onUpdate={onUserUpdate}
-              onAvatarUpload={onUserAvatarUpload}
-              onLogout={onLogout}
-            >
-              <Menu.Item className={styles.item}>{user.name}</Menu.Item>
-            </UserPopup>
-          </Menu.Menu>
-        </Menu>
-      </div>
-    );
-  },
+          <NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
+            <Menu.Item className={styles.item}>
+              <Icon fitted name="bell" />
+              {notifications.length > 0 && (
+                <span className={styles.notification}>{notifications.length}</span>
+              )}
+            </Menu.Item>
+          </NotificationsPopup>
+          <UserPopup
+            name={user.name}
+            avatar={user.avatar}
+            isAvatarUploading={user.isAvatarUploading}
+            onUpdate={onUserUpdate}
+            onAvatarUpload={onUserAvatarUpload}
+            onLogout={onLogout}
+          >
+            <Menu.Item className={styles.item}>{user.name}</Menu.Item>
+          </UserPopup>
+        </Menu.Menu>
+      </Menu>
+    </div>
+  ),
 );
 
 Header.propTypes = {

client/src/components/Header/Header.module.css

@@ -1,7 +1,3 @@
-.icon {
-  margin: 0 !important;
-}
-
 .item:before {
   background: none !important;
 }

client/src/components/Header/UserPopup/EditNameStep.jsx

@@ -44,6 +44,7 @@ const EditNameStep = React.memo(({
       </Popup.Header>
       <Popup.Content>
         <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.name')}</div>
           <Input
             fluid
             ref={field}

client/src/components/Header/UserPopup/EditNameStep.module.css

@@ -1,3 +1,10 @@
 .field {
   margin-bottom: 8px;
 }
+
+.text {
+  color: #444444;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 6px;
+}