From 574770a85d60e53ec7a0868c82ee70b4e3aa22db Mon Sep 17 00:00:00 2001
From: Deepak Pradhan <deepak.pradhan048@gmail.com>
Date: Fri, 5 Jan 2024 10:42:27 +0545
Subject: [PATCH] feat: hover effect added on osm download icon

---
 frontend/src/assets/styles/index.scss                    | 5 +++++
 frontend/src/components/projectDetail/downloadOsmData.js | 8 ++------
 frontend/src/components/svgIcons/download.js             | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/assets/styles/index.scss b/frontend/src/assets/styles/index.scss
index e582f8c119..fa5ce80aa6 100644
--- a/frontend/src/assets/styles/index.scss
+++ b/frontend/src/assets/styles/index.scss
@@ -20,3 +20,8 @@
 .fade-in.active {
   opacity: 1;
 }
+
+.categorycard:hover > svg *,
+.categorycard:hover {
+  fill: #d73f3f;
+}
diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js
index 24779a9484..33d308bba1 100644
--- a/frontend/src/components/projectDetail/downloadOsmData.js
+++ b/frontend/src/components/projectDetail/downloadOsmData.js
@@ -210,14 +210,10 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {
                         typ,
                       )
                     }
-                    className="flex flex-row items-center pointer link hover-red color-inherit"
+                    className="flex flex-row items-center pointer link hover-red color-inherit categorycard"
                     style={{ gap: '10px' }}
                   >
-                    <DownloadIcon
-                      style={{ height: '28px' }}
-                      color="#D73F3F"
-                      className="link hover-red"
-                    />
+                    <DownloadIcon style={{ height: '28px' }} color="#D73F3F" />
                     <p className="ttc">{typ}</p>
                   </span>
                 ))}
diff --git a/frontend/src/components/svgIcons/download.js b/frontend/src/components/svgIcons/download.js
index bf33896801..61d0399042 100644
--- a/frontend/src/components/svgIcons/download.js
+++ b/frontend/src/components/svgIcons/download.js
@@ -8,11 +8,11 @@ export class DownloadIcon extends React.PureComponent {
         height="16"
         width="16"
         viewBox="0 0 512 512"
+        fill="#000"
         {...this.props}
       >
         <path
           opacity="1"
-          fill="#1E3050"
           d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"
         />
       </svg>