hello-robot · hello-amal · Aug 2, 2024 · Aug 2, 2024 · Aug 2, 2024 · Aug 2, 2024
diff --git a/package.json b/package.json
@@ -3,6 +3,10 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@emotion/react": "^11.13.0",
+        "@emotion/styled": "^11.13.0",
+        "@mui/icons-material": "^5.16.6",
+        "@mui/material": "^5.16.6",
         "@types/createjs": "^0.0.29",
         "@types/react": "^18.0.34",
         "@types/react-dom": "^18.0.11",

diff --git a/src/pages/operator/css/CameraView.css b/src/pages/operator/css/CameraView.css
@@ -157,11 +157,12 @@
     padding: 0px;
 }
 
-.realsense-pan-tilt-grid button .material-icons {
+.realsense-pan-tilt-grid .panTiltIcon {
     margin: 0;
     font-size: xxx-large;
-    background-color: whitesmoke;
+    fill: whitesmoke;
     opacity: 40%;
+    background-color: black;
     border-radius: 60px;
 }
 

diff --git a/src/pages/operator/html/index.html b/src/pages/operator/html/index.html
@@ -6,11 +6,6 @@
             content="width=device-width, initial-scale=1, minimum-scale=1"
         />
         <title>Stretch Web Interface</title>
-        <!-- include Google icons -->
-        <link
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
-            rel="stylesheet"
-        />
     </head>
     <body>
         <div id="root">

diff --git a/src/pages/operator/tsx/basic_components/AccordionSelect.tsx b/src/pages/operator/tsx/basic_components/AccordionSelect.tsx
@@ -1,6 +1,8 @@
 import React, { useRef, useState } from "react";
 import "operator/css/basic_components.css";
 import { className } from "shared/util";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
 export const AccordionSelect = <T extends string | JSX.Element>(props: {
     title: string;
@@ -46,7 +48,7 @@ export const AccordionSelect = <T extends string | JSX.Element>(props: {
                 style={{ backgroundColor: props.backgroundColor }}
             >
                 {props.title}
-                <span className="material-icons">expand_more</span>
+                {active ? <ExpandLessIcon /> : <ExpandMoreIcon />}
             </button>
             <div
                 ref={content}

diff --git a/src/pages/operator/tsx/basic_components/CheckToggleButton.tsx b/src/pages/operator/tsx/basic_components/CheckToggleButton.tsx
@@ -2,6 +2,8 @@ import { className } from "shared/util";
 import "operator/css/basic_components.css";
 import { isMobile } from "react-device-detect";
 import React from "react";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
 
 /**
  * Properties for {@link CheckToggleButton}
@@ -28,7 +30,7 @@ type CheckToggleButtonProps = {
  */
 export const CheckToggleButton = (props: CheckToggleButtonProps) => {
     const { checked } = props;
-    const icon = checked ? "check_box" : "check_box_outline_blank";
+    const icon = checked ? <CheckBoxIcon /> : <CheckBoxOutlineBlankIcon />;
     return (
         <button
             className={className(

diff --git a/src/pages/operator/tsx/basic_components/Dropdown.tsx b/src/pages/operator/tsx/basic_components/Dropdown.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { className } from "shared/util";
 import "operator/css/basic_components.css";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 export const Dropdown = <T extends string | JSX.Element>(props: {
     onChange: (selectedIndex: number) => void;
@@ -78,7 +79,7 @@ export const Dropdown = <T extends string | JSX.Element>(props: {
                 {props.selectedIndex === undefined
                     ? props.placeholderText
                     : props.possibleOptions[props.selectedIndex]}
-                <span className="material-icons">expand_more</span>
+                <ExpandMoreIcon />
             </button>
             <div
                 hidden={!showDropdown}

diff --git a/src/pages/operator/tsx/basic_components/DropdownInput.tsx b/src/pages/operator/tsx/basic_components/DropdownInput.tsx
@@ -3,6 +3,7 @@ import { className } from "shared/util";
 import "operator/css/basic_components.css";
 import e from "express";
 import { text } from "stream/consumers";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 export const DropdownInput = <T extends string>(props: {
     text: string;
@@ -114,7 +115,7 @@ export const DropdownInput = <T extends string>(props: {
                     setShowDropdown(!showDropdown);
                 }}
             >
-                <span className="material-icons">expand_more</span>
+                <ExpandMoreIcon />
             </button>
             <div
                 hidden={!showDropdown}

diff --git a/src/pages/operator/tsx/layout_components/CameraView.tsx b/src/pages/operator/tsx/layout_components/CameraView.tsx
@@ -46,6 +46,10 @@ import {
 import { CheckToggleButton } from "../basic_components/CheckToggleButton";
 import { AccordionSelect } from "../basic_components/AccordionSelect";
 import "operator/css/CameraView.css";
+import AddIcon from "@mui/icons-material/Add";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import CancelIcon from "@mui/icons-material/Cancel";
+import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
 
 /**
  * Displays a video stream with an optional button pad overlay
@@ -308,14 +312,14 @@ export const CameraView = (props: CustomizableComponentProps) => {
             {overlayContainer}
             {selectObjectScaledXY ? (
                 <span
-                    className="realsense material-icons"
+                    className="realsense"
                     style={{
                         left: (selectObjectScaledXY[0] * 100).toString() + "%",
                         top: (selectObjectScaledXY[1] * 100).toString() + "%",
                         fontSize: selectObjectFontSize,
                     }}
                 >
-                    add
+                    <AddIcon />
                 </span>
             ) : undefined}
         </div>
@@ -386,12 +390,10 @@ const PanTiltButton = (props: { direction: ButtonPadButton }) => {
             onMouseUp={functs.onRelease}
             onMouseLeave={functs.onLeave}
         >
-            <span
-                className="material-icons"
+            <PlayCircleFilledIcon
+                className="panTiltIcon"
                 style={{ transform: `rotate(${rotation}deg)` }}
-            >
-                arrow_right
-            </span>
+            />
         </button>
     );
 };
@@ -433,7 +435,7 @@ const PanTiltButtonOverlay = (props: { direction: ButtonPadButton }) => {
         >
             {/* <img height={100} width={100} src={getIcon(props.direction)} className={ButtonState.Inactive} /> */}
             <span
-                className="material-icons icon"
+                className="icon"
                 style={{ transform: `rotate(${rotation}deg)` }}
             >
                 arrow_right
@@ -901,7 +903,7 @@ const UnderRealsenseButtons = (props: {
                         }}
                     >
                         <span>Cancel</span>
-                        <span className="material-icons">cancel</span>
+                        <CancelIcon />
                     </button>
                 ) : (
                     <AccordionSelect

diff --git a/src/pages/operator/tsx/layout_components/DropZone.tsx b/src/pages/operator/tsx/layout_components/DropZone.tsx
@@ -11,6 +11,7 @@ import { SharedState } from "./CustomizableComponent";
 import { className } from "shared/util";
 import { PopupModal } from "../basic_components/PopupModal";
 import "operator/css/DropZone.css";
+import PushPinIcon from "@mui/icons-material/PushPin";
 
 /** State required for drop zones */
 export type DropZoneState = {
@@ -149,15 +150,15 @@ export const DropZone = (props: DropZoneProps) => {
     return (
         <React.Fragment>
             <span
-                className={className("drop-zone material-icons", {
+                className={className("drop-zone", {
                     tab: inTab,
                     overlay,
                     standard,
                 })}
                 hidden={!isActive}
                 onClick={handleClick}
             >
-                save_alt
+                <PushPinIcon />
             </span>
             <NewPanelModal
                 show={showNewPanelModal}

diff --git a/src/pages/operator/tsx/layout_components/MovementRecorder.tsx b/src/pages/operator/tsx/layout_components/MovementRecorder.tsx
@@ -7,6 +7,10 @@ import "operator/css/MovementRecorder.css";
 import "operator/css/basic_components.css";
 import { isMobile } from "react-device-detect";
 import { RadioFunctions, RadioGroup } from "../basic_components/RadioGroup";
+import PlayCircle from "@mui/icons-material/PlayCircle";
+import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import SaveIcon from "@mui/icons-material/Save";
 
 /** All the possible button functions */
 export enum MovementRecorderFunction {
@@ -159,7 +163,7 @@ export const MovementRecorder = (props: {
                         }}
                     >
                         <span hidden={props.hideLabels}>Play</span>
-                        <span className="material-icons">play_circle</span>
+                        <PlayCircle />
                     </button>
                 </Tooltip>
                 <Tooltip
@@ -184,11 +188,9 @@ export const MovementRecorder = (props: {
                             <i hidden={props.hideLabels}>Save</i>
                         )}
                         {!isRecording ? (
-                            <span className="material-icons">
-                                radio_button_checked
-                            </span>
+                            <RadioButtonCheckedIcon />
                         ) : (
-                            <span className="material-icons">save</span>
+                            <SaveIcon />
                         )}
                     </button>
                 </Tooltip>
@@ -204,7 +206,7 @@ export const MovementRecorder = (props: {
                         }}
                     >
                         <span hidden={props.hideLabels}>Delete</span>
-                        <span className="material-icons">delete_forever</span>
+                        <DeleteForeverIcon />
                     </button>
                 </Tooltip>
             </div>
@@ -243,7 +245,7 @@ export const MovementRecorder = (props: {
                         }
                     }}
                 >
-                    <span className="material-icons">play_circle</span>
+                    <PlayCircle />
                     <i>Play</i>
                 </div>
             </div>

diff --git a/src/pages/operator/tsx/layout_components/Panel.tsx b/src/pages/operator/tsx/layout_components/Panel.tsx
@@ -14,6 +14,7 @@ import {
     isSelected,
 } from "./CustomizableComponent";
 import "operator/css/Panel.css";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
 
 /*
 TODO:
@@ -189,10 +190,10 @@ export const Panel = (props: CustomizableComponentProps) => {
                     // In customization mode show an extra plus to add a new tab
                     props.sharedState.customizing ? (
                         <button
-                            className="tab-button add-tab material-icons"
+                            className="tab-button add-tab"
                             onClick={() => setShowTabModal(true)}
                         >
-                            add_circle
+                            <AddCircleIcon />
                         </button>
                     ) : undefined
                 }

diff --git a/src/pages/operator/tsx/layout_components/TextToSpeech.tsx b/src/pages/operator/tsx/layout_components/TextToSpeech.tsx
@@ -5,6 +5,10 @@ import { Tooltip } from "../static_components/Tooltip";
 import "operator/css/TextToSpeech.css";
 import "operator/css/basic_components.css";
 import { isMobile } from "react-device-detect";
+import PlayCircleIcon from "@mui/icons-material/PlayCircle";
+import StopCircleIcon from "@mui/icons-material/StopCircle";
+import SaveIcon from "@mui/icons-material/Save";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 
 /** All the possible button functions */
 export enum TextToSpeechFunction {
@@ -73,7 +77,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => {
                         }}
                     >
                         <span hidden={props.hideLabels}>Play</span>
-                        <span className="material-icons">play_circle</span>
+                        <PlayCircleIcon />
                     </button>
                 </Tooltip>
                 {/* Stop the playing text */}
@@ -85,7 +89,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => {
                         }}
                     >
                         <span hidden={props.hideLabels}>Stop</span>
-                        <span className="material-icons">stop_circle</span>
+                        <StopCircleIcon />
                     </button>
                 </Tooltip>
                 {/* If we are on saved text, then we show a delete button, else a save button. */}
@@ -102,9 +106,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => {
                             }}
                         >
                             <span hidden={props.hideLabels}>Delete</span>
-                            <span className="material-icons">
-                                delete_forever
-                            </span>
+                            <DeleteForeverIcon />
                         </button>
                     </Tooltip>
                 ) : (
@@ -117,7 +119,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => {
                             }}
                         >
                             <i hidden={props.hideLabels}>Save</i>
-                            <span className="material-icons">save</span>
+                            <SaveIcon />
                         </button>
                     </Tooltip>
                 )}

diff --git a/src/pages/operator/tsx/static_components/AudioControl.tsx b/src/pages/operator/tsx/static_components/AudioControl.tsx
@@ -1,6 +1,8 @@
 import "operator/css/AudioControl.css";
 import { className, RemoteStream } from "shared/util";
 import React from "react";
+import VolumeOffIcon from "@mui/icons-material/VolumeOff";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 
 /**Props for {@link AudioControl} */
 type AudioControlProps = {
@@ -49,11 +51,7 @@ export const AudioControl = (props: AudioControlProps) => {
                 Robot audio playback is not supported on this browser
             </audio>
             <button className="button audioControlButton" onClick={toggleMute}>
-                {muted ? (
-                    <span className="material-icons">volume_off</span>
-                ) : (
-                    <span className="material-icons">volume_up</span>
-                )}
+                {muted ? <VolumeOffIcon /> : <VolumeUpIcon />}
             </button>
         </div>
     );

diff --git a/src/pages/operator/tsx/static_components/CustomizeButton.tsx b/src/pages/operator/tsx/static_components/CustomizeButton.tsx
@@ -1,4 +1,6 @@
 import "operator/css/CustomizeButton.css";
+import CheckIcon from "@mui/icons-material/Check";
+import BuildIcon from "@mui/icons-material/Build";
 
 type CustomizeButtonProps = {
     /** If the interface is in customization mode */
@@ -9,7 +11,7 @@ type CustomizeButtonProps = {
 
 /** Button to toggle customization mode. */
 export const CustomizeButton = (props: CustomizeButtonProps) => {
-    const icon = props.customizing ? "check" : "build";
+    const icon = props.customizing ? <CheckIcon /> : <BuildIcon />;
     const text = props.customizing ? "Done" : "Customize";
     return (
         <button
@@ -19,7 +21,7 @@ export const CustomizeButton = (props: CustomizeButtonProps) => {
                 props.customizing ? "btn-turquoise font-white" : undefined
             }
         >
-            <span className="material-icons">{icon}</span>
+            {icon}
             {text}
         </button>
     );