Add Box component to improve renderers performance

languages/shakespeare/renderer/character-row.tsx

@@ -1,5 +1,5 @@
+import { Box } from "../../ui-utils";
 import { CharacterValue } from "../common";
-import { SimpleTag } from "./utils";
 
 type Props = {
   name: string;
@@ -13,9 +13,9 @@ export const CharacterRow = (props: Props) => {
     <div style={{ margin: "20px 10px" }}>
       <div>
         <b style={{ marginRight: 5 }}>{name}:</b>{" "}
-        <pre style={{ display: "inline" }}>{value.value}</pre>
+        <pre style={{ display: "inline", marginRight: 15 }}>{value.value}</pre>
         {value.stack.map((v, i) => (
-          <SimpleTag key={i}>{v}</SimpleTag>
+          <Box key={i}>{v}</Box>
         ))}
       </div>
       <div></div>

languages/shakespeare/renderer/topbar.tsx

@@ -1,5 +1,6 @@
-import { Tag, Text } from "@blueprintjs/core";
-import { SimpleTag } from "./utils";
+import React from "react";
+import { Text } from "@blueprintjs/core";
+import { Box } from "../../ui-utils";
 
 const styles = {
   charChip: {
@@ -22,20 +23,16 @@ export const TopBar = (props: Props) => {
 
   const characterChips =
     charactersOnStage.length === 0 ? (
-      <Tag large minimal>
-        The stage is empty
-      </Tag>
+      <Box>The stage is empty</Box>
     ) : (
-      charactersOnStage.map((character) => {
-        return (
-          <SimpleTag
-            key={character}
-            intent={character === currSpeaker ? "active" : undefined}
-          >
-            {character}
-          </SimpleTag>
-        );
-      })
+      charactersOnStage.map((character) => (
+        <Box
+          key={character}
+          intent={character === currSpeaker ? "active" : "plain"}
+        >
+          {character}
+        </Box>
+      ))
     );
 
   return (
@@ -46,9 +43,9 @@ export const TopBar = (props: Props) => {
           <Text tagName="span" style={styles.questionText}>
             Answer to question:
           </Text>
-          <SimpleTag intent={questionState ? "success" : "danger"}>
+          <Box intent={questionState ? "success" : "danger"}>
             {questionState ? "yes" : "no"}
-          </SimpleTag>
+          </Box>
         </>
       )}
     </div>

languages/shakespeare/renderer/utils.tsx

@@ -1,60 +0,0 @@
-import { Colors } from "@blueprintjs/core";
-import { useDarkMode } from "../../../ui/providers/dark-mode-provider";
-
-const backgroundColorsLight = {
-  success: Colors.GREEN3,
-  danger: Colors.RED3,
-  plain: Colors.GRAY3,
-  active: Colors.DARK_GRAY1,
-};
-
-const backgroundColorsDark = {
-  success: Colors.GREEN3,
-  danger: Colors.RED3,
-  plain: Colors.GRAY3,
-  active: Colors.LIGHT_GRAY5,
-};
-
-const foregroundColorsLight = {
-  success: Colors.GREEN2,
-  danger: Colors.RED2,
-  plain: Colors.DARK_GRAY1,
-  active: Colors.LIGHT_GRAY5,
-};
-
-const foregroundColorsDark = {
-  success: Colors.GREEN5,
-  danger: Colors.RED5,
-  plain: Colors.LIGHT_GRAY5,
-  active: Colors.DARK_GRAY1,
-};
-
-/**
- * Utility component that renders a tag similar to BlueprintJS tags, but underneath
- * is just a single span tag with no frills and high performance.
- */
-export const SimpleTag = (props: {
-  children: React.ReactNode;
-  intent?: "success" | "danger" | "active";
-}) => {
-  const { isDark } = useDarkMode();
-  const intent = props.intent == null ? "plain" : props.intent;
-  const backgroundMap = isDark ? backgroundColorsDark : backgroundColorsLight;
-  const foregroundMap = isDark ? foregroundColorsDark : foregroundColorsLight;
-
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        margin: 5,
-        padding: "5px 10px",
-        borderRadius: 3,
-        backgroundColor:
-          backgroundMap[intent] + (intent === "active" ? "aa" : "55"),
-        color: foregroundMap[intent],
-      }}
-    >
-      {props.children}
-    </span>
-  );
-};