From 1b9743fa434b5ea0e7d8bf527808f458d7c19055 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Wed, 15 Mar 2023 16:45:50 +0000
Subject: [PATCH] Changed icon colour of community settings icon - Added
 default colour to icon prop

---
 src/components/Community/Header.tsx |  1 +
 src/components/atoms/Icon.tsx       | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Community/Header.tsx b/src/components/Community/Header.tsx
index 52f7937..f6bddc7 100644
--- a/src/components/Community/Header.tsx
+++ b/src/components/Community/Header.tsx
@@ -183,6 +183,7 @@ export const CommunitySettings: React.FC<CommunitySettingsProps> = ({
             icon={FiSettings}
             fontSize={20}
             onClick={() => setCommunitySettingsModalOpen(true)}
+            iconColor="gray.500"
           />
         </>
       )}
diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx
index b82c741..169edcf 100644
--- a/src/components/atoms/Icon.tsx
+++ b/src/components/atoms/Icon.tsx
@@ -12,6 +12,7 @@ type IconProps = {
   icon: IconType;
   fontSize: number;
   onClick?: () => void;
+  iconColor?: string;
 };
 
 /**
@@ -23,7 +24,12 @@ type IconProps = {
  *
  * @returns {React.FC<IconProps>} - Icon with a hover effect
  */
-const IconItem: React.FC<IconProps> = ({ icon, fontSize, onClick }) => {
+const IconItem: React.FC<IconProps> = ({
+  icon,
+  fontSize,
+  onClick,
+  iconColor = "black",
+}) => {
   return (
     <Flex
       mr={1.5}
@@ -36,7 +42,7 @@ const IconItem: React.FC<IconProps> = ({ icon, fontSize, onClick }) => {
       }}
       onClick={onClick}
     >
-      <Icon as={icon} fontSize={fontSize} />
+      <Icon as={icon} fontSize={fontSize} color={iconColor} />
     </Flex>
   );
 };