fix: Highlighting of combo chart column icons

visualize-admin · Oct 17, 2023 · 8251a35 · 8251a35
1 parent 9f2b0a7
commit 8251a35
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/app/icons/components/IcChartColumnLine.tsx b/app/icons/components/IcChartColumnLine.tsx
@@ -8,12 +8,21 @@ function SvgIcChartColumnLine(props: React.SVGProps<SVGSVGElement>) {
       height="1em"
       {...props}
     >
+      <filter id="greyscale">
+        <feColorMatrix
+          type="matrix"
+          values="0.3333 0.3333 0.3333 0 0
+    0.3333 0.3333 0.3333 0 0
+    0.3333 0.3333 0.3333 0 0
+    0 0 0 1 0"
+        />
+      </filter>
       <path
         d="M10.529 13.701L2.887 21 1.5 19.675l9.029-8.623 3.432 3.278 7.152-6.83L22.5 8.825l-8.539 8.154z"
-        fill="#006799"
+        fill="currentColor"
         fillRule="evenodd"
       />
-      <g fill="#757575">
+      <g fill="currentColor" filter="url(#greyscale)">
         <path d="M10.535 9.03l.867.828V6.789H7.508v5.132l2.017-1.927zM7.508 18.617v2.386H11.4v-4.449l-.866-.827zM6.376 11.523H2.453v5.216l3.923-3.747zM6.374 21v-1.312L5 21zM13.954 19l-1.01-.963-.35-.335v3.297h3.896v-4.42l-1.527 1.458zM17.625 21h3.923v-5.625h-3.787l-.136.13zM16.49 9.886V3h-3.896v8.01l1.36 1.299z" />
       </g>
     </svg>

diff --git a/app/icons/components/IcChartDualAxisLine.tsx b/app/icons/components/IcChartDualAxisLine.tsx
@@ -8,20 +8,34 @@ function SvgIcChartDualAxisLine(props: React.SVGProps<SVGSVGElement>) {
       height="1em"
       {...props}
     >
+      <filter id="grayscale">
+        <feColorMatrix
+          type="matrix"
+          values="0.3333 0.3333 0.3333 0 0
+    0.3333 0.3333 0.3333 0 0
+    0.3333 0.3333 0.3333 0 0
+    0 0 0 1 0"
+        />
+      </filter>
       <path
         d="M20.346 12.923l.078-.073-.078-.073-1.057-.99-.068-.064-.069.064-4.633 4.34-3.95-3.7-.069-.064-.068.064-1.057.99-.078.073.078.073 5.075 4.755.069.064.068-.064zM6.875 11.064l.068.064.069-.064 1.056-.99.078-.072-.078-.073-2.086-1.955-.069-.064-.068.064-2.023 1.895-.078.073.078.073 1.057.99.068.064.069-.064.897-.841z"
-        fill="#757575"
-        stroke="#757575"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth={0.2}
+        filter="url(#grayscale)"
       />
       <path
         d="M4.988 16.163l.069.064.068-.064 5.754-5.391 2.547 2.386.068.064.069-.064 6.505-6.095.078-.073-.078-.073-1.056-.99-.069-.064-.068.064-5.38 5.04-2.547-2.385-.069-.064-.068.064-6.88 6.445-.077.073.078.073z"
-        fill="#069"
-        stroke="#069"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth={0.2}
       />
-      <path d="M1 2h1.396v20H1z" fill="#069" />
-      <path d="M21.602 2h1.396v20h-1.396z" fill="#757575" />
+      <path d="M1 2h1.396v20H1z" fill="currentColor" />
+      <path
+        d="M21.602 2h1.396v20h-1.396z"
+        fill="currentColor"
+        filter="url(#grayscale)"
+      />
     </svg>
   );
 }

diff --git a/app/icons/components/IcChartMultiLine.tsx b/app/icons/components/IcChartMultiLine.tsx
@@ -8,14 +8,24 @@ function SvgIcChartMultiLine(props: React.SVGProps<SVGSVGElement>) {
       height="1em"
       {...props}
     >
+      <filter id="grayscale">
+        <feColorMatrix
+          type="matrix"
+          values="0.3333 0.3333 0.3333 0 0
+    0.3333 0.3333 0.3333 0 0
+    0.3333 0.3333 0.3333 0 0
+    0 0 0 1 0"
+        />
+      </filter>
       <g fillRule="evenodd">
         <path
           d="M23.003 12.848l-1.452-1.405-6.465 6.249-5.526-5.34-1.453 1.403 6.979 6.745zM3.785 9.574l1.416 1.368 1.453-1.404-2.869-2.772-2.781 2.688 1.453 1.404 1.328-1.284z"
-          fill="#757575"
+          fill="currentColor"
+          filter="url(#grayscale)"
         />
         <path
           d="M10.463 10.074l-8.006 7.738-1.453-1.404 9.459-9.142 3.596 3.475L21.55 3.5l1.453 1.404-8.945 8.646z"
-          fill="#006799"
+          fill="currentColor"
         />
       </g>
     </svg>