Merge pull request #1220 from visualize-admin/style/update-icons

style: Update icons
visualize-admin · Oct 17, 2023 · 029a952 · 029a952 · vercel · Oct 17, 2023
2 parents 598b756 + cf45f7b
commit 029a952
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 18 deletions.
diff --git a/app/configurator/components/chart-type-selector.tsx b/app/configurator/components/chart-type-selector.tsx
@@ -225,8 +225,8 @@ const ChartTypeSelectorMenu = (props: ChartTypeSelectorMenuProps) => {
     props;
 
   return (
-    <Flex sx={{ flexDirection: "column", gap: 3 }}>
-      <Typography variant="body2" sx={{ mx: "auto", fontWeight: "bold" }}>
+    <Flex sx={{ flexDirection: "column", gap: 2 }}>
+      <Typography variant="caption" sx={{ mx: "auto", color: "grey.800" }}>
         {title}
       </Typography>
       <Box

diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
@@ -165,10 +165,11 @@ export const getIconName = (name: string): IconName => {
     case "map":
       return "chartMap";
     case "comboLineSingle":
+      return "chartMultiLine";
     case "comboLineDual":
+      return "chartDualAxisLine";
     case "comboLineColumn":
-      // FIXME: Use a proper icon.
-      return "star";
+      return "chartColumnLine";
     case "baseLayer":
       return "mapMaptype";
     case "areaLayer":

diff --git a/app/icons/components/IcChartColumnLine.tsx b/app/icons/components/IcChartColumnLine.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+function SvgIcChartColumnLine(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      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="currentColor"
+        fillRule="evenodd"
+      />
+      <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>
+  );
+}
+export default SvgIcChartColumnLine;
diff --git a/app/icons/components/IcChartDualAxisLine.tsx b/app/icons/components/IcChartDualAxisLine.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+function SvgIcChartDualAxisLine(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      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="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="currentColor"
+        stroke="currentColor"
+        strokeWidth={0.2}
+      />
+      <path d="M1 2h1.396v20H1z" fill="currentColor" />
+      <path
+        d="M21.602 2h1.396v20h-1.396z"
+        fill="currentColor"
+        filter="url(#grayscale)"
+      />
+    </svg>
+  );
+}
+export default SvgIcChartDualAxisLine;
diff --git a/app/icons/components/IcChartMultiLine.tsx b/app/icons/components/IcChartMultiLine.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+function SvgIcChartMultiLine(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      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="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="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgIcChartMultiLine;
diff --git a/app/icons/components/IcTwitter.tsx b/app/icons/components/IcTwitter.tsx
@@ -1,23 +1,18 @@
 import * as React from "react";
-
 function SvgIcTwitter(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
+      height="1em"
       viewBox="0 0 24 24"
       width="1em"
-      height="1em"
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g fill="none" fillRule="evenodd">
-        <path d="M0 0h24v24H0z" />
-        <path
-          fill="currentColor"
-          d="M22.689 5.472a9.231 9.231 0 01-2.16 2.232v.552c0 1.168-.168 2.328-.504 3.48a12.793 12.793 0 01-1.536 3.336 12.224 12.224 0 01-2.472 2.808c-.96.8-2.112 1.456-3.456 1.968-1.344.512-2.792.752-4.344.72-2.416 0-4.624-.648-6.624-1.944.304.048.648.072 1.032.072 2.016 0 3.808-.616 5.376-1.848a4.39 4.39 0 01-2.52-.864 4.226 4.226 0 01-1.536-2.136c.304.032.576.048.816.048.384 0 .768-.048 1.152-.144a4.297 4.297 0 01-2.496-1.488c-.656-.784-.984-1.704-.984-2.76v-.048a4.43 4.43 0 001.968.552 4.493 4.493 0 01-1.416-1.536 4.128 4.128 0 01-.528-2.064c0-.784.2-1.512.6-2.184a12.495 12.495 0 003.936 3.192c1.536.8 3.2 1.24 4.992 1.32a4.24 4.24 0 01-.12-.984c0-1.2.424-2.216 1.272-3.048.848-.832 1.864-1.256 3.048-1.272 1.264 0 2.32.456 3.168 1.368a8.384 8.384 0 002.736-1.056c-.32 1.024-.952 1.824-1.896 2.4a9.053 9.053 0 002.496-.672z"
-        />
-      </g>
+      <path
+        d="M4.039 4.5l6.177 8.273L4 19.5h1.4l5.442-5.89 4.397 5.89H20l-6.525-8.739L19.26 4.5h-1.4L12.85 9.924 8.8 4.5zm2.057 1.032h2.188l9.658 12.936h-2.187z"
+        fill="#1c2834"
+      />
     </svg>
   );
 }
-
 export default SvgIcTwitter;
diff --git a/app/icons/components/index.tsx b/app/icons/components/index.tsx
@@ -18,8 +18,11 @@ import { default as Categories } from "@/icons/components/IcCategories";
 import { default as ChartArea } from "@/icons/components/IcChartArea";
 import { default as ChartBar } from "@/icons/components/IcChartBar";
 import { default as ChartColumn } from "@/icons/components/IcChartColumn";
+import { default as ChartColumnLine } from "@/icons/components/IcChartColumnLine";
+import { default as ChartDualAxisLine } from "@/icons/components/IcChartDualAxisLine";
 import { default as ChartLine } from "@/icons/components/IcChartLine";
 import { default as ChartMap } from "@/icons/components/IcChartMap";
+import { default as ChartMultiLine } from "@/icons/components/IcChartMultiLine";
 import { default as ChartPie } from "@/icons/components/IcChartPie";
 import { default as ChartScatterplot } from "@/icons/components/IcChartScatterplot";
 import { default as Check } from "@/icons/components/IcCheck";
@@ -49,6 +52,7 @@ import { default as Dragndrop } from "@/icons/components/IcDragndrop";
 import { default as Edit } from "@/icons/components/IcEdit";
 import { default as Embed } from "@/icons/components/IcEmbed";
 import { default as Excel } from "@/icons/components/IcExcel";
+import { default as Exclamation } from "@/icons/components/IcExclamation";
 import { default as Eye } from "@/icons/components/IcEye";
 import { default as Facebook } from "@/icons/components/IcFacebook";
 import { default as Feed } from "@/icons/components/IcFeed";
@@ -156,9 +160,12 @@ export const Icons = {
   categories: Categories,
   chartArea: ChartArea,
   chartBar: ChartBar,
+  chartColumnLine: ChartColumnLine,
   chartColumn: ChartColumn,
+  chartDualAxisLine: ChartDualAxisLine,
   chartLine: ChartLine,
   chartMap: ChartMap,
+  chartMultiLine: ChartMultiLine,
   chartPie: ChartPie,
   chartScatterplot: ChartScatterplot,
   check: Check,
@@ -188,6 +195,7 @@ export const Icons = {
   edit: Edit,
   embed: Embed,
   excel: Excel,
+  exclamation: Exclamation,
   eye: Eye,
   facebook: Facebook,
   feed: Feed,

diff --git a/app/icons/index.tsx b/app/icons/index.tsx
@@ -51,11 +51,12 @@ export const getChartIcon = (chartType: ChartType): IconName => {
       return "chartScatterplot";
     case "table":
       return "table";
-    // FIXME: use proper icons
     case "comboLineSingle":
+      return "chartMultiLine";
     case "comboLineDual":
+      return "chartDualAxisLine";
     case "comboLineColumn":
-      return "star";
+      return "chartColumnLine";
     default:
       const _exhaustiveCheck: never = chartType;
       return _exhaustiveCheck;

diff --git a/app/icons/svg/ic_chart-column-line.svg b/app/icons/svg/ic_chart-column-line.svg
diff --git a/app/icons/svg/ic_chart-dual-axis-line.svg b/app/icons/svg/ic_chart-dual-axis-line.svg
diff --git a/app/icons/svg/ic_chart-multi-line.svg b/app/icons/svg/ic_chart-multi-line.svg
diff --git a/app/icons/svg/ic_twitter.svg b/app/icons/svg/ic_twitter.svg