Ready for testing!

Playground/src/components/commandBarComponent.tsx

@@ -47,12 +47,14 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
     }
 
     public render() {
+        let activeVersion = Utilities.ReadStringFromStore("version", "Latest");
 
         var versionOptions = Object.keys(Versions).map(key => {
             return {
                 label: key,
                 storeKey: "version",
                 defaultValue: "Latest",
+                isActive: activeVersion === key,
                 onClick: () => {
                     Utilities.StoreStringToStore("version", key);
                     window.location.reload();
@@ -141,7 +143,7 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
                 ]}/>
                 </div>
                 <div className="commands-right">
-                    <CommandDropdownComponent globalState={this.props.globalState} icon="options" tooltip="Options" toRight={true} items={versionOptions} />                    
+                    <CommandDropdownComponent globalState={this.props.globalState} icon="version" tooltip="Versions" toRight={true} items={versionOptions} />                    
                     <CommandButtonComponent globalState={this.props.globalState} tooltip="Examples" icon="examples" onClick={()=> this.onExamples()} isActive={false}/>
                 </div>
             </div>

Playground/src/components/commandButtonComponent.tsx

@@ -19,7 +19,9 @@ export class CommandButtonComponent extends React.Component<ICommandButtonCompon
     public render() {
         return (
             <div className="command-button" onClick={this.props.onClick} title={this.props.tooltip + (this.props.shortcut ? "\n" + this.props.shortcut : "")}>
-                <img src={"imgs/" + this.props.icon + ".svg"} className={this.props.isActive ? "active" : ""}/>
+                <div className="command-button-icon">
+                    <img src={"imgs/" + this.props.icon + ".svg"} className={this.props.isActive ? "active" : ""}/>
+                </div>
                 <div className="command-label">
                     {this.props.tooltip}
                 </div>

Playground/src/components/commandDropdownComponent.tsx

@@ -11,6 +11,7 @@ interface ICommandDropdownComponentProps {
         onClick?: () => void, 
         onCheck?: (value: boolean) => void, 
         storeKey?: string, 
+        isActive?: boolean,
         defaultValue?: boolean | string;
         subItems?: string[];
     }[];
@@ -35,7 +36,9 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                 }
                 <div className="command-dropdown-root">
                     <div className={"command-dropdown" + (this.state.isExpanded ? " activated" : "")} title={this.props.tooltip} onClick={() => this.setState({isExpanded: !this.state.isExpanded})}>
-                        <img src={"imgs/" + this.props.icon + ".svg"}/>
+                        <div className="command-dropdown-icon">
+                            <img src={"imgs/" + this.props.icon + ".svg"}/>
+                        </div>
                     </div>
                     {
                             this.state.isExpanded &&
@@ -43,7 +46,7 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                                 {
                                     this.props.items.map(m => {
                                         return (
-                                            <div className="command-dropdown-label" key={m.label} onClick={() => {
+                                            <div className={"command-dropdown-label" + (m.isActive ? " active" : "")} key={m.label} onClick={() => {
                                                 if (!m.onClick) {
                                                     let newValue = !Utilities.ReadBoolFromStore(m.storeKey!, (m.defaultValue as boolean) || false);
                                                     Utilities.StoreBoolToStore(m.storeKey!, newValue);
@@ -57,7 +60,7 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                                                 }
                                             }} title={m.label}>
                                                 <div className="command-dropdown-label-text">
-                                                    {m.label}
+                                                    {(m.isActive ? "> " : "") + m.label}
                                                 </div>
                                                 {
                                                     m.onCheck && 

Playground/src/scss/commandBar.scss

@@ -49,6 +49,14 @@
             display: none;
         }        
 
+        .command-button-icon {
+            height: 100%;
+            width: 100%;
+            display: grid;
+            align-content: center;
+            justify-content: center;
+        }
+
         &:hover {
             background-color: white;
         } 
@@ -76,6 +84,14 @@
         width: 55px;
         height: 55px;
 
+        .command-dropdown-icon {
+            height: 100%;
+            width: 100%;
+            display: grid;
+            align-content: center;
+            justify-content: center;
+        }
+
         &:hover, &.activated {
             background-color: white;
         } 
@@ -143,6 +159,11 @@
             grid-template-rows: 100%;
             position: relative;
 
+            &.active {
+                font-weight: bold;
+                font-size: 22px;
+            }
+
             &:hover {
                 .sub-items {
                     display: block;

Playground/src/scss/footer.scss

@@ -14,13 +14,6 @@
         grid-row: 1;
         grid-column: 1;
         cursor: pointer;
-
-        .link {
-            svg {
-                height: 35px;
-                width: 35px;
-            }
-        }
     }
    
     #statusBar {
@@ -42,7 +35,8 @@
     .links {
         height: 100%;
         grid-row: 1;
-        grid-column: 3;      
+        grid-column: 3;  
+        display: flex;
     }
 
     .fps {        
@@ -56,14 +50,14 @@
     }
 
     .link {
-        display: inline-block;
+        display: grid;
+        align-content: center;
+        justify-content: center;
         width: 35px;
         height: 100%;
         
         svg {
             fill: white;
-            height: 16px;
-            width: 16px;
         }
 
         &:hover {

Playground/src/scss/hamburgerMenu.scss

@@ -5,6 +5,9 @@
     color:white;
     cursor: pointer;
     transform: scale(1);
+    display: grid;
+    align-content: center;
+    justify-content: center;
     
     &:hover {
         background-color: white;
@@ -15,7 +18,7 @@
     
     &:active {
         transform-origin: center;
-        transform: scale(0.95);
+        transform: scale(0.90);
     }
 
     svg {
@@ -79,10 +82,19 @@
     .command-button {
         cursor: pointer;
         width: 200px;
+        height: 30px;
         display: grid;
         grid-template-columns: 40px 1fr;
         grid-template-rows: 100%;
 
+        .command-button-icon {
+            height: 100%;
+            width: 100%;
+            display: grid;
+            align-content: center;
+            justify-content: center;
+        }
+
         .command-label {
             color: white;
             grid-column: 2;
@@ -95,6 +107,7 @@
         img {
             grid-column: 1;
             grid-row: 1;
+            width: 20px;
 
             &.active {
                 filter: invert(100%);

Playground/src/tools/saveManager.ts

@@ -53,7 +53,7 @@ export class SaveManager {
                     
                 this.globalState.onSavedObservable.notifyObservers();
                 } else {
-                    this.globalState.onErrorObservable.notifyObservers("Unable to save your code. It may be too long.");
+                    this.globalState.onErrorObservable.notifyObservers({message: "Unable to save your code. It may be too long."});
                 }
             }
         };