Update camera panel ui (#388)

Update camera panel up

nerfactory/viewer/app/src/index.scss

@@ -234,7 +234,7 @@ $sidebar-width: 100% !default;
   object-fit: fill;
 }
 
-$viewer_button_size: 100px;
+$viewer_button_size: 50px;
 
 .ViewerWindow-buttons {
   position: absolute;
@@ -243,11 +243,9 @@ $viewer_button_size: 100px;
   right: $SidePanel-width;
   z-index: 1000;
   width: $viewer_button_size;
-  background-color: $base-color1;
+  // background-color: $base-color1;
 }
 
 .ViewerWindow-iconbutton {
-  border: solid 1px red;
-  width: 100%;
-  height: $viewer_button_size;
+  margin-top: 5px;
 }

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

@@ -225,6 +225,7 @@ export default function CameraPanel(props) {
           value={slider_value}
           step={step_size}
           valueLabelDisplay="on"
+          valueLabelFormat={slider_value.toFixed(2)}
           marks={marks}
           min={slider_min}
           max={slider_max}
@@ -282,18 +283,35 @@ export default function CameraPanel(props) {
       </div>
       <div className="CameraList-row-time-interval">
         <TextField
-          id="outlined-number"
           label="Seconds"
-          type="number"
-          onChange={(e) => setSeconds(Math.max(1, e.target.value))}
+          inputProps={{
+            inputMode: 'numeric',
+            pattern: '[+-]?([0-9]*[.])?[0-9]+',
+          }}
+          size="small"
+          onChange={(e) => {
+            if (e.target.validity.valid) {
+              setSeconds(e.target.value);
+            }
+          }}
           value={seconds}
+          error={seconds <= 0}
+          helperText={seconds <= 0 ? 'Required' : ''}
+          variant="standard"
         />
         <TextField
-          id="outlined-number"
           label="FPS"
-          type="number"
-          onChange={(e) => setFps(Math.max(1, e.target.value))}
+          inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+          size="small"
+          onChange={(e) => {
+            if (e.target.validity.valid) {
+              setFps(e.target.value);
+            }
+          }}
           value={fps}
+          error={fps <= 0}
+          helperText={fps <= 0 ? 'Required' : ''}
+          variant="standard"
         />
       </div>
       <div className="CameraList-container">

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

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 
 import React, { useContext, useEffect, useRef } from 'react';
 
-import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
 import OpenWithIcon from '@mui/icons-material/OpenWith';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import PublicOffSharpIcon from '@mui/icons-material/PublicOffSharp';
@@ -38,33 +38,33 @@ function TransformIcons(props) {
 
   return (
     <div>
-      <Button
-        className="ViewerWindow-iconbutton"
-        onClick={() => {
-          transform_controls.setMode('translate');
-        }}
-        variant="outlined"
-      >
-        {/* translate */}
-        <OpenWithIcon />
-      </Button>
-      <Button
-        className="ViewerWindow-iconbutton"
-        onClick={() => {
-          transform_controls.setMode('rotate');
-        }}
-        variant="outlined"
-      >
-        {/* rotate */}
-        <SyncOutlinedIcon />
-      </Button>
-      <Button
-        className="ViewerWindow-iconbutton"
-        variant="outlined"
-        onClick={toggleLocal}
-      >
-        {world ? <PublicSharpIcon /> : <PublicOffSharpIcon />}
-      </Button>
+      <div className="ViewerWindow-iconbutton">
+        <IconButton
+          size="large"
+          onClick={() => {
+            transform_controls.setMode('translate');
+          }}
+        >
+          {/* translate */}
+          <OpenWithIcon />
+        </IconButton>
+      </div>
+      <div className="ViewerWindow-iconbutton">
+        <IconButton
+          size="large"
+          onClick={() => {
+            transform_controls.setMode('rotate');
+          }}
+        >
+          {/* rotate */}
+          <SyncOutlinedIcon />
+        </IconButton>
+      </div>
+      <div className="ViewerWindow-iconbutton">
+        <IconButton size="large" onClick={toggleLocal}>
+          {world ? <PublicSharpIcon /> : <PublicOffSharpIcon />}
+        </IconButton>
+      </div>
     </div>
   );
 }

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

@@ -33,12 +33,10 @@ export const appTheme = createTheme({
         },
       },
     },
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true, // No more ripple, on the whole application 💣!
-      },
-    },
     MuiButton: {
+      defaultProps: {
+        disableRipple: true,
+      },
       styleOverrides: {
         root: {
           '&.Mui-disabled': {
@@ -48,6 +46,19 @@ export const appTheme = createTheme({
         },
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: '#eeeeee',
+          backgroundColor: '#393e46',
+          '&:hover': {
+            color: '#FFD369',
+            backgroundColor: '#555555',
+          },
+        },
+      },
+    },
+
     MuiTab: {
       styleOverrides: {
         root: {
@@ -62,5 +73,27 @@ export const appTheme = createTheme({
         },
       },
     },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#393e46',
+          '&:hover': {
+            backgroundColor: '#555555',
+          },
+        },
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          '&:before': {
+            borderBottom: '2px solid #555555',
+          },
+          '&:after': {
+            borderBottom: '2px solid #FFD369',
+          },
+        },
+      },
+    },
   },
 });