feat: Add edit icon to project name (#457)

client/src/components/Header/Header.jsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
-import { Icon, Menu } from 'semantic-ui-react';
+import { Button, Icon, Menu } from 'semantic-ui-react';
 import { usePopup } from '../../lib/popup';
 
 import Paths from '../../constants/Paths';
@@ -55,15 +55,16 @@ const Header = React.memo(
               >
                 <Icon fitted name="arrow left" />
               </Menu.Item>
-              <Menu.Item
-                className={classNames(
-                  styles.item,
-                  canEditProject && styles.itemHoverable,
-                  styles.title,
-                )}
-                onClick={handleProjectSettingsClick}
-              >
+              <Menu.Item className={classNames(styles.item, styles.title)}>
                 {project.name}
+                {canEditProject && (
+                  <Button
+                    className={classNames(styles.editButton, styles.target)}
+                    onClick={handleProjectSettingsClick}
+                  >
+                    <Icon fitted name="pencil" size="small" />
+                  </Button>
+                )}
               </Menu.Item>
             </Menu.Menu>
           )}