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
+              <Menu.Item className={classNames(styles.item, styles.title)}>
-                className={classNames(
-                  styles.item,
-                  canEditProject && styles.itemHoverable,
-                  styles.title,
-                )}
-                onClick={handleProjectSettingsClick}
-              >
                 {project.name}
+                {canEditProject && (
+                  <Button
+                    className={classNames(styles.editButton, styles.target)}
+                    onClick={handleProjectSettingsClick}
+                  >
+                    <Icon fitted name="pencil" size="small" />
+                  </Button>
+                )}
               </Menu.Item>
             </Menu.Menu>
           )}

client/src/components/Header/Header.module.scss

@@ -1,4 +1,20 @@
 :global(#app) {
+  .editButton {
+    background: transparent;
+    box-shadow: none;
+    color: #fff;
+    font-size: 15px;
+    line-height: 34px;
+    margin-left: 8px;
+    opacity: 0;
+    padding: 0;
+    width: 34px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
   .item {
     cursor: auto;
     user-select: auto;
@@ -11,6 +27,10 @@
     &:hover {
       background: transparent;
       color: rgba(255, 255, 255, 0.9);
+
+      .target {
+        opacity: 1;
+      }
     }
   }