fix: fix icons

coingaming · Dec 17, 2020 · 48b52b6 · 48b52b6
1 parent 27e4699
commit 48b52b6
Show file tree

Hide file tree

Showing 9 changed files with 390 additions and 247 deletions.
diff --git a/packages/charts/src/ChartIcons.tsx b/packages/charts/src/ChartIcons.tsx
@@ -4,6 +4,7 @@ import TopSuppliers from './private/icons/TopSuppliersIcon';
 import Line from './private/icons/LineIcon';
 import Devices from './private/icons/DevicesIcon';
 import Time from './private/icons/TimeIcon';
+import TimeInverted from './private/icons/TimeInvertedIcon';
 import Countries from './private/icons/CountriesIcon';
 import LineChartLoading from './private/icons/LineChartLoadingIcon';
 import PieChartLoading from './private/icons/PieChartLoadingIcon';
@@ -17,6 +18,7 @@ export default {
   Line,
   Devices,
   Time,
+  TimeInverted,
   Countries,
   LineChartLoading,
   PieChartLoading,

diff --git a/packages/charts/src/TABLE_CHART.mdx b/packages/charts/src/TABLE_CHART.mdx
@@ -131,7 +131,7 @@ Data {
       <TableChart
         isActive={true}
         title="Today"
-        icon={<ChartIcons.Time />}
+        icon={<ChartIcons.TimeInverted />}
         filter={filter}
         data={data}
         hasUpdates={false}

diff --git a/packages/charts/src/private/icons/CountriesIcon.tsx b/packages/charts/src/private/icons/CountriesIcon.tsx
@@ -1,43 +1,49 @@
 import React from 'react';
 
 const CountriesIcon = () => (
-  <svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#clip0)">
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#Countries_svg__clip0)">
       <path
-        opacity=".85"
-        d="M20.225 39.909c11.03 0 19.97-8.94 19.97-19.97 0-11.029-8.94-19.97-19.97-19.97C9.197-.03.255 8.91.255 19.94s8.942 19.97 19.97 19.97z"
-        fill="url(#paint0_linear)"
+        opacity={0.85}
+        d="M20.225 39.909c11.03 0 19.97-8.94 19.97-19.97 0-11.029-8.94-19.97-19.97-19.97C9.197-.03.255 8.91.255 19.94c0 11.03 8.942 19.97 19.97 19.97z"
+        fill="url(#Countries_svg__paint0_linear)"
       />
       <path
-        opacity=".8"
-        d="M30.927 19.662l-.26 1.737a2.067 2.067 0 00.868 2.015 2.051 2.051 0 01.46 3.032l-6.002 7.113a2.05 2.05 0 01-3.405-.408l-.382-.755a2.05 2.05 0 010-1.894l.816-1.529a2.04 2.04 0 00.14-1.624l-.296-.869a2.05 2.05 0 00-1.737-1.398l-5.36-.504a2.066 2.066 0 01-1.607-1.103l-2.145-3.987a2.05 2.05 0 01.582-2.606l4.048-3.031a2.05 2.05 0 011.233-.417h4.117a2.058 2.058 0 011.564.73l1.659 1.962c.308.363.731.608 1.199.695l2.823.513a2.059 2.059 0 011.685 2.328zM12.642 8.526l1-3.84a2.059 2.059 0 00-2.954-2.336 19.978 19.978 0 00-3.761 32.54 2.058 2.058 0 003.353-2.033l-1.347-5.168a2.006 2.006 0 00-.469-.869l-5.377-5.95a2.067 2.067 0 01-.39-2.154l.816-2.05c.129-.34.344-.64.626-.869l7.817-6.236c.33-.267.569-.627.686-1.034zm10.667-6.35L22.64 4.61a2.024 2.024 0 00.443 1.91l5.68 6.41c.294.329.683.556 1.113.652l6.462 1.355a2.059 2.059 0 002.31-2.823A20.04 20.04 0 0025.916.752a2.076 2.076 0 00-2.606 1.424z"
-        fill="url(#paint1_linear)"
+        opacity={0.8}
+        d="M30.927 19.662l-.26 1.737a2.067 2.067 0 00.868 2.015 2.051 2.051 0 01.46 3.032l-6.002 7.113a2.05 2.05 0 01-3.405-.408l-.382-.755a2.05 2.05 0 010-1.894l.816-1.529a2.04 2.04 0 00.14-1.624l-.296-.869a2.05 2.05 0 00-1.737-1.398l-5.36-.504a2.066 2.066 0 01-1.607-1.103l-2.145-3.987a2.05 2.05 0 01.582-2.606l4.048-3.031a2.05 2.05 0 011.233-.417h4.117a2.058 2.058 0 011.564.73l1.659 1.962c.308.363.731.608 1.199.695l2.823.513a2.059 2.059 0 011.685 2.328zM12.642 8.526l1-3.84a2.059 2.059 0 00-2.954-2.336A19.978 19.978 0 006.927 34.89a2.058 2.058 0 003.353-2.033l-1.347-5.168a2.006 2.006 0 00-.469-.869l-5.377-5.95a2.067 2.067 0 01-.39-2.154l.816-2.05c.129-.34.344-.64.626-.869l7.817-6.236c.33-.267.569-.627.686-1.034zm10.667-6.35L22.64 4.61a2.024 2.024 0 00.443 1.91l5.68 6.41c.294.329.683.556 1.113.652l6.462 1.355a2.059 2.059 0 002.31-2.823A20.04 20.04 0 0025.916.752a2.076 2.076 0 00-2.606 1.424z"
+        fill="url(#Countries_svg__paint1_linear)"
       />
     </g>
     <defs>
       <linearGradient
-        id="paint0_linear"
-        x1="-53.211"
-        y1="-47.055"
-        x2="59.307"
-        y2="-1.544"
+        id="Countries_svg__paint0_linear"
+        x1={-53.211}
+        y1={-47.055}
+        x2={59.307}
+        y2={-1.544}
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#1757FF" stopOpacity=".7" />
-        <stop offset="1" stopColor="#1757FF" stopOpacity="0" />
+        <stop stopColor="#1757FF" stopOpacity={0.7} />
+        <stop offset={1} stopColor="#1757FF" stopOpacity={0} />
       </linearGradient>
       <linearGradient
-        id="paint1_linear"
-        x1="6.352"
-        y1="23.518"
-        x2="41.837"
-        y2="23.705"
+        id="Countries_svg__paint1_linear"
+        x1={6.352}
+        y1={23.518}
+        x2={41.837}
+        y2={23.705}
         gradientUnits="userSpaceOnUse"
       >
         <stop stopColor="#FFD60A" />
-        <stop offset="1" stopColor="#FFD60A" stopOpacity="0" />
+        <stop offset={1} stopColor="#FFD60A" stopOpacity={0} />
       </linearGradient>
-      <clipPath id="clip0">
+      <clipPath id="Countries_svg__clip0">
         <path fill="#fff" d="M0 0h40v40H0z" />
       </clipPath>
     </defs>

diff --git a/packages/charts/src/private/icons/DevicesIcon.tsx b/packages/charts/src/private/icons/DevicesIcon.tsx
@@ -1,128 +1,137 @@
 import React from 'react';
 
 const DevicesIcon = () => (
-  <svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill="url(#paint0_linear)" d="M16.308 30.216h7.385v5.538h-7.385z" />
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="url(#Devices_svg__paint0_linear)"
+      d="M16.308 30.216h7.385v5.538h-7.385z"
+    />
     <path
       d="M32.462 30.215H7.538C4.492 30.215 2 27.723 2 24.677V9.538C2 6.492 4.492 4 7.538 4h24.924C35.508 4 38 6.492 38 9.538v15.139c0 3.046-2.492 5.538-5.538 5.538z"
-      fill="url(#paint1_linear)"
+      fill="url(#Devices_svg__paint1_linear)"
     />
     <path
       d="M31.723 27.77H8.277a3.92 3.92 0 01-3.923-3.923V10.462A3.92 3.92 0 018.277 6.54h23.446a3.92 3.92 0 013.923 3.923v13.385c.046 2.123-1.754 3.923-3.923 3.923z"
-      fill="url(#paint2_linear)"
+      fill="url(#Devices_svg__paint2_linear)"
     />
     <path
       d="M8.83 13.875a2.676 2.676 0 100-5.352 2.676 2.676 0 000 5.352z"
-      fill="url(#paint3_linear)"
+      fill="url(#Devices_svg__paint3_linear)"
     />
     <path
       d="M26.57 35.754H13.43a.814.814 0 01-.815-.826v-.194c0-.437.336-.826.815-.826h13.14c.43 0 .814.34.814.826v.194c0 .438-.383.826-.815.826z"
-      fill="url(#paint4_linear)"
+      fill="url(#Devices_svg__paint4_linear)"
     />
     <path
       d="M37.954 22.462v10.846a2.314 2.314 0 01-2.308 2.308H32a2.314 2.314 0 01-2.308-2.308V22.462A2.314 2.314 0 0132 20.154h3.646a2.314 2.314 0 012.308 2.308z"
-      fill="url(#paint5_linear)"
+      fill="url(#Devices_svg__paint5_linear)"
     />
     <path
       d="M37.123 22.462v10.8c0 .877-.693 1.569-1.57 1.569h-3.461c-.877 0-1.57-.692-1.57-1.57v-10.8c0-.876.693-1.568 1.57-1.568h3.462c.876 0 1.569.692 1.569 1.569z"
-      fill="url(#paint6_linear)"
+      fill="url(#Devices_svg__paint6_linear)"
     />
     <path
       d="M34.723 22.692h-1.8a.315.315 0 01-.323-.323c0-.185.138-.323.323-.323h1.8c.184 0 .323.138.323.323-.046.185-.185.323-.323.323z"
-      fill="url(#paint7_linear)"
+      fill="url(#Devices_svg__paint7_linear)"
     />
     <defs>
       <linearGradient
-        id="paint0_linear"
-        x1="6.422"
-        y1="23.695"
-        x2="25.175"
-        y2="33.809"
+        id="Devices_svg__paint0_linear"
+        x1={6.422}
+        y1={23.695}
+        x2={25.175}
+        y2={33.809}
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#1757FF" stopOpacity=".7" />
-        <stop offset="1" stopColor="#1757FF" stopOpacity="0" />
+        <stop stopColor="#1757FF" stopOpacity={0.7} />
+        <stop offset={1} stopColor="#1757FF" stopOpacity={0} />
       </linearGradient>
       <linearGradient
-        id="paint1_linear"
-        x1="-46.194"
-        y1="-26.866"
-        x2="43.995"
-        y2="23.229"
+        id="Devices_svg__paint1_linear"
+        x1={-46.194}
+        y1={-26.866}
+        x2={43.995}
+        y2={23.229}
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#1757FF" stopOpacity=".7" />
-        <stop offset="1" stopColor="#1757FF" stopOpacity="0" />
+        <stop stopColor="#1757FF" stopOpacity={0.7} />
+        <stop offset={1} stopColor="#1757FF" stopOpacity={0} />
       </linearGradient>
       <linearGradient
-        id="paint2_linear"
-        x1="-.833"
-        y1=".227"
-        x2="3.434"
-        y2="37.864"
+        id="Devices_svg__paint2_linear"
+        x1={-0.833}
+        y1={0.227}
+        x2={3.434}
+        y2={37.864}
         gradientUnits="userSpaceOnUse"
       >
         <stop stopColor="#F1F4FC" />
-        <stop offset=".333" stopColor="#F3F6FD" stopOpacity=".7" />
-        <stop offset=".635" stopColor="#F1F4FC" stopOpacity=".6" />
-        <stop offset="1" stopColor="#F2F5FD" stopOpacity=".1" />
+        <stop offset={0.333} stopColor="#F3F6FD" stopOpacity={0.7} />
+        <stop offset={0.635} stopColor="#F1F4FC" stopOpacity={0.6} />
+        <stop offset={1} stopColor="#F2F5FD" stopOpacity={0.1} />
       </linearGradient>
       <linearGradient
-        id="paint3_linear"
-        x1="7.007"
-        y1="12.045"
-        x2="11.924"
-        y2="12.068"
+        id="Devices_svg__paint3_linear"
+        x1={7.007}
+        y1={12.045}
+        x2={11.924}
+        y2={12.068}
         gradientUnits="userSpaceOnUse"
       >
         <stop stopColor="#FFD60A" />
-        <stop offset="1" stopColor="#FFD60A" stopOpacity="0" />
+        <stop offset={1} stopColor="#FFD60A" stopOpacity={0} />
       </linearGradient>
       <linearGradient
-        id="paint4_linear"
-        x1="-7.156"
-        y1="31.735"
-        x2="-2.936"
-        y2="45.392"
+        id="Devices_svg__paint4_linear"
+        x1={-7.156}
+        y1={31.735}
+        x2={-2.936}
+        y2={45.392}
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#1757FF" stopOpacity=".7" />
-        <stop offset="1" stopColor="#1757FF" stopOpacity="0" />
+        <stop stopColor="#1757FF" stopOpacity={0.7} />
+        <stop offset={1} stopColor="#1757FF" stopOpacity={0} />
       </linearGradient>
       <linearGradient
-        id="paint5_linear"
-        x1="18.633"
-        y1="1.95"
-        x2="44.507"
-        y2="7.542"
+        id="Devices_svg__paint5_linear"
+        x1={18.633}
+        y1={1.95}
+        x2={44.507}
+        y2={7.542}
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#1757FF" stopOpacity=".7" />
-        <stop offset="1" stopColor="#1757FF" stopOpacity="0" />
+        <stop stopColor="#1757FF" stopOpacity={0.7} />
+        <stop offset={1} stopColor="#1757FF" stopOpacity={0} />
       </linearGradient>
       <linearGradient
-        id="paint6_linear"
-        x1="29.429"
-        y1="16.748"
-        x2="37.283"
-        y2="39.004"
+        id="Devices_svg__paint6_linear"
+        x1={29.429}
+        y1={16.748}
+        x2={37.283}
+        y2={39.004}
         gradientUnits="userSpaceOnUse"
       >
         <stop stopColor="#F1F4FC" />
-        <stop offset=".333" stopColor="#F3F6FD" stopOpacity=".7" />
-        <stop offset=".635" stopColor="#F1F4FC" stopOpacity=".6" />
-        <stop offset="1" stopColor="#F2F5FD" stopOpacity=".1" />
+        <stop offset={0.333} stopColor="#F3F6FD" stopOpacity={0.7} />
+        <stop offset={0.635} stopColor="#F1F4FC" stopOpacity={0.6} />
+        <stop offset={1} stopColor="#F2F5FD" stopOpacity={0.1} />
       </linearGradient>
       <linearGradient
-        id="paint7_linear"
-        x1="32.99"
-        y1="22.471"
-        x2="35.237"
-        y2="22.511"
+        id="Devices_svg__paint7_linear"
+        x1={32.99}
+        y1={22.471}
+        x2={35.237}
+        y2={22.511}
         gradientUnits="userSpaceOnUse"
       >
         <stop stopColor="#FFD60A" />
-        <stop offset="1" stopColor="#FFD60A" stopOpacity="0" />
+        <stop offset={1} stopColor="#FFD60A" stopOpacity={0} />
       </linearGradient>
     </defs>
   </svg>

diff --git a/packages/charts/src/private/icons/LineIcon.tsx b/packages/charts/src/private/icons/LineIcon.tsx
@@ -1,19 +1,25 @@
 import React from 'react';
 
 const LineIcon = () => (
-  <svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g opacity=".85">
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g opacity={0.85}>
       <path
         d="M36.804 24.783H32.16a2.053 2.053 0 010-4.105h4.645a2.053 2.053 0 010 4.105z"
-        fill="url(#paint0_linear)"
+        fill="url(#Group_7413_svg__paint0_linear)"
       />
       <path
         d="M6.822 24.783h-4.27a2.053 2.053 0 010-4.105H5.57l2.983-5.74a2.052 2.052 0 113.64 1.888l-3.55 6.842a2.053 2.053 0 01-1.82 1.115z"
         fill="#CB75F6"
       />
       <path
         d="M16.736 32.904a2.102 2.102 0 01-.835-.178 2.052 2.052 0 01-1.04-2.736l9.942-22.271a2.053 2.053 0 013.79.095l5.474 14.177a2.051 2.051 0 11-3.825 1.478l-3.708-9.579-7.93 17.79a2.052 2.052 0 01-1.868 1.224z"
-        fill="url(#paint1_linear)"
+        fill="url(#Group_7413_svg__paint1_linear)"
       />
       <path
         d="M16.736 32.904a2.052 2.052 0 01-1.868-1.252l-6.363-14.97a2.053 2.053 0 013.777-1.608l6.363 14.97a2.053 2.053 0 01-1.888 2.86h-.02z"
@@ -22,26 +28,26 @@ const LineIcon = () => (
     </g>
     <defs>
       <linearGradient
-        id="paint0_linear"
-        x1="31.504"
-        y1="24.741"
-        x2="34.041"
-        y2="19.227"
+        id="Group_7413_svg__paint0_linear"
+        x1={31.504}
+        y1={24.741}
+        x2={34.041}
+        y2={19.227}
         gradientUnits="userSpaceOnUse"
       >
         <stop stopColor="#FDBF00" />
-        <stop offset="1" stopColor="#FDBF00" stopOpacity="0" />
+        <stop offset={1} stopColor="#FDBF00" stopOpacity={0} />
       </linearGradient>
       <linearGradient
-        id="paint1_linear"
-        x1="17.794"
-        y1="23.876"
-        x2="35.776"
-        y2="23.939"
+        id="Group_7413_svg__paint1_linear"
+        x1={17.794}
+        y1={23.876}
+        x2={35.776}
+        y2={23.939}
         gradientUnits="userSpaceOnUse"
       >
         <stop stopColor="#FFD60A" />
-        <stop offset="1" stopColor="#FFD60A" stopOpacity="0" />
+        <stop offset={1} stopColor="#FFD60A" stopOpacity={0} />
       </linearGradient>
     </defs>
   </svg>