use final icon for eco-responsible places

Qwant · Oct 26, 2022 · 2e417e2 · 2e417e2
1 parent f46ac66
commit 2e417e2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/public/images/leaf.svg b/public/images/leaf.svg
diff --git a/src/components/ui/MainActionButton.jsx b/src/components/ui/MainActionButton.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { capitalizeFirst } from 'src/libs/string';
 import { Flex } from '@qwant/qwant-ponents';
+import { ReactComponent as IconLeaf } from '../../../public/images/leaf.svg';
 
 const MainActionButton = ({
   variant,
@@ -13,8 +14,6 @@ const MainActionButton = ({
   ecoResponsible,
   ...rest
 }) => {
-  const extraIconClass = ecoResponsible ? 'eco-responsible-icon' : '';
-
   return (
     <button
       type="button"
@@ -29,7 +28,9 @@ const MainActionButton = ({
       {...rest}
     >
       {typeof icon === 'string' ? (
-        <div className={`mainActionButton-icon icon-${icon} ${extraIconClass}`} style={iconStyle} />
+        <div className={`mainActionButton-icon icon-${icon}`} style={iconStyle}>
+          ecoResponsible && <IconLeaf className="ecoResponsible-icon" />
+        </div>
       ) : (
         <Flex className="mainActionButton-icon" center>
           {icon}

diff --git a/src/scss/includes/components/mainActionButton.scss b/src/scss/includes/components/mainActionButton.scss
@@ -18,12 +18,12 @@
     margin-bottom: $spacing-xs;
   }
 
-  .eco-responsible-icon:after {
-    content: '🌳';
-    font-size: 20px;
+  .ecoResponsible-icon {
     position: fixed;
-    margin-top: -15px;
-    margin-left: -5px;
+    width: 20px;
+    fill: var(--green-400);
+    margin-top: -10px;
+    margin-left: -10px;
   }
 
   &:active {