Update fire icon in Activity details

Author: jsoningram

special-pages/pages/new-tab/app/activity/components/ActivityItem.js

@@ -7,7 +7,7 @@ import { FaviconWithState } from '../../../../../shared/components/FaviconWithSt
 import { ACTION_ADD_FAVORITE, ACTION_REMOVE, ACTION_REMOVE_FAVORITE } from '../constants.js';
 import { Star, StarFilled } from '../../components/icons/Star.js';
 import { Fire } from '../../components/icons/Fire.js';
-import { Cross } from '../../components/Icons.js';
+import { Cross, FireIcon } from '../../components/Icons.js';
 import { useContext } from 'preact/hooks';
 import { memo } from 'preact/compat';
 import { useComputed } from '@preact/signals';
@@ -139,7 +139,7 @@ function Controls({ canBurn, url, title }) {
                 value={url}
                 type="button"
             >
-                {canBurn ? <Fire /> : <Cross />}
+                {canBurn ? <FireIcon /> : <Cross />}
             </button>
         </div>
     );

special-pages/pages/new-tab/app/components/Icons.js

@@ -671,3 +671,15 @@ export function Check(props) {
         </svg>
     );
 }
+
+/**
+ * From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Fire-Solid-16.svg
+ * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
+ */
+export function FireIcon(props) {
+  return (
+  <svg fill="none" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class={styles.fireIcon} {...props}>
+  <path fill="currentColor" d="M6.498.03a.63.63 0 0 1 .536.075l.074.05c.756.533 1.148 1.26 1.394 1.983.126.37.218.75.299 1.107.083.368.152.703.24 1.03l.008.026c.025.074.096.245.235.398.142.157.356.301.716.301.34 0 .537-.111.66-.222a1.05 1.05 0 0 0 .26-.385l.012-.036c.03-.094.063-.263.101-.478.018-.1.04-.221.063-.312.009-.035.03-.123.075-.208.013-.026.082-.166.242-.263a.63.63 0 0 1 .727.047l.028.023.049.046C12.6 3.575 15 5.996 15 10c0 2.516-1.796 4.569-4.16 5.477a.625.625 0 0 1-.698-.99c.395-.459.608-1.08.608-1.768 0-.565-.342-1.223-.981-1.996-.513-.62-1.139-1.225-1.77-1.846-.637.617-1.256 1.193-1.771 1.803-.63.747-.978 1.407-.978 2.039 0 .688.213 1.31.608 1.767a.625.625 0 0 1-.673 1l-.025-.009C2.796 14.57 1 12.516 1 10c0-2.22.957-3.611 2.039-4.941C4.119 3.73 5.305 2.473 6.104.4l.014-.033a.63.63 0 0 1 .38-.338Z"/>
+</svg>
+  );
+}

special-pages/pages/new-tab/app/components/Icons.module.css

@@ -28,3 +28,8 @@
     fill: white;
     fill-opacity: 0.24;
 }
+
+/* FireIcon styles */
+.fireIcon {
+    color: currentColor;
+}

special-pages/pages/new-tab/app/components/Tooltip/Tooltip.module.css

@@ -18,7 +18,7 @@
     white-space: normal;
     width: 236px;
     z-index: 1000;
-    animation: tooltipFadeIn 0.7s ease-out;
+    animation: tooltipFadeIn 300ms ease;
 
     & span {
       display: block;