Update icons for panel tabs

packages/extension/src/icons/index.tsx

@@ -21,3 +21,11 @@ export { default as CookieWhite } from './cookie-white.svg';
 export { default as File } from './file.svg';
 export { default as FileWhite } from './file-white.svg';
 export { default as Check } from './check.svg';
+export { default as AttributionIcon } from './attribution.svg';
+export { default as AttributionIconWhite } from './attribution-white.svg';
+export { default as BounceTrackingIcon } from './bounce-tracking.svg';
+export { default as BounceTrackingIconWhite } from './bounce-tracking-white.svg';
+export { default as TopicsIcon } from './topics.svg';
+export { default as TopicsIconWhite } from './topics-white.svg';
+export { default as FingerPrintingIcon } from './fingerprinting.svg';
+export { default as FingerPrintingIconWhite } from './fingerprinting-white.svg';

packages/extension/src/view/devtools/components/sidebar/index.tsx

@@ -23,8 +23,8 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import Accordion from './accordion';
-import { File, FileWhite } from '../../../../icons';
 import { useCookieStore } from '../../stateProviders/syncCookieStore';
+import MenuItem from './menuItem';
 
 interface SidebarProps {
   tabsNames: string[];
@@ -191,21 +191,11 @@ const Sidebar: React.FC<SidebarProps> = ({
                 setIsTabFocused={setIsTabFocused}
               />
             ) : (
-              <div
-                className="flex w-full items-center pl-6 py-0.5"
-                onClick={() => mainMenuTabSelector(index)}
-              >
-                <div className="h-4">
-                  {selectedIndex === index && isTabFocused ? (
-                    <FileWhite />
-                  ) : (
-                    <File />
-                  )}
-                </div>
-                <div className="block">
-                  <span className="pl-2.5">{name}</span>
-                </div>
-              </div>
+              <MenuItem
+                handleClick={() => mainMenuTabSelector(index)}
+                isActive={selectedIndex === index && isTabFocused}
+                name={name}
+              />
             )}
           </div>
         ))}