From dfe13334e72a8a3b02cefbcfc31981b6f8144dea Mon Sep 17 00:00:00 2001
From: Matthew Tancik <tancik@berkeley.edu>
Date: Tue, 2 Aug 2022 15:49:21 -0700
Subject: [PATCH] Add leva theme (#245)

* Add leva theme

* Fix linting
---
 nerfactory/viewer/app/src/App.jsx             |  3 +
 .../src/modules/ConfigPanel/leva_theme.json   | 56 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 nerfactory/viewer/app/src/modules/ConfigPanel/leva_theme.json

diff --git a/nerfactory/viewer/app/src/App.jsx b/nerfactory/viewer/app/src/App.jsx
index 8c59f9410..887aa4054 100644
--- a/nerfactory/viewer/app/src/App.jsx
+++ b/nerfactory/viewer/app/src/App.jsx
@@ -1,8 +1,10 @@
 import './App.css';
 
 import React from 'react';
+import { Leva } from 'leva';
 import { RenderControls } from './modules/ConfigPanel/ConfigPanel';
 
+import LevaTheme from './modules/ConfigPanel/leva_theme.json';
 import SetupScene from './modules/Scene/Scene';
 import ViewerWindow from './modules/ViewerWindow/ViewerWindow';
 
@@ -11,6 +13,7 @@ export default function App() {
 
   return (
     <div className="App">
+      <Leva theme={LevaTheme} titleBar={false} />
       <RenderControls />
       <ViewerWindow scene={scene} />
     </div>
diff --git a/nerfactory/viewer/app/src/modules/ConfigPanel/leva_theme.json b/nerfactory/viewer/app/src/modules/ConfigPanel/leva_theme.json
new file mode 100644
index 000000000..175faf86d
--- /dev/null
+++ b/nerfactory/viewer/app/src/modules/ConfigPanel/leva_theme.json
@@ -0,0 +1,56 @@
+{
+  "colors": {
+    "elevation1": "#292d39",
+    "elevation2": "#181c20",
+    "elevation3": "#373c4b",
+    "accent1": "#db5200",
+    "accent2": "#ff8600",
+    "accent3": "#ffd65c",
+    "highlight1": "#606980",
+    "highlight2": "#d1d4db",
+    "highlight3": "#ffffff",
+    "vivid1": "#ffcc00"
+  },
+  "radii": {
+    "xs": "2px",
+    "sm": "4px",
+    "lg": "10px"
+  },
+  "space": {
+    "sm": "6px",
+    "md": "5px",
+    "rowGap": "6px",
+    "colGap": "7px"
+  },
+  "fontSizes": {
+    "root": "11px"
+  },
+  "sizes": {
+    "rootWidth": "310px",
+    "controlWidth": "170px",
+    "scrubberWidth": "8px",
+    "scrubberHeight": "16px",
+    "rowHeight": "24px",
+    "folderHeight": "20px",
+    "checkboxSize": "16px",
+    "joystickWidth": "100px",
+    "joystickHeight": "100px",
+    "colorPickerWidth": "160px",
+    "colorPickerHeight": "100px",
+    "monitorHeight": "60px",
+    "titleBarHeight": "39px"
+  },
+  "borderWidths": {
+    "root": "0px",
+    "input": "1px",
+    "focus": "1px",
+    "hover": "1px",
+    "active": "1px",
+    "folder": "1px"
+  },
+  "fontWeights": {
+    "label": "normal",
+    "folder": "normal",
+    "button": "normal"
+  }
+}