update

src/features/user/profile/components/ContactOptions.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
+import { List } from "@material-ui/core";
 import ContactOption from "./ContactOption";
 import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
 import EmailIcon from "@material-ui/icons/Email";
@@ -80,7 +81,7 @@ const handleEmailSending = email => event => {
   event.preventDefault();
 };
 
-const ContactOptions = ({ contactOptions, userName }) => {
+const ContactOptions = ({ contactOptions, userName, profilePictureItem }) => {
   const { t } = useTranslation();
   const { copy } = useClipboard();
 
@@ -125,7 +126,7 @@ const ContactOptions = ({ contactOptions, userName }) => {
   );
 
   return (
-    <>
+    <List>
       {sorted.map((z, index) => (
         <ContactOption
           key={`contact_${index}`}
@@ -136,13 +137,15 @@ const ContactOptions = ({ contactOptions, userName }) => {
           onClick={z.onClick}
         />
       ))}
-    </>
+      {profilePictureItem && <>{profilePictureItem}</>}
+    </List>
   );
 };
 
 ContactOptions.propTypes = {
   contactOptions: PropTypes.array,
-  userName: PropTypes.object.isRequired
+  userName: PropTypes.string.isRequired,
+  profilePictureItem: PropTypes.node
 };
 
 export default ContactOptions;

src/features/user/profile/components/UserProfileCardContent.js

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import {
   Grid,
-  List,
   ListItem,
   ListItemText,
   ListItemIcon,
@@ -33,16 +32,19 @@ const UserProfileCardContent = ({ userData }) => {
       <UserProfilePicture pictureUrl={userData.profilePictureUrl} />
       <Grid container spacing={2}>
         <Grid item xs={12} sm={6}>
-          <List>
           <ContactOptions
             contactOptions={userData.contactOptions}
             userName={userName}
-            />
+            profilePictureItem={
+              <>
                 {profilePictureUrl && (
                   <ListItem dense>
                     <ListItemIcon>
                       <Tooltip title={t("Generic.Copy")}>
-                    <IconButton size="small" onClick={copy(profilePictureUrl)}>
+                        <IconButton
+                          size="small"
+                          onClick={copy(profilePictureUrl)}
+                        >
                           <FileCopyOutlined />
                         </IconButton>
                       </Tooltip>
@@ -58,7 +60,9 @@ const UserProfileCardContent = ({ userData }) => {
                     />
                   </ListItem>
                 )}
-          </List>
+              </>
+            }
+          />
         </Grid>
       </Grid>
     </div>