chore: swap xml syntax highlighter for codemirror (#61)

rectangle-factory · Jul 9, 2022 · 405f3bc · 405f3bc
1 parent 18367a0
commit 405f3bc
Show file tree

Hide file tree

Showing 16 changed files with 727 additions and 1,215 deletions.
diff --git a/packages/inspector/components/Button.tsx b/packages/inspector/components/Button.tsx
@@ -3,15 +3,15 @@ import classnames from "classnames";
 
 export function Button(props: ButtonProps) {
   const cns = classnames({
-    "bg-primary": props.primary,
-    "bg-white/20": !props.primary,
+    "bg-primary text-background": props.primary,
+    "bg-[#21262d]": !props.primary,
     "shadow-none opacity-50 pointer-events-none": props.disabled,
     "shadow-elevation-low": !props.disabled,
   });
   return (
     <button
       type="button"
-      className={`transition-opacity user-select-none px-2 py-0.5 border border-white/10 text-white rounded-lg ${cns} ${props.className}`}
+      className={`transition-opacity user-select-none px-2 py-0.5 border border-white/10 text-label rounded-lg font-medium ${cns} ${props.className}`}
       onClick={props.onClick}
     >
       {props.children}

diff --git a/packages/inspector/components/CodeMirrorTheme.ts b/packages/inspector/components/CodeMirrorTheme.ts
@@ -0,0 +1,86 @@
+import { EditorView } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { HighlightStyle } from "@codemirror/language";
+
+export const highlightDark = HighlightStyle.define([
+  { tag: tags.comment, color: "#8b949e" },
+  { tag: tags.keyword, color: "#ff7b72" },
+  { tag: tags.string, color: "#a5d6ff" },
+  { tag: tags.variableName, color: "#ffa657" },
+  { tag: tags.regexp, color: "#7ee787" },
+  { tag: tags.propertyName, color: "#d2a8ff" },
+  { tag: tags.attributeName, color: "#d2a8ff" },
+  { tag: tags.bracket, color: "#dfe1e8" },
+  { tag: tags.tagName, color: "#7ee787" },
+]);
+
+export const themeDark = EditorView.theme(
+  {
+    "&.cm-editor *": {
+      fontFamily: "Source Code Pro",
+      fontSize: "16px",
+    },
+    "&": {
+      color: "#c9d1d9",
+      backgroundColor: "transparent",
+    },
+    ".cm-selectionBackground": {
+      backgroundColor: "rgba(56,139,253,0.4)",
+    },
+    ".cm-selectionMatch": {
+      backgroundColor: "rgba(56,139,253,0.3)",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "rgba(110,118,129,0.1)",
+    },
+    ".cm-activeLine": {
+      backgroundColor: "rgba(110,118,129,0.1)",
+    },
+    ".cm-foldGutter": {
+      opacity: 0,
+      transition: "opacity 0.2s",
+    },
+    ".cm-foldGutter:hover": {
+      opacity: 100,
+    },
+    ".cm-foldPlaceholder": {
+      color: "#ff7b72",
+      fontFamily: "SF Pro",
+      fontWeight: 900,
+      backgroundColor: "transparent",
+      border: "none",
+      margin: 0,
+      padding: 0,
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      border: "none",
+    },
+    ".cm-linenumber": {
+      color: "#6e7681",
+    },
+    ".cm-cursor": {
+      borderLeft: "1px solid #a7adba",
+    },
+    "&.cm-focused .cm-matchingBracket": {
+      backgroundColor: "#328c8200",
+    },
+    "&.cm-focused": {
+      border: "0px",
+    },
+    ".cm-gutterElement span": {
+      fontFamily: "SF Pro",
+      fontWeight: 900,
+      opacity: 0.7,
+      fontSize: "12px",
+      transition: "opacity 0.2s",
+    },
+    ".cm-gutterElement span:hover": {
+      fontFamily: "SF Pro",
+      fontWeight: 900,
+      opacity: 100,
+      fontSize: "12px",
+    },
+  },
+  { dark: true }
+);
diff --git a/packages/inspector/components/HorizontalRule.tsx b/packages/inspector/components/HorizontalRule.tsx
@@ -1,5 +1,5 @@
 export function HorizontalRule(props: { className?: string }) {
-  return <div className={`w-full border-t border-t-black ${props.className}`} />;
+  return <div className={`w-full border-t border-t-border ${props.className}`} />;
 }
 
 HorizontalRule.defaultProps = {

diff --git a/packages/inspector/components/RawSVGViewer.tsx b/packages/inspector/components/RawSVGViewer.tsx
@@ -21,7 +21,7 @@ export function RawSVGViewer(props: RawSVGViewerProps) {
 
   return (
     <div
-      className={`rounded-3xl shadow-elevation-medium relative h-full w-auto bg-white/5 ${props.className}`}
+      className={`rounded-3xl shadow-elevation-medium relative h-full max-h-[54rem] w-auto bg-white/5 ${props.className}`}
     >
       <canvas
         ref={canvasRef}
@@ -44,14 +44,14 @@ export function RawSVGViewer(props: RawSVGViewerProps) {
       <div className="absolute top-0 left-0 right-0 bottom-0 rounded-3xl opacity-0 hover:opacity-100">
         <div className="absolute right-0 bottom-0 p-4 flex gap-x-2">
           <button
-            className="text-sm exclusion bg-white/10 border border-white/10 rounded-lg px-2 py-0.5 text-white"
+            className="text-sm exclusion bg-white/10 border border-white/10 rounded-lg px-2 py-0.5 text-label"
             onClick={() => downloadSVG(props.rawSVG, 'bibo' + props.tokenId)}
           >
             ↓ SVG
           </button>
 
           <button
-            className="text-sm exclusion bg-white/10 border border-white/10 rounded-lg px-2 py-0.5 text-white"
+            className="text-sm exclusion bg-white/10 border border-white/10 rounded-lg px-2 py-0.5 text-label"
             onClick={() => downloadPNG(canvasRef, props.rawSVG, 'bibo' + props.tokenId, WIDTH, HEIGHT)}
           >
             ↓ PNG

diff --git a/packages/inspector/components/ToggleButton.tsx b/packages/inspector/components/ToggleButton.tsx
@@ -4,7 +4,7 @@ export function ToggleButton(props: ButtonProps & { isOn: boolean }) {
   return (
     <button
       type="button"
-      className="px-2 py-0.5 bg-white/20 border border-white/5 text-white rounded-lg flex items-center justify-center gap-x-1.5 shadow-elevation-low "
+      className="px-2 py-0.5 bg-[#21262d] font-medium border border-white/5 text-label rounded-lg flex items-center justify-center gap-x-1.5 shadow-elevation-low "
       onClick={props.onClick}
     >
       <div

diff --git a/packages/inspector/components/Toolbar.tsx b/packages/inspector/components/Toolbar.tsx
@@ -3,7 +3,7 @@ import { GenericComponentProps } from "../types";
 export function Toolbar(props: GenericComponentProps) {
   return (
     <span
-      className={`w-full bg-white/5 flex h-14 min-h-12 items-center px-3 flex-shrink-0 gap-x-2 ${props.className}`}
+      className={`w-full bg-[#161b22] flex h-14 min-h-12 items-center px-3 flex-shrink-0 gap-x-2 ${props.className}`}
     >
       {props.children}
     </span>

diff --git a/packages/inspector/components/TraitsTable.tsx b/packages/inspector/components/TraitsTable.tsx
@@ -15,12 +15,12 @@ export const TraitsTable = ({
   const Loading = () => "loading";
   return (
     <div className="flex w-full flex-col">
-      <span className="w-full px-8 py-2 text-white font-bold bg-white/5">{name}</span>
+      <span className="w-full px-8 py-2 text-label font-bold bg-[#21262d]">{name}</span>
 
       {attributes.map(({ trait_type, value }, i) => (
-        <span className={`w-full flex ${isOdd(i) ? "bg-white/5" : "bg-white/10"}`}>
-          <span className="w-full px-8 py-1 text-white text-sm">{trait_type}</span>
-          <span className="w-full px-8 py-1 text-primary text-sm font-medium">{value}</span>
+        <span className={`w-full flex ${isOdd(i) ? "bg-[#21262d]" : "bg-[#161b22]"}`}>
+          <span className="w-full px-8 py-1 text-label text-sm">{trait_type}</span>
+          <span className="w-full px-8 py-1 text-primary text-sm">{value}</span>
         </span>
       ))}
     </div>

diff --git a/packages/inspector/components/VerticalRule.tsx b/packages/inspector/components/VerticalRule.tsx
@@ -1,5 +1,5 @@
 export function VerticalRule(props: { className?: string }) {
-  return <div className={`border-l border-l-black ${props.className}`} />;
+  return <div className={`border-l border-l-border ${props.className}`} />;
 }
 
 VerticalRule.defaultProps = {

diff --git a/packages/inspector/hooks/useSVG.tsx b/packages/inspector/hooks/useSVG.tsx
@@ -1,15 +1,15 @@
 import { useState, useEffect } from "react";
 // import babelParser from 'prettier/parser-babel'
 import htmlParser from 'prettier/parser-html'
-
 import prettier from 'prettier/standalone'
 
 const options = {
   parser: 'html', 
   plugins: [htmlParser],
   tabWidth: 2,
   semi: false,
-  singleQuote: false
+  singleQuote: false,
+  bracketSameLine: true,
 }
 
 function formatSVG(code: string) {