From 82a0ecd9b5809cee50f8f672a05faaed144ee99f Mon Sep 17 00:00:00 2001
From: Andy <awilliamscomposing@gmail.com>
Date: Thu, 14 Nov 2024 15:32:09 -0800
Subject: [PATCH 1/2] Adding copy webid util

---
 .../Contacts/ContactListTableDesktop.jsx      | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Contacts/ContactListTableDesktop.jsx b/src/components/Contacts/ContactListTableDesktop.jsx
index f4dfdef8..b17ee0c5 100644
--- a/src/components/Contacts/ContactListTableDesktop.jsx
+++ b/src/components/Contacts/ContactListTableDesktop.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import EditOutlined from '@mui/icons-material/EditOutlined';
 import SendIcon from '@mui/icons-material/Send';
+import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import {
   DataGrid,
@@ -12,6 +13,10 @@ import {
   GridToolbarFilterButton,
   GridToolbarDensitySelector
 } from '@mui/x-data-grid';
+// Custom Hooks Imports
+import useNotification from '@hooks/useNotification';
+// Util Imports
+import { saveToClipboard } from '@utils';
 // Component Imports
 import ContactProfileIcon from './ContactProfileIcon';
 
@@ -49,6 +54,7 @@ const ContactListTableDesktop = ({
   handleSendMessage,
   'data-testid': dataTestId
 }) => {
+  const { addNotification } = useNotification();
   const theme = useTheme();
 
   const columnTitlesArray = [
@@ -72,7 +78,16 @@ const ContactListTableDesktop = ({
       minWidth: 150,
       flex: 1,
       headerAlign: 'center',
-      align: 'center'
+      align: 'center',
+      renderCell: (contact) => (
+        <Typography
+          noWrap
+          sx={{ cursor: 'pointer', fontSize: '0.875rem' }}
+          onClick={() => saveToClipboard(contact.id, 'webId copied to clipboard', addNotification)}
+        >
+          {contact.id}
+        </Typography>
+      )
     },
     {
       field: 'Profile',
@@ -101,7 +116,7 @@ const ContactListTableDesktop = ({
       field: 'Edit',
       renderCell: (contact) => (
         <EditOutlined
-          sx={{ color: 'gray', cursor: 'pointer' }}
+          sx={{ color: '#808080', cursor: 'pointer' }}
           onClick={() => editContact(contact.row.Profile)}
         />
       ),

From ef5ac78ee20eb0b2577ed94ea71948d2c328e77c Mon Sep 17 00:00:00 2001
From: Andy <awilliamscomposing@gmail.com>
Date: Thu, 14 Nov 2024 15:37:32 -0800
Subject: [PATCH 2/2] Changing color to hex code, making action order
 consistent

---
 .../Contacts/ContactListTableDesktop.jsx      | 12 ++++-----
 .../Contacts/ContactListTableMobile.jsx       | 27 +++++++++----------
 src/pages/Contacts.jsx                        |  1 -
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/components/Contacts/ContactListTableDesktop.jsx b/src/components/Contacts/ContactListTableDesktop.jsx
index b17ee0c5..7f63053d 100644
--- a/src/components/Contacts/ContactListTableDesktop.jsx
+++ b/src/components/Contacts/ContactListTableDesktop.jsx
@@ -74,11 +74,6 @@ const ContactListTableDesktop = ({
     },
     {
       field: 'webId',
-      headerName: 'Web ID',
-      minWidth: 150,
-      flex: 1,
-      headerAlign: 'center',
-      align: 'center',
       renderCell: (contact) => (
         <Typography
           noWrap
@@ -87,7 +82,12 @@ const ContactListTableDesktop = ({
         >
           {contact.id}
         </Typography>
-      )
+      ),
+      headerName: 'Web ID',
+      minWidth: 150,
+      flex: 1,
+      headerAlign: 'center',
+      align: 'center'
     },
     {
       field: 'Profile',
diff --git a/src/components/Contacts/ContactListTableMobile.jsx b/src/components/Contacts/ContactListTableMobile.jsx
index 48ece5b3..1f5478a6 100644
--- a/src/components/Contacts/ContactListTableMobile.jsx
+++ b/src/components/Contacts/ContactListTableMobile.jsx
@@ -185,6 +185,18 @@ const ContactListTableMobile = ({
                   'aria-labelledby': 'actions-icon-button'
                 }}
               >
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(
+                    () =>
+                      saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
+                    contact
+                  )}
+                  startIcon={<ContentCopyIcon sx={iconSize} />}
+                  sx={iconStyling}
+                >
+                  Copy WebId
+                </MenuItem>
                 <MenuItem
                   component={Button}
                   onClick={handleMenuItemClick(handleProfileClick, contact)}
@@ -209,21 +221,6 @@ const ContactListTableMobile = ({
                 >
                   Message
                 </MenuItem>
-                {/* TODO: Keep copy function? */}
-                {/* If so, also add to Desktop table? */}
-                {/* Maybe without any icon. Simply click on the web ID and it will copy? */}
-                <MenuItem
-                  component={Button}
-                  onClick={handleMenuItemClick(
-                    () =>
-                      saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
-                    contact
-                  )}
-                  startIcon={<ContentCopyIcon sx={iconSize} />}
-                  sx={iconStyling}
-                >
-                  Copy WebId
-                </MenuItem>
                 <MenuItem
                   component={Button}
                   onClick={handleMenuItemClick(editContact, contact)}
diff --git a/src/pages/Contacts.jsx b/src/pages/Contacts.jsx
index 42869a19..c934bfed 100644
--- a/src/pages/Contacts.jsx
+++ b/src/pages/Contacts.jsx
@@ -158,7 +158,6 @@ const Contacts = () => {
                 }}
                 IconComponent={KeyboardArrowDownIcon}
               >
-                {' '}
                 <MenuItem value="Sort by:" disabled>
                   Sort by:
                 </MenuItem>