Tweak trend charts static viz look (#37869)

* Use ASCII arrow characters instead of SVG icons

* Increase comparison text font size

frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.tsx

@@ -8,7 +8,6 @@ import {
   CHANGE_TYPE_OPTIONS,
 } from "metabase/visualizations/visualizations/SmartScalar/compute";
 import { formatChange } from "metabase/visualizations/visualizations/SmartScalar/utils";
-import { ArrowDown, ArrowUp } from "./icons";
 import { computeSmartScalarSettings } from "./settings";
 
 export function SmartScalar({
@@ -89,22 +88,21 @@ function Comparison({ comparison, renderingContext }: ComparisonProps) {
       ? formatChange(comparison.percentChange)
       : comparison.display.percentChange;
 
-  let Icon: typeof ArrowUp | null = null;
+  let icon: string | null = null;
 
   if (comparison.changeArrowIconName === "arrow_up") {
-    Icon = ArrowUp;
+    icon = "↑";
   } else if (comparison.changeArrowIconName === "arrow_down") {
-    Icon = ArrowDown;
+    icon = "↓";
   }
 
   const styles: Record<string, CSSProperties> = {
     root: {
-      fontSize: "12px",
+      fontSize: "14px",
     },
     icon: {
-      width: "12px",
-      height: "12px",
-      fill: comparison.changeColor,
+      fontSize: "14px",
+      color: comparison.changeColor,
       marginRight: "6px",
     },
     percentChange: {
@@ -128,7 +126,7 @@ function Comparison({ comparison, renderingContext }: ComparisonProps) {
 
   return (
     <span style={styles.root}>
-      {!!Icon && <Icon style={styles.icon} />}
+      {!!icon && <span style={styles.icon}>{icon}</span>}
       <span>
         <span style={styles.percentChange}>{changeDisplayValue}</span>
         <span style={styles.separator}> • </span>

frontend/src/metabase/static-viz/components/SmartScalar/icons.tsx

-import type { SVGProps } from "react";
-
-export function ArrowUp(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      fill="currentcolor"
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-    >
-      <path d="M13.47 8.53a.75.75 0 1 0 1.06-1.06l-6-6a.748.748 0 0 0-1.06 0l-6 6a.75.75 0 0 0 1.06 1.06l4.72-4.72V14a.75.75 0 0 0 1.5 0V3.81l4.72 4.72z" />
-    </svg>
-  );
-}
-
-export function ArrowDown(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      fill="currentcolor"
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-    >
-      <path
-        clipRule="evenodd"
-        fillRule="evenodd"
-        d="M8 1.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V2A.75.75 0 0 1 8 1.25z"
-      />
-      <path
-        clipRule="evenodd"
-        fillRule="evenodd"
-        d="M1.47 7.47a.75.75 0 0 1 1.06 0L8 12.94l5.47-5.47a.75.75 0 1 1 1.06 1.06l-6 6a.75.75 0 0 1-1.06 0l-6-6a.75.75 0 0 1 0-1.06z"
-      />
-    </svg>
-  );
-}