Add command bar

source/Component/CommandBar/CommandBar.scss

@@ -1,3 +1,39 @@
 div.command-bar {
     height: 100%;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    
+    button.ms-Button.command-button {
+        width: 100%;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        color:  inherit;
+        
+        span.ms-Button-flexContainer i.ms-Icon {
+            font-size: 25px;
+        }
+    }
+
+    button.ms-Button.command-button.on-end {
+        align-self: flex-end;
+    }
+}
+
+button.ms-Button.command-button.active {
+    color: aqua !important;
+}
+
+div.command-bar.dark button.ms-Button.command-button.active,
+div.command-bar.dark button.ms-Button.command-button:hover {
+    background-color: rgba($color: #FFFFFF, $alpha: .2);
+    color: rgba($color: #FFFFFF, $alpha: 1);
+}
+
+div.command-bar.light button.ms-Button.command-button.active,
+div.command-bar.light button.ms-Button.command-button:hover {
+    background-color: rgba($color: #000000, $alpha: .08);
+    color: rgba($color: #000000, $alpha: 1);
 }

source/Component/CommandBar/CommandBar.tsx

@@ -1,5 +1,7 @@
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
+import { IconButton } from "@fluentui/react";
 import { Component, ReactNode } from "react";
+import "./CommandBar.scss";
 
 interface ICommandBarProps {
     width: number;
@@ -10,9 +12,53 @@ class CommandBar extends Component<ICommandBarProps> {
     render(): ReactNode {
         return <Theme
             className="command-bar"
-            backgroundLevel={BackgroundLevel.Level2}
+            backgroundLevel={BackgroundLevel.Level3}
             style={{ width: this.props.width }}
         >
+            <div>
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Save"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "HandsFree"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "TouchPointer"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Camera"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Play"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "PlayResume"}}
+                    className="command-button"
+                />
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "PlayReverseResume"}}
+                    className="command-button"
+                />
+            </div>
+            <div>
+                <IconButton 
+                    style={{ height: this.props.width }}
+                    iconProps={{iconName: "Settings"}}
+                    className="command-button on-end"
+                />
+            </div>
         </Theme>
     }
 }

source/Component/HeaderBar/HeaderBar.scss

@@ -1,5 +1,5 @@
 div.header-bar {
-    padding: 0 10px;
+    padding: 0 3px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -7,13 +7,13 @@ div.header-bar {
     user-select: none;
 
     div.title > i, div.fps-view > i {
-        font-size: larger;
+        font-size: 25px;
-        vertical-align: text-bottom;
+        vertical-align: middle;
-        padding-right: 5px;
+        padding-right: 8px;
     }
 
     div.ms-TooltipHost {
-        padding: 0 5px;
+        padding: 0 8px;
         overflow: hidden;
         flex-shrink: 1;
         

source/Component/Theme/Theme.scss

@@ -6,7 +6,7 @@ $lt-font-size-lvl2: $ms-font-size-18;
 $lt-font-size-lvl1: $ms-font-size-24;
 
 $lt-font-weight-normal: $ms-font-weight-regular;
-$lt-font-weight-lvl3: $ms-font-weight-semibold;
+$lt-font-weight-lvl3: $ms-font-weight-regular;
 $lt-font-weight-lvl2: $ms-font-weight-semibold;
 $lt-font-weight-lvl1: $ms-font-weight-bold;
 

source/Page/SimulatorWeb/SimulatorWeb.scss

@@ -1,7 +1,7 @@
 div.app-root {
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: fixed;
     overflow: hidden;
 
     div.app-root-space {

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -9,7 +9,7 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import "./SimulatorWeb.scss";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 
-initializeIcons();
+initializeIcons("http://cdn.mrkbear.com/fabric-cdn-prod_20210407.001/");
 
 class SimulatorWeb extends Component {
     
@@ -68,8 +68,11 @@ class SimulatorWeb extends Component {
             fontLevel={FontLevel.Level3}
         >
             <HeaderBar height={45}/>
-            <div className="app-root-space">
+            <div className="app-root-space" style={{
+                height: `calc( 100% - ${45}px)`
+            }}>
                 <CommandBar width={45}/>
+                <div></div>
             </div>
         </Theme>
     }