feat: add edit icon to project tab, closes #450

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';
@@ -61,9 +61,14 @@ const Header = React.memo(
                   canEditProject && styles.itemHoverable,
                   styles.title,
                 )}
-                onClick={handleProjectSettingsClick}
               >
                 {project.name}
+                <Button
+                  className={classNames(styles.actionsButton, styles.target)}
+                  onClick={handleProjectSettingsClick}
+                >
+                  <Icon fitted name="pencil" size="small" />
+                </Button>
               </Menu.Item>
             </Menu.Menu>
           )}

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

@@ -11,6 +11,10 @@
     &:hover {
       background: transparent;
       color: rgba(255, 255, 255, 0.9);
+
+      .target {
+        opacity: 1;
+      }
     }
   }
 
@@ -71,4 +75,26 @@
     display: flex;
     flex: 0 0 auto;
   }
+
+  .actionsButton {
+    background: none;
+    box-shadow: none;
+    border-radius: 3px;
+    box-sizing: content-box;
+    color: #fff;
+    display: inline-block;
+    text-align: center;
+    margin: 0;
+    min-height: auto;
+    opacity: 0;
+    outline: none;
+    padding: 4px;
+    transition: background 85ms ease;
+    width: 20px;
+    margin-left: 12px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
 }