From e51830f5a15438f96c752a1b02ec4cc5a73a4149 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Thu, 10 Oct 2024 16:03:51 +0100
Subject: [PATCH] fix brave software and install icons (#22815)

relates to #22756

fix to improve the brave software icon the the install icon. We use the
SVG source from figma and don't run through our optimiser. Im thinking
this may be making some of the icons jank.
---
 frontend/components/icons/Install.tsx         | 26 +++++++-----
 .../SoftwarePage/components/icons/Brave.tsx   | 41 ++++++++++---------
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/frontend/components/icons/Install.tsx b/frontend/components/icons/Install.tsx
index 778b4fdc60..d736372c74 100644
--- a/frontend/components/icons/Install.tsx
+++ b/frontend/components/icons/Install.tsx
@@ -16,21 +16,27 @@ const Install = ({
     <svg
       width={ICON_SIZES[size]}
       height={ICON_SIZES[size]}
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        clipPath="url(#a)"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        fill={COLORS[color]}
-      >
-        <path d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Zm0 2A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z" />
-        <path d="M8 3.5a1 1 0 0 1 1 1v4.865l1.36-1.133a1 1 0 1 1 1.28 1.536l-3 2.5a1 1 0 0 1-1.28 0l-3-2.5a1 1 0 1 1 1.28-1.536L7 9.365V4.5a1 1 0 0 1 1-1Z" />
+      <g clipPath="url(#clip0_798_2)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+          fill={COLORS[color]}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.00003 3.5C8.55231 3.5 9.00003 3.94772 9.00003 4.5V9.36496L10.3598 8.23178C10.7841 7.87821 11.4147 7.93554 11.7682 8.35982C12.1218 8.78409 12.0645 9.41466 11.6402 9.76822L8.64021 12.2682C8.26936 12.5773 7.73069 12.5773 7.35984 12.2682L4.35984 9.76822C3.93556 9.41466 3.87824 8.78409 4.2318 8.35982C4.58537 7.93554 5.21593 7.87821 5.64021 8.23178L7.00003 9.36496V4.5C7.00003 3.94772 7.44774 3.5 8.00003 3.5Z"
+          fill={COLORS[color]}
+        />
       </g>
       <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h16v16H0z" />
+        <clipPath id="clip0_798_2">
+          <rect width="16" height="16" fill="white" />
         </clipPath>
       </defs>
     </svg>
diff --git a/frontend/pages/SoftwarePage/components/icons/Brave.tsx b/frontend/pages/SoftwarePage/components/icons/Brave.tsx
index a75ddc94bf..242f6ed066 100644
--- a/frontend/pages/SoftwarePage/components/icons/Brave.tsx
+++ b/frontend/pages/SoftwarePage/components/icons/Brave.tsx
@@ -4,42 +4,42 @@ import type { SVGProps } from "react";
 
 const Brave = (props: SVGProps<SVGSVGElement>) => (
   <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path fill="#fff" d="M0 0h32v32H0z" />
-    <g clipPath="url(#a)">
+    <rect width="32" height="32" fill="white" />
+    <g clipPath="url(#clip0_1157_2708)">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="m26.017 9.39.593-1.458s-.755-.809-1.67-1.727c-.917-.917-2.858-.377-2.858-.377l-2.21-2.51H12.111L9.9 5.827s-1.94-.54-2.857.377c-.916.918-1.671 1.727-1.671 1.727l.593 1.458-.755 2.158s2.22 8.417 2.48 9.445c.512 2.024.862 2.806 2.317 3.832 1.456 1.025 4.097 2.806 4.528 3.076.431.27.97.73 1.456.73.485 0 1.024-.46 1.455-.73.431-.27 3.072-2.051 4.527-3.076 1.456-1.026 1.806-1.808 2.318-3.832.26-1.028 2.48-9.445 2.48-9.445l-.755-2.158Z"
-        fill="url(#b)"
+        d="M26.0171 9.38964L26.61 7.93249C26.61 7.93249 25.8554 7.12296 24.9391 6.2055C24.0227 5.28804 22.0823 5.82772 22.0823 5.82772L19.8724 3.31738H15.9915H12.1106L9.9007 5.82772C9.9007 5.82772 7.96027 5.28804 7.04395 6.2055C6.12763 7.12296 5.37302 7.93249 5.37302 7.93249L5.96593 9.38964L5.21132 11.5484C5.21132 11.5484 7.43069 19.965 7.69076 20.9928C8.20282 23.0167 8.55318 23.7992 10.0085 24.8246C11.4638 25.85 14.105 27.6309 14.5362 27.9008C14.9674 28.1706 15.5064 28.6303 15.9915 28.6303C16.4766 28.6303 17.0156 28.1706 17.4468 27.9008C17.878 27.6309 20.5192 25.85 21.9745 24.8246C23.4298 23.7992 23.7802 23.0167 24.2922 20.9928C24.5523 19.965 26.7717 11.5484 26.7717 11.5484L26.0171 9.38964Z"
+        fill="url(#paint0_linear_1157_2708)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M21.462 7.42s2.843 3.44 2.843 4.176c0 .735-.358.929-.717 1.311l-2.132 2.266c-.201.215-.62.54-.374 1.125.247.585.611 1.33.206 2.085-.405.755-1.099 1.259-1.544 1.175-.444-.083-1.489-.63-1.873-.879-.384-.25-1.6-1.255-1.6-1.64 0-.384 1.257-1.074 1.49-1.231.232-.157 1.293-.764 1.314-1.002.022-.239.014-.309-.3-.898-.312-.589-.876-1.375-.782-1.897.094-.523 1.003-.795 1.651-1.04.649-.246 1.897-.709 2.053-.78.156-.073.116-.141-.357-.186-.472-.045-1.813-.223-2.417-.055-.605.17-1.638.426-1.721.562-.084.136-.158.14-.072.61.086.47.528 2.723.571 3.123.043.4.127.665-.304.763-.43.099-1.156.27-1.405.27-.25 0-.975-.171-1.406-.27-.431-.098-.347-.363-.304-.763.043-.4.485-2.653.57-3.123.087-.47.013-.474-.07-.61-.084-.136-1.117-.393-1.722-.562-.604-.168-1.945.01-2.417.055-.473.045-.513.113-.357.185.156.072 1.404.535 2.053.78.648.246 1.557.518 1.65 1.04.095.523-.469 1.31-.782 1.898-.313.59-.32.66-.3.898.023.238 1.083.845 1.315 1.002.233.157 1.49.847 1.49 1.232 0 .384-1.216 1.39-1.6 1.639-.384.25-1.429.796-1.873.88-.445.083-1.139-.421-1.544-1.176-.405-.755-.04-1.5.206-2.085.247-.585-.173-.91-.375-1.125l-2.13-2.266c-.36-.382-.718-.576-.718-1.311 0-.736 2.843-4.176 2.843-4.176s2.398.459 2.722.459c.323 0 1.024-.27 1.67-.486.647-.216 1.079-.218 1.079-.218s.43.002 1.078.218c.646.216 1.347.486 1.67.486.324 0 2.723-.46 2.723-.46Zm-2.13 13.16c.175.11.068.319-.092.432-.16.113-2.314 1.784-2.523 1.968-.21.185-.517.49-.725.49-.21 0-.517-.305-.726-.49-.209-.184-2.363-1.855-2.523-1.968-.16-.113-.268-.321-.091-.432.176-.11.726-.388 1.486-.782.76-.393 1.706-.728 1.854-.728.147 0 1.094.335 1.854.728.76.394 1.31.672 1.485.782Z"
-        fill="#fff"
+        d="M21.4625 7.41984C21.4625 7.41984 24.305 10.8603 24.305 11.5956C24.305 12.331 23.9474 12.525 23.5879 12.9073C23.2284 13.2895 21.6582 14.959 21.4565 15.1734C21.2549 15.3878 20.8351 15.7128 21.082 16.2979C21.3289 16.883 21.6932 17.6275 21.2881 18.3826C20.883 19.1377 20.189 19.6417 19.7444 19.5584C19.2997 19.475 18.2554 18.9286 17.8713 18.679C17.4873 18.4294 16.2701 17.4243 16.2701 17.0397C16.2701 16.6552 17.5283 15.9647 17.7607 15.8078C17.9932 15.651 19.0535 15.0438 19.0752 14.8055C19.0969 14.5671 19.0886 14.4972 18.7757 13.9083C18.4628 13.3193 17.8993 12.5334 17.9931 12.0106C18.0869 11.4877 18.9957 11.2158 19.6442 10.9706C20.2926 10.7254 21.5413 10.2623 21.6972 10.1903C21.8532 10.1183 21.8129 10.0497 21.3404 10.0048C20.8679 9.95997 19.5271 9.78176 18.9226 9.95047C18.3181 10.1192 17.2854 10.3758 17.2017 10.512C17.118 10.6481 17.0443 10.6527 17.1302 11.1222C17.216 11.5917 17.6583 13.8447 17.7013 14.2448C17.7442 14.645 17.8282 14.9096 17.3973 15.0082C16.9663 15.1069 16.2408 15.2782 15.9915 15.2782C15.7422 15.2782 15.0167 15.1069 14.5858 15.0082C14.1548 14.9096 14.2388 14.645 14.2817 14.2448C14.3247 13.8447 14.7669 11.5917 14.8529 11.1222C14.9387 10.6527 14.8649 10.6481 14.7813 10.512C14.6977 10.3758 13.6649 10.1192 13.0604 9.95047C12.4559 9.78176 11.1151 9.95997 10.6426 10.0048C10.1701 10.0497 10.1298 10.1183 10.2858 10.1903C10.4418 10.2623 11.6904 10.7254 12.3388 10.9706C12.9873 11.2158 13.8961 11.4877 13.9899 12.0106C14.0837 12.5334 13.5202 13.3193 13.2073 13.9083C12.8944 14.4972 12.8861 14.5671 12.9078 14.8055C12.9295 15.0438 13.9898 15.651 14.2223 15.8078C14.4547 15.9647 15.7129 16.6552 15.7129 17.0397C15.7129 17.4243 14.4958 18.4294 14.1117 18.679C13.7277 18.9286 12.6833 19.475 12.2387 19.5584C11.794 19.6417 11.1 19.1377 10.6949 18.3826C10.2898 17.6275 10.6541 16.883 10.901 16.2979C11.1479 15.7128 10.7281 15.3878 10.5264 15.1734C10.3249 14.959 8.75462 13.2895 8.3951 12.9073C8.03558 12.525 7.67805 12.331 7.67805 11.5956C7.67805 10.8603 10.5206 7.41984 10.5206 7.41984C10.5206 7.41984 12.9192 7.87857 13.2426 7.87857C13.566 7.87857 14.2667 7.60873 14.9135 7.39285C15.5603 7.17698 15.9915 7.17542 15.9915 7.17542C15.9915 7.17542 16.4227 7.17698 17.0695 7.39285C17.7163 7.60873 18.4171 7.87857 18.7405 7.87857C19.0639 7.87857 21.4625 7.41984 21.4625 7.41984ZM19.3315 20.5804C19.5075 20.6907 19.4001 20.8986 19.2399 21.0121C19.0796 21.1255 16.9257 22.7955 16.7166 22.9801C16.5076 23.1647 16.2004 23.4696 15.9915 23.4696C15.7826 23.4696 15.4754 23.1647 15.2664 22.9801C15.0573 22.7955 12.9034 21.1255 12.7431 21.0121C12.5828 20.8986 12.4755 20.6907 12.6515 20.5804C12.8275 20.4701 13.378 20.1918 14.1376 19.7982C14.8971 19.4047 15.8438 19.0701 15.9915 19.0701C16.1392 19.0701 17.0859 19.4047 17.8455 19.7982C18.6051 20.1918 19.1555 20.4701 19.3315 20.5804Z"
+        fill="white"
       />
       <path
-        d="m22.082 5.828-2.21-2.51H12.111L9.9 5.827s-1.94-.54-2.857.377c0 0 2.587-.233 3.477 1.215 0 0 2.398.459 2.722.459.323 0 1.024-.27 1.67-.486.647-.216 1.079-.218 1.079-.218s.43.002 1.078.218c.646.216 1.347.486 1.67.486.324 0 2.723-.46 2.723-.46.889-1.447 3.476-1.213 3.476-1.213-.916-.918-2.857-.378-2.857-.378Z"
-        fill="url(#c)"
+        d="M22.0823 5.82772L19.8724 3.31738H15.9915H12.1106L9.90071 5.82772C9.90071 5.82772 7.96028 5.28804 7.04396 6.2055C7.04396 6.2055 9.6312 5.97166 10.5206 7.41979C10.5206 7.41979 12.9192 7.87852 13.2426 7.87852C13.566 7.87852 14.2667 7.60868 14.9135 7.3928C15.5603 7.17693 15.9915 7.17537 15.9915 7.17537C15.9915 7.17537 16.4227 7.17693 17.0695 7.3928C17.7163 7.60868 18.4171 7.87852 18.7405 7.87852C19.0639 7.87852 21.4625 7.41979 21.4625 7.41979C22.3518 5.97166 24.9391 6.2055 24.9391 6.2055C24.0228 5.28804 22.0823 5.82772 22.0823 5.82772Z"
+        fill="url(#paint1_linear_1157_2708)"
       />
     </g>
     <defs>
       <linearGradient
-        id="b"
-        x1="5.211"
+        id="paint0_linear_1157_2708"
+        x1="5.21132"
         y1="1286.82"
         x2="2161.25"
         y2="1286.82"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#F50" />
-        <stop offset=".41" stopColor="#F50" />
-        <stop offset=".582" stopColor="#FF2000" />
+        <stop stopColor="#FF5500" />
+        <stop offset="0.409877" stopColor="#FF5500" />
+        <stop offset="0.581981" stopColor="#FF2000" />
         <stop offset="1" stopColor="#FF2000" />
       </linearGradient>
       <linearGradient
-        id="c"
-        x1="45.49"
+        id="paint1_linear_1157_2708"
+        x1="45.4905"
         y1="234.592"
         x2="1796.55"
         y2="234.592"
@@ -48,11 +48,12 @@ const Brave = (props: SVGProps<SVGSVGElement>) => (
         <stop stopColor="#FF452A" />
         <stop offset="1" stopColor="#FF2000" />
       </linearGradient>
-      <clipPath id="a">
-        <path
-          fill="#fff"
-          transform="translate(5.2 3.317)"
-          d="M0 0h21.6v25.365H0z"
+      <clipPath id="clip0_1157_2708">
+        <rect
+          width="21.6"
+          height="25.3651"
+          fill="white"
+          transform="translate(5.2 3.31738)"
         />
       </clipPath>
     </defs>