From 1bd0c2b2c1f14d8eafca41b106bacc820536dae8 Mon Sep 17 00:00:00 2001
From: "[object Object]" <2634337+MikeJeffers@users.noreply.github.com>
Date: Sun, 9 Jul 2023 11:49:08 -0400
Subject: [PATCH] feat: Add edit icon to project name (#457)

---
 client/src/components/Header/Header.jsx       | 19 +++++++++---------
 .../src/components/Header/Header.module.scss  | 20 +++++++++++++++++++
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx
index 54a8567f..443d3a88 100755
--- a/client/src/components/Header/Header.jsx
+++ b/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>
           )}
diff --git a/client/src/components/Header/Header.module.scss b/client/src/components/Header/Header.module.scss
index 48224d0b..6d2d876d 100644
--- a/client/src/components/Header/Header.module.scss
+++ b/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;
+      }
     }
   }