feat: hover effect added on osm download icon

hotosm · Jan 5, 2024 · 574770a · 574770a
1 parent 80a516b
commit 574770a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>