Update ui (#354)

nerfactory/viewer/app/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.3",
     "@reduxjs/toolkit": "^1.8.3",
     "@testing-library/jest-dom": "^5.16.4",

nerfactory/viewer/app/src/index.scss

@@ -20,13 +20,13 @@ code {
 }
 
 $base-color1: #292d39;
-$base-color2: #181c20;
-$base-color3: #373c4b;
+$base-color2: #222831;
+$base-color3: #393e46;
 $accent-color1: #db5200;
 $accent-color2: #ff8600;
-$accent-color3: #ffd65c;
+$accent-color3: #ffd369;
 $highlight-color1: #606980;
-$highlight-color2: #d1d4db;
+$highlight-color2: #eeeeee;
 $highlight-color3: #ffffff;
 
 .banner {
@@ -43,6 +43,12 @@ $highlight-color3: #ffffff;
     margin: 10px;
     float: left;
   }
+
+  .banner-logo {
+    margin: 10px;
+    margin-right: 120px;
+    float: right;
+  }
 }
 
 .App-body {
@@ -85,7 +91,7 @@ $custom-border: solid 1px $base-color1;
 }
 
 // Your variable overrides
-$sidebar-color: #b71f0b !default;
+$sidebar-color: $accent-color3 !default;
 $sidebar-width: 100% !default;
 @import '~react-pro-sidebar/dist/scss/styles.scss';
 
@@ -93,18 +99,16 @@ $sidebar-width: 100% !default;
 // Status Panel styling
 .StatusPanel {
   display: block;
+  background-color: $base-color1;
   // height: 170px;
 }
 
-.StatusPanel-title {
-  margin: 5px;
-  text-align: center;
-  font-size: 1em;
-  font-weight: bold;
+.StatusPanel .StatusPanel-button-group {
+  margin: 12px;
 }
 
-.StatusPanel .StatusPanel-button {
-  margin: 20px;
+.StatusPanel .StatusPanel-hide-scene-button {
+  margin: 12px;
 }
 
 .StatusPanel .WebSocketUrlField {
@@ -114,14 +118,18 @@ $sidebar-width: 100% !default;
 }
 
 .StatusPanel-metrics {
-  background-color: $base-color1;
+  background-color: $base-color2;
+  margin: 5px;
+  padding: 10px;
 }
 
 .StatusPanel-metrics div {
   position: relative;
-  font-size: 16px;
+  font-size: 14px;
   display: block;
   text-align: left;
+  margin-top: 3px;
+  margin-left: 5px;
 }
 
 // ------------------------------------

nerfactory/viewer/app/src/modules/Banner/Banner.jsx

@@ -4,6 +4,8 @@ import { useDispatch } from 'react-redux';
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import DescriptionRoundedIcon from '@mui/icons-material/DescriptionRounded';
 import LandingModal from '../LandingModal';
 
 function getParam(param_name) {
@@ -77,6 +79,34 @@ export default function Banner() {
       <Button className="banner-button" variant="outlined" size="small">
         Download Desktop App
       </Button>
+      <Button // button with view in ar icon
+        className="banner-button"
+        variant="outlined"
+        startIcon={<GitHubIcon />}
+        target="_blank"
+        href="https://github.com/plenoptix/nerfactory"
+        size="small"
+      >
+        Github
+      </Button>
+      <Button // button with view in ar icon
+        className="banner-button"
+        variant="outlined"
+        startIcon={<DescriptionRoundedIcon />}
+        target="_blank"
+        href="https://plenoptix-nerfactory.readthedocs-hosted.com/en/latest/"
+        size="small"
+      >
+        Documentation
+      </Button>
+
+      <div className="banner-logo">
+        <img
+          style={{ height: 30, margin: 'auto' }}
+          src="https://plenoptix-nerfactory.readthedocs-hosted.com/en/latest/_images/logo-dark.png"
+          alt="The favicon."
+        />
+      </div>
     </div>
   );
 }

nerfactory/viewer/app/src/modules/ConfigPanel/ConfigPanel.jsx

@@ -130,7 +130,6 @@ export function RenderControls() {
   };
 
   const [, setControls] = useControls(
-    'Rendering Controls',
     () => ({
       // isTraining
       'Pause Training': button(

nerfactory/viewer/app/src/modules/ConfigPanel/leva_theme.json

@@ -1,14 +1,14 @@
 {
   "colors": {
     "elevation1": "#292d39",
-    "elevation2": "#181c20",
-    "elevation3": "#373c4b",
-    "accent1": "#db5200",
-    "accent2": "#ff8600",
+    "elevation2": "#222831",
+    "elevation3": "#393E46",
+    "accent1": "#ffc640",
+    "accent2": "#FFD369",
     "accent3": "#ffd65c",
-    "highlight1": "#606980",
-    "highlight2": "#d1d4db",
-    "highlight3": "#ffffff",
+    "highlight1": "#d1d4db",
+    "highlight2": "#EEEEEE",
+    "highlight3": "#222831",
     "vivid1": "#ffcc00"
   },
   "radii": {

nerfactory/viewer/app/src/modules/LandingModal/LandingModal.jsx

@@ -34,14 +34,13 @@ export default function LandingModel(props: LandingModalProps) {
         aria-describedby="modal-modal-description"
       >
         <Box className="LandingModal-box">
-          <Typography id="modal-modal-title" component="div">
-            Welcome to the Nerfactory Viewer!{' '}
+          <center>
             <img
               style={{ height: 37, margin: 'auto' }}
-              src="/favicon.png"
+              src="https://plenoptix-nerfactory.readthedocs-hosted.com/en/latest/_images/logo-dark.png"
               alt="The favicon."
             />
-          </Typography>
+          </center>
           <Typography
             id="modal-modal-description"
             component="div"
@@ -55,25 +54,6 @@ export default function LandingModel(props: LandingModalProps) {
               </p>
               <WebSocketUrlField />
               <p>{text_2}</p>
-              <b>Other Resources:</b>
-              <Button
-                className="LandingModal-button"
-                variant="outlined"
-                href="https://github.com/plenoptix/nerfactory"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                GitHub
-              </Button>
-              <Button
-                className="LandingModal-button"
-                variant="outlined"
-                href="https://plenoptix-nerfactory.readthedocs-hosted.com/en/latest/index.html"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Documentation
-              </Button>
             </div>
           </Typography>
         </Box>

nerfactory/viewer/app/src/modules/SidePanel/SidePanel.jsx

@@ -5,12 +5,18 @@ import * as React from 'react';
 import { FaLightbulb, FaTractor } from 'react-icons/fa';
 import { Menu, MenuItem, ProSidebar, SubMenu } from 'react-pro-sidebar';
 
+import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
+import WidgetsRoundedIcon from '@mui/icons-material/WidgetsRounded';
+import CameraAltRoundedIcon from '@mui/icons-material/CameraAltRounded';
+import ReceiptLongRoundedIcon from '@mui/icons-material/ReceiptLongRounded';
+
 import Box from '@mui/material/Box';
 import { Leva } from 'leva';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import Typography from '@mui/material/Typography';
 import { useEffect } from 'react';
+import Divider from '@mui/material/Divider';
 import StatusPanel from './StatusPanel';
 import SceneNode from '../../SceneNode';
 import LevaTheme from '../ConfigPanel/leva_theme.json';
@@ -130,7 +136,7 @@ export function BasicTabs(props: BasicTabsProps) {
   return (
     <div>
       <StatusPanel sceneTree={sceneTree} />
-      <hr />
+      <Divider />
       <Box sx={{ width: '100%' }}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs
@@ -138,10 +144,26 @@ export function BasicTabs(props: BasicTabsProps) {
             onChange={handleChange}
             aria-label="basic tabs example"
           >
-            <Tab label="Controls" {...a11yProps(0)} />
-            <Tab label="Scene" {...a11yProps(1)} />
-            <Tab label="Camera Path" {...a11yProps(2)} />
-            <Tab label="Logs" {...a11yProps(3)} />
+            <Tab
+              icon={<TuneRoundedIcon />}
+              label="Controls"
+              {...a11yProps(0)}
+            />
+            <Tab
+              icon={<WidgetsRoundedIcon />}
+              label="Scene"
+              {...a11yProps(1)}
+            />
+            <Tab
+              icon={<CameraAltRoundedIcon />}
+              label="Render"
+              {...a11yProps(2)}
+            />
+            <Tab
+              icon={<ReceiptLongRoundedIcon />}
+              label="Logs"
+              {...a11yProps(3)}
+            />
           </Tabs>
         </Box>
         <TabPanel value={value} index={0}>

nerfactory/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 
 import Button from '@mui/material/Button';
+import { ButtonGroup } from '@mui/material';
 import { useSelector } from 'react-redux';
+import ViewInArIcon from '@mui/icons-material/ViewInAr';
 import WebSocketUrlField from '../../WebSocketUrlField';
 
 interface StatusPanelProps {
@@ -33,28 +35,34 @@ export default function StatusPanel(props: StatusPanelProps) {
 
   return (
     <div className="StatusPanel">
-      <div className="StatusPanel-title">Status Panel</div>
-      <Button
-        className="StatusPanel-button"
+      <ButtonGroup
+        className="StatusPanel-button-group"
         variant="contained"
-        disabled={!isWebsocketConnected}
-        style={{ textTransform: 'none' }}
+        aria-label="outlined button group"
       >
-        Websocket Connected
-      </Button>
-      <Button
-        className="StatusPanel-button"
-        variant="contained"
-        disabled={!isWebrtcConnected}
-        style={{ textTransform: 'none' }}
-      >
-        WebRTC Connected
-      </Button>
-      <Button
-        className="StatusPanel-button"
+        <Button
+          className="StatusPanel-button"
+          variant="contained"
+          disabled={!isWebsocketConnected}
+          style={{ textTransform: 'none' }}
+        >
+          Websocket Connected
+        </Button>
+        <Button
+          className="StatusPanel-button"
+          variant="contained"
+          disabled={!isWebrtcConnected}
+          style={{ textTransform: 'none' }}
+        >
+          WebRTC Connected
+        </Button>
+      </ButtonGroup>
+      <Button // button with view in ar icon
+        className="StatusPanel-hide-scene-button"
         variant="outlined"
         onClick={handleChange}
         style={{ textTransform: 'none' }}
+        startIcon={<ViewInArIcon />}
       >
         {scene_button}
       </Button>

nerfactory/viewer/app/src/modules/WebSocketUrlField.jsx

@@ -24,6 +24,7 @@ export default function WebSocketUrlField() {
       variant="outlined"
       value={websocket_url}
       onChange={websocket_url_onchange}
+      size="small"
     />
   );
 }

nerfactory/viewer/app/src/themes/theme.ts

@@ -2,11 +2,11 @@ import { createTheme } from '@mui/material/styles';
 
 export const appTheme = createTheme({
   palette: {
-    primary: { main: '#d1d4db' },
-    secondary: { main: '#ffd65c' },
+    primary: { main: '#EEEEEE' },
+    secondary: { main: '#FFD369' },
     text: {
-      primary: '#d1d4db',
-      secondary: '#ff8600',
+      primary: '#EEEEEE',
+      secondary: '#FFD369',
     },
   },
   components: {
@@ -14,25 +14,53 @@ export const appTheme = createTheme({
       styleOverrides: {
         root: {
           '& label': {
-            color: '#606980',
+            color: '#999999',
           },
           '& label.Mui-focused': {
-            color: '#ff8600',
+            color: '#FFD369',
           },
           '& .MuiOutlinedInput-root': {
             '& fieldset': {
-              borderColor: '#373c4b',
+              borderColor: '#555555',
             },
             '&:hover fieldset': {
-              borderColor: '#606980',
-              borderWidth: '0.15rem',
+              borderColor: '#dddddd',
             },
             '&.Mui-focused fieldset': {
-              borderColor: '#ff8600',
+              borderColor: '#FFD369',
             },
           },
         },
       },
     },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true, // No more ripple, on the whole application 💣!
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            color: '#999999',
+            backgroundColor: '#393e46',
+          },
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          fontSize: '.8rem',
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#555555',
+        },
+      },
+    },
   },
 });

nerfactory/viewer/app/yarn.lock

@@ -1619,6 +1619,13 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.3.tgz#e17a3cd87c7814ff35592284b19ae39ad52b85ac"
   integrity sha512-mX2S0d1oboKBbWQqWIgRmyALAEzh37yiknpD3mKx8bcoMKbp1VtqzIt0aeHP16Uhsd0eValDFILxLNHWi0oddQ==
 
+"@mui/icons-material@^5.10.3":
+  version "5.10.3"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.10.3.tgz#33bd1d973c4727ab55d02928fc8973b7f16fff55"
+  integrity sha512-o0kbUlsWCBtCE0wP33cGKbyryCh7kpm2EECYMPDmWrLhbA+HUODXIdhiTFS26szp2xXo9HY1lEx0ufeJ+tddYw==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+
 "@mui/material@^5.10.3":
   version "5.10.3"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.10.3.tgz#5497128ea7c8de1d40ba9bd95437d46d441fa1d1"