From 5d21d1dda2640b7bfd74e1bd7336af20fc1cf8eb Mon Sep 17 00:00:00 2001
From: jubitjohn <jubitjohn1@gmail.com>
Date: Wed, 5 Jul 2023 12:00:38 +0530
Subject: [PATCH] Icons Added

---
 .../ShareControl/CollaboratorParticipants.tsx         | 10 +++++++---
 .../CollectionShare/ShareControl/OwnerParticipant.tsx | 11 ++++++++---
 .../ShareControl/ViewerParticipants.tsx               |  9 ++++++---
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx b/apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx
index e3e1c6b16..7693d3b8a 100644
--- a/apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx
+++ b/apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx
@@ -1,15 +1,15 @@
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 import React, { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Collection } from 'types/collection';
-import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
 import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
 import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
 // import AvatarCollectionShare from '../AvatarCollectionShare';
 // import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import MenuItemDivider from 'components/Menu/MenuItemDivider';
 import ManageAddCollab from './MangeAddCollab';
+import ModeEditIcon from '@mui/icons-material/ModeEdit';
 
 interface Iprops {
     collection: Collection;
@@ -35,7 +35,11 @@ export function CollaboratorParticipants({ collection, onRootClose }: Iprops) {
 
     return (
         <Box mb={3}>
-            <MenuSectionTitle title={t('Collaborators')} />
+            <Typography color="text.muted" variant="small" padding={1}>
+                <ModeEditIcon style={{ fontSize: 20, marginRight: 8 }} />
+                {t('Collaborators')}
+            </Typography>
+
             <MenuItemGroup>
                 {collaborators.map((item, index) => (
                     <>
diff --git a/apps/photos/src/components/Collections/CollectionShare/ShareControl/OwnerParticipant.tsx b/apps/photos/src/components/Collections/CollectionShare/ShareControl/OwnerParticipant.tsx
index f6444aaa8..d3f6e7a08 100644
--- a/apps/photos/src/components/Collections/CollectionShare/ShareControl/OwnerParticipant.tsx
+++ b/apps/photos/src/components/Collections/CollectionShare/ShareControl/OwnerParticipant.tsx
@@ -1,8 +1,7 @@
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import React from 'react';
 import { t } from 'i18next';
 import { Collection } from 'types/collection';
-import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
 import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
 import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
 import AvatarCollectionShare from '../AvatarCollectionShare';
@@ -10,6 +9,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { User } from 'types/user';
 import { LS_KEYS, getData } from 'utils/storage/localStorage';
 
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 interface Iprops {
     collection: Collection;
 }
@@ -25,7 +25,12 @@ export function OwnerParticipant({ collection }: Iprops) {
 
     return (
         <Box mb={3}>
-            <MenuSectionTitle title={t('Owner')} />
+            <Typography color="text.muted" variant="small" padding={1}>
+                <AdminPanelSettingsIcon
+                    style={{ fontSize: 20, marginRight: 8 }}
+                />
+                {t('Owner')}
+            </Typography>
 
             <MenuItemGroup>
                 <>
diff --git a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ViewerParticipants.tsx b/apps/photos/src/components/Collections/CollectionShare/ShareControl/ViewerParticipants.tsx
index 5ffcc4dfc..a7fc9409e 100644
--- a/apps/photos/src/components/Collections/CollectionShare/ShareControl/ViewerParticipants.tsx
+++ b/apps/photos/src/components/Collections/CollectionShare/ShareControl/ViewerParticipants.tsx
@@ -1,13 +1,13 @@
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Collection } from 'types/collection';
 import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
 import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
 import MenuItemDivider from 'components/Menu/MenuItemDivider';
-import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
 import AvatarCollectionShare from '../AvatarCollectionShare';
 import ManageAddViewer from './ManageAddViewer';
+import PhotoIcon from '@mui/icons-material/Photo';
 
 interface Iprops {
     collection: Collection;
@@ -30,7 +30,10 @@ export function ViewerParticipants({ collection, onRootClose }: Iprops) {
 
     return (
         <Box mb={3}>
-            <MenuSectionTitle title={t('Viewers')} />
+            <Typography color="text.muted" variant="small" padding={1}>
+                <PhotoIcon style={{ fontSize: 20, marginRight: 8 }} />
+                {t('Viewers')}
+            </Typography>
             <MenuItemGroup>
                 <>
                     {Viewers.map((item, index) => (