From e907bc5c719cdb41220506e32dfd8ac7fc57c643 Mon Sep 17 00:00:00 2001
From: Matthew Tancik <tancik@berkeley.edu>
Date: Tue, 6 Sep 2022 18:45:16 +0100
Subject: [PATCH] re-theme ui (#349)

---
 nerfactory/viewer/app/src/App.jsx             | 27 +++++++------
 nerfactory/viewer/app/src/index.scss          | 29 +++++++++-----
 .../app/src/modules/SidePanel/SidePanel.jsx   | 10 ++++-
 nerfactory/viewer/app/src/themes/theme.ts     | 38 +++++++++++++++++++
 4 files changed, 82 insertions(+), 22 deletions(-)
 create mode 100644 nerfactory/viewer/app/src/themes/theme.ts

diff --git a/nerfactory/viewer/app/src/App.jsx b/nerfactory/viewer/app/src/App.jsx
index 7f08e1550..d5dc4058f 100644
--- a/nerfactory/viewer/app/src/App.jsx
+++ b/nerfactory/viewer/app/src/App.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { appTheme } from './themes/theme.ts';
 import { BasicTabs } from './modules/SidePanel/SidePanel';
 import {
   SceneTreeWebSocketListener,
@@ -15,20 +17,23 @@ export default function App() {
   const sceneTree = get_scene_tree();
 
   return (
-    <div className="App">
-      {/*
+    <ThemeProvider theme={appTheme}>
+      <CssBaseline enableColorScheme />
+      <div className="App">
+        {/*
       Code that listens for websocket 'write' messages and updates the redux store.
       */}
-      <SceneTreeWebSocketListener />
-      {/* ----- */}
-      <Banner />
-      <div className="App-body">
-        <div className="SidePanel">
-          <BasicTabs sceneTree={sceneTree} />
+        <SceneTreeWebSocketListener />
+        {/* ----- */}
+        <Banner />
+        <div className="App-body">
+          <div className="SidePanel">
+            <BasicTabs sceneTree={sceneTree} />
+          </div>
+          <RenderControls />
+          <ViewerWindow scene={sceneTree.object} />
         </div>
-        <RenderControls />
-        <ViewerWindow scene={sceneTree.object} />
       </div>
-    </div>
+    </ThemeProvider>
   );
 }
diff --git a/nerfactory/viewer/app/src/index.scss b/nerfactory/viewer/app/src/index.scss
index 778d7d65d..f000aee56 100644
--- a/nerfactory/viewer/app/src/index.scss
+++ b/nerfactory/viewer/app/src/index.scss
@@ -19,7 +19,15 @@ code {
   height: 100vh;
 }
 
-$banner-color: #84c3ff4d;
+$base-color1: #292d39;
+$base-color2: #181c20;
+$base-color3: #373c4b;
+$accent-color1: #db5200;
+$accent-color2: #ff8600;
+$accent-color3: #ffd65c;
+$highlight-color1: #606980;
+$highlight-color2: #d1d4db;
+$highlight-color3: #ffffff;
 
 .banner {
   position: absolute;
@@ -29,7 +37,7 @@ $banner-color: #84c3ff4d;
   height: 50px;
   width: 100%;
   z-index: 1000;
-  background-color: $banner-color;
+  background-color: $base-color2;
 
   .banner-button {
     margin: 10px;
@@ -45,12 +53,13 @@ $banner-color: #84c3ff4d;
   bottom: 0;
 }
 
-$SidePanel-width: 500px;
-$custom-border: solid 1px #ddd;
+$SidePanel-width: 400px;
+$custom-border: solid 1px $base-color1;
 
 .SidePanel {
   position: absolute;
-  background-color: #f0f0f080;
+  background-color: $base-color2;
+  color: $highlight-color2;
   top: 0;
   width: $SidePanel-width;
   right: 0;
@@ -67,6 +76,10 @@ $custom-border: solid 1px #ddd;
   padding: 10px;
 }
 
+.simple-tabpanel-0 {
+  padding: 100px;
+}
+
 .Scene-container {
   height: 500px;
 }
@@ -101,7 +114,7 @@ $sidebar-width: 100% !default;
 }
 
 .StatusPanel-metrics {
-  background-color: $banner-color;
+  background-color: $base-color1;
 }
 
 .StatusPanel-metrics div {
@@ -117,15 +130,13 @@ $sidebar-width: 100% !default;
 //   display: block;
 // }
 
-$background-paper-color: #fff;
-
 .LandingModal-box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 400px; // 400
-  background-color: $background-paper-color;
+  background-color: $base-color2;
   border: 2px solid #000;
   //   box-shadow: 24px 24px;
   padding: 32px;
diff --git a/nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx b/nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx
index 0edfa0199..2ecd4e0d5 100644
--- a/nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx
+++ b/nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx
@@ -35,7 +35,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box sx={{ p: 3 }}>
+        <Box sx={{ p: 3, padding: 0 }}>
           <Typography component="div">{children}</Typography>
         </Box>
       )}
@@ -146,7 +146,13 @@ export function BasicTabs(props: BasicTabsProps) {
         </Box>
         <TabPanel value={value} index={0}>
           <div className="Leva-container">
-            <Leva className="Leva-panel" theme={LevaTheme} titleBar={false} />
+            <Leva
+              className="Leva-panel"
+              theme={LevaTheme}
+              titleBar={false}
+              fill
+              flat
+            />
           </div>
         </TabPanel>
         <TabPanel value={value} index={1}>
diff --git a/nerfactory/viewer/app/src/themes/theme.ts b/nerfactory/viewer/app/src/themes/theme.ts
new file mode 100644
index 000000000..15b7ff695
--- /dev/null
+++ b/nerfactory/viewer/app/src/themes/theme.ts
@@ -0,0 +1,38 @@
+import { createTheme } from '@mui/material/styles';
+
+export const appTheme = createTheme({
+  palette: {
+    primary: { main: '#d1d4db' },
+    secondary: { main: '#ffd65c' },
+    text: {
+      primary: '#d1d4db',
+      secondary: '#ff8600',
+    },
+  },
+  components: {
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& label': {
+            color: '#606980',
+          },
+          '& label.Mui-focused': {
+            color: '#ff8600',
+          },
+          '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+              borderColor: '#373c4b',
+            },
+            '&:hover fieldset': {
+              borderColor: '#606980',
+              borderWidth: '0.15rem',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: '#ff8600',
+            },
+          },
+        },
+      },
+    },
+  },
+});