Scaffold out the UI for individual account page (#461)

* Add `AccountBalance` table for account views

* Scaffold out account UI

* Add D3 line chart scaffolding

* Style fixes

config/importmap.rb

@@ -6,3 +6,42 @@ pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin "@github/hotkey", to: "@github--hotkey.js" # @3.1.0
+
+# Custom namespace for local files
+pin "@maybe/tailwindcolors", to: "tailwindColors.js"
+
+# D3 packages
+pin "d3" # @7.8.5
+pin "d3-array" # @3.2.4
+pin "d3-axis" # @3.0.0
+pin "d3-brush" # @3.0.0
+pin "d3-chord" # @3.0.1
+pin "d3-color" # @3.1.0
+pin "d3-contour" # @4.0.2
+pin "d3-delaunay" # @6.0.4
+pin "d3-dispatch" # @3.0.1
+pin "d3-drag" # @3.0.0
+pin "d3-dsv" # @3.0.1
+pin "d3-ease" # @3.0.1
+pin "d3-fetch" # @3.0.1
+pin "d3-force" # @3.0.0
+pin "d3-format" # @3.1.0
+pin "d3-geo" # @3.1.0
+pin "d3-hierarchy" # @3.1.2
+pin "d3-interpolate" # @3.0.1
+pin "d3-path" # @3.1.0
+pin "d3-polygon" # @3.0.1
+pin "d3-quadtree" # @3.0.1
+pin "d3-random" # @3.0.1
+pin "d3-scale" # @4.0.2
+pin "d3-scale-chromatic" # @3.0.0
+pin "d3-selection" # @3.0.0
+pin "d3-shape" # @3.2.0
+pin "d3-time" # @3.1.0
+pin "d3-time-format" # @4.1.0
+pin "d3-timer" # @3.0.1
+pin "d3-transition" # @3.0.1
+pin "d3-zoom" # @3.0.0
+pin "delaunator" # @5.0.1
+pin "internmap" # @2.0.3
+pin "robust-predicates" # @3.0.2

config/tailwind.config.js

@@ -197,6 +197,18 @@ module.exports = {
       "2xl": "0px 24px 48px -12px rgba(11, 11, 11, 0.12)",
       "3xl": "0px 32px 64px -12px rgba(11, 11, 11, 0.14)",
     },
+    borderRadius: {
+      none: "0",
+      full: "9999px",
+      xs: "2px",
+      sm: "4px",
+      md: "8px",
+      DEFAULT: "8px",
+      lg: "10px",
+      xl: "12px",
+      "2xl": "16px",
+      "3xl": "24px",
+    },
     extend: {
       fontFamily: {
         display: ["Inter var", ...defaultTheme.fontFamily.sans],
@@ -205,14 +217,14 @@ module.exports = {
         "2xs": ".625rem",
       },
       keyframes: {
-        'appear-then-fade': {
-          '0%,100%': { opacity: 0 },
-          '5%,90%': { opacity: 1 },
+        "appear-then-fade": {
+          "0%,100%": { opacity: 0 },
+          "5%,90%": { opacity: 1 },
         },
-        'stroke-fill': {
-          to: { 'stroke-dashoffset': 0 },
-        }
-      }
+        "stroke-fill": {
+          to: { "stroke-dashoffset": 0 },
+        },
+      },
     },
   },
   plugins: [