Icons and Styling

inspector/src/components/actionTabs/lines/iconButtonLineComponent.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export interface IIconButtonLineComponentProps {
+    icon: string;
+    onClick: () => void;
+    tooltip: string;
+}
+
+export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+    constructor(props: IIconButtonLineComponentProps) {
+        super(props);
+    }
+
+    render() {
+
+        return (
+            <div title={this.props.tooltip} className={`icon ${this.props.icon}`} onClick={() => this.props.onClick()} />
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { Animation } from 'babylonjs/Animations/animation';
 import { Vector2, Vector3, Quaternion } from 'babylonjs/Maths/math.vector';
 import { Size } from 'babylonjs/Maths/math.size';
@@ -24,7 +22,6 @@ require("./curveEditor.scss");
 interface IAnimationCurveEditorComponentProps {
     close: (event: any) => void;
     playOrPause?: () => void;
-    title: string;
     scene: Scene;
     entity: IAnimatable | TargetedAnimation;
 }
@@ -1267,14 +1264,11 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
 
                 <Notification message={this.state.notification} open={this.state.notification !== "" ? true : false} close={() => this.clearNotification()} />
 
-                <div className="header">
-                    <div className="title">{this.props.title}</div>
-                    <div className="close" onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => this.props.close(event)}>
-                        <FontAwesomeIcon icon={faTimes} />
-                    </div>
-                </div>
-
-                <GraphActionsBar currentValue={this.state.currentValue}
+                <GraphActionsBar
+                    enabled={this.state.selected === null || this.state.selected === undefined ? false : true}
+                    title={this._entityName}
+                    close={this.props.close}
+                    currentValue={this.state.currentValue}
                     currentFrame={this.state.currentFrame}
                     handleFrameChange={(e) => this.handleFrameChange(e)}
                     handleValueChange={(e) => this.handleValueChange(e)}
@@ -1285,7 +1279,7 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                     lerpMode={this.state.lerpMode}
                     setLerpMode={() => this.setLerpMode()}
                     flatTangent={() => this.setFlatTangent()} />
-
+                    
                 <div className="content">
                     <div className="row">
                         <div className="animation-list">
@@ -1314,7 +1308,6 @@ export class AnimationCurveEditorComponent extends React.Component<IAnimationCur
                             </div>
 
                             <div className="object-tree">
-                                <h2>{this._entityName}</h2>
                                 <ul>
                                     {
 

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationPropertyGridComponent.tsx

@@ -199,12 +199,11 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
                                 this._isCurveEditorOpen && <PopupComponent
                                     id="curve-editor"
                                     title="Curve Animation Editor"
-                                    size={{ width: 1024, height: 512 }}
+                                    size={{ width: 1024, height: 490 }}
                                     onOpen={(window: Window) => { window.console.log("Window opened!!") }}
                                     onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
 
                                     <AnimationCurveEditorComponent 
-                                        title="Animations Curve Editor" 
                                         scene={this.props.scene} 
                                         entity={animatableAsAny} 
                                         close={(event) => this.onCloseAnimationCurveEditor(event.view)} 

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/addAnimationIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><g id="UI"><rect class="cls-1" width="30" height="30"/><path class="cls-2" d="M23,14.5v1H15.5V23h-1V15.5H7v-1h7.5V7h1v7.5Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationBulletIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:#888;}.cls-2{fill:none;}</style></defs><g id="UI"><circle class="cls-1" cx="5" cy="5" r="2.89"/><rect class="cls-2" width="10" height="10"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationDeleteIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><g id="UI"><rect class="cls-1" width="20" height="20"/><path class="cls-2" d="M10.71,10,15,14.29l-.71.71L10,10.71,5.71,15,5,14.29,9.29,10,5,5.71,5.71,5,10,9.29,14.29,5l.71.71Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationEndIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><path class="cls-2" d="M10.29,23,3.5,28.05V17.9Zm.21-5.07V28.05L17.29,23Zm9-.9h-2V29h2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationNextKeyHoverIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ccc;}.cls-3{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="14.93 22.86 4.79 28.71 4.79 17 14.93 22.86"/><rect class="cls-3" x="15.21" y="17" width="3" height="12"/><rect class="cls-2" x="16.21" y="14" width="1" height="3"/><rect class="cls-2" x="16.21" y="29" width="1" height="3"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationNextKeyIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}.cls-3{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="14.93 22.86 4.79 28.71 4.79 17 14.93 22.86"/><rect class="cls-3" x="15.21" y="17" width="3" height="12"/><rect class="cls-2" x="16.21" y="14" width="1" height="3"/><rect class="cls-2" x="16.21" y="29" width="1" height="3"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationPlayFwdIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="18.19 23.39 4.81 31.12 4.81 15.66 18.19 23.39"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationPlayRevIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><polygon class="cls-2" points="4.81 23.39 18.19 31.12 18.19 15.66 4.81 23.39"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationStartIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#888;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><path class="cls-2" d="M19.5,17.9V28.05L12.71,23ZM5.71,23l6.79,5.08V17.9ZM3.5,29h2V17h-2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationStopIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 45"><defs><style>.cls-1{fill:none;}.cls-2{fill:#8c2f2f;}</style></defs><g id="UI"><rect class="cls-1" width="23" height="45"/><rect class="cls-2" x="5" y="16.61" width="13" height="13"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/animationTriangleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:#888;}.cls-2{fill:none;}</style></defs><g id="UI"><polygon class="cls-1" points="5 7.81 8.25 2.19 1.75 2.19 5 7.81"/><rect class="cls-2" width="10" height="10"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/autoTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M28,18.79a1.51,1.51,0,0,0-1.41,1H22l-1-3.86H19.9L19,19.79H13.41a1.5,1.5,0,1,0,0,1h5.32l-.79,3.28h.88l.6-2.58h2.11l.6,2.58h1l-.81-3.28h4.31a1.5,1.5,0,1,0,1.41-2Zm-8.41,1.9c.41-1.75.73-3.21.85-3.92h0c.1.65.42,1.92.88,3.92Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/breakTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M26.25,13.2a1.5,1.5,0,0,0-1.89,2.27L20.27,24A1.55,1.55,0,0,0,20,24l-.23,0-4.09-8.55a1.5,1.5,0,1,0-2.44-.22,1.51,1.51,0,0,0,1.57.72l4.08,8.53a1.5,1.5,0,1,0,2.27.05L25.23,16a1.5,1.5,0,0,0,1-2.77Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/closeWindowIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M21.13,20,28,26.87,26.87,28,20,21.13,13.13,28,12,26.87,18.87,20,12,13.13,13.13,12,20,18.87,26.87,12,28,13.13Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/flatTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M28,18.5a1.51,1.51,0,0,0-1.41,1H13.41a1.5,1.5,0,1,0,0,1H26.59a1.5,1.5,0,1,0,1.41-2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/frameIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M25,19V17H23V16h3v3ZM15,17v2H14V16h3v1Zm11,4v3H23V23h2V21Zm-9,2v1H14V21h1v2Zm-5-9H28V26H12ZM27,25V15H13V25Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/keyActiveIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#111;}.cls-3{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><rect class="cls-2" x="2.67" y="2.67" width="4.66" height="4.66" transform="translate(-2.07 5) rotate(-45)"/><path class="cls-3" d="M5,2.41,7.59,5,5,7.59,2.41,5,5,2.41M5,1,1,5,5,9,9,5,5,1Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/keyInactiveIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#111;}.cls-3{fill:#aaa;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><rect class="cls-2" x="2.67" y="2.67" width="4.66" height="4.66" transform="translate(-2.07 5) rotate(-45)"/><path class="cls-3" d="M5,2.41,7.59,5,5,7.59,2.41,5,5,2.41M5,1,1,5,5,9,9,5,5,1Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/keySelectedIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><rect class="cls-2" x="2.17" y="2.17" width="5.66" height="5.66" transform="translate(-2.07 5) rotate(-45)"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/linearTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M26.41,14.3l-.71-.71-10,10a1.5,1.5,0,1,0,.71.71Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/moveIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><g id="UI"><rect class="cls-1" width="40" height="40"/><path class="cls-2" d="M14.41,20.5,16,22.1l-.71.71L12.5,20l2.81-2.81.71.71-1.61,1.6H17.5v1ZM27.5,20l-2.78,2.77-.7-.7,1.57-1.57H22.5v-1h3.09L24,17.9l.71-.71Zm-9.57-4-.7-.7L20,12.5l2.81,2.81L22.1,16l-1.6-1.61V17.5h-1V14.41Zm4.17,8,.71.71L20,27.5l-2.81-2.81L17.9,24l1.6,1.61V22.5h1v3.09Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/newKeyIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M20,15.41,24.59,20,20,24.59,15.41,20,20,15.41M20,14l-6,6,6,6,6-6-6-6Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/scaleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M16,13H13.71l2.64,2.65-.7.7L13,13.71V16H12V12h4Zm8-1h4v4H27V13.71l-2.65,2.64-.7-.7L26.29,13H24ZM15.65,23.65l.7.7L13.71,27H16v1H12V24h1v2.29ZM27,26.29V24h1v4H24V27h2.29l-2.64-2.65.7-.7ZM17,23V17h6v6Zm1-5v4h4V18Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/scrollbarHandleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><defs><style>.cls-1{fill:#333;}.cls-2{fill:none;}</style></defs><g id="UI"><rect class="cls-1" x="5" y="3" width="2" height="15"/><rect class="cls-1" x="9" y="3" width="2" height="15"/><rect class="cls-1" x="13" y="3" width="2" height="15"/><rect class="cls-2" width="20" height="21"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/tangentHandleIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ffc017;}</style></defs><g id="UI"><rect class="cls-1" width="10" height="10"/><circle class="cls-2" cx="5" cy="5" r="4"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/assets/unifyTangentIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="UI"><path class="cls-1" d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g></svg>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor.scss

@@ -3,6 +3,256 @@
 
     font-family: acumin-pro-condensed;
 
+    .icon {
+        width: 40px;
+        height: 40px;
+        &.babylon-logo {
+            background-image: url('./assets/babylonLogo.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+        }
+
+        &.close {
+            background-image: url('./assets/closeWindowIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.auto-tangent {
+            background-image: url('./assets/autoTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.break-tangent {
+            background-image: url('./assets/breakTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.flat-tangent {
+            background-image: url('./assets/flatTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.frame {
+            background-image: url('./assets/frameIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.linear-tangent {
+            background-image: url('./assets/linearTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.unify-tangent {
+            background-image: url('./assets/unifyTangentIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.add-animation {
+            background-image: url('./assets/addAnimationIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+            cursor: pointer;
+        }
+
+        &.animation-bullet {
+            background-image: url('./assets/animationBulletIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-delete {
+            background-image: url('./assets/animationDeleteIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-end {
+            background-image: url('./assets/animationEndIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-lastkey {
+            background-image: url('./assets/animationLastKeyIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+
+            &:hover{
+                background-image: url('./assets/animationLastKeyHoverIcon.svg');
+            }
+        }
+
+        &.animation-nextkey {
+            background-image: url('./assets/animationNextKeyIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+
+            &:hover{
+                background-image: url('./assets/animationNextKeyHoverIcon.svg');
+            }
+        }
+
+        &.animation-options {
+            background-image: url('./assets/animationOptionsIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-playfwd {
+            background-image: url('./assets/animationPlayFwdIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-playrev {
+            background-image: url('./assets/animationPlayRevIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-start {
+            background-image: url('./assets/animationStartIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-stop {
+            background-image: url('./assets/animationStopIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.animation-triangle {
+            background-image: url('./assets/animationTriangleIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.key-active {
+            background-image: url('./assets/keyActiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.key-inactive {
+            background-image: url('./assets/keyInactiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.key-selected {
+            background-image: url('./assets/keySelectedIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.loop-active {
+            background-image: url('./assets/loopActiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.loop-inactive {
+            background-image: url('./assets/loopInactiveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.move {
+            background-image: url('./assets/moveIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.new-key {
+            background-image: url('./assets/newKeyIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.scale {
+            background-image: url('./assets/scaleIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+        &.scrollbar-handle {
+            background-image: url('./assets/scrollbarHandleIcon.svg');
+            background-repeat: no-repeat;
+            background-color: transparent;
+            background-size: contain;
+            color: white;
+        }
+
+    }
+
     .notification-area{
         position: absolute;
         width: auto;
@@ -55,23 +305,46 @@
     .actions-wrapper {
         display: flex;
         flex-direction: row;
-        justify-content: flex-end;
-        align-items: flex-end;
-        padding: 6px;
+        justify-content: flex-start;
+        align-items: center;
         background: #333333;
 
+        .close {
+            position: absolute;
+            right: 1px;
+        }
+
+        .title-container {
+            display: flex;
+            justify-content: stretch;
+            align-items: center;
+            color: white;
+            width: 220px;
+
+            .title {
+                font-size: 15pt;
+            }
+        }
+
+        .buttons-container{
+            display: flex;
+        }
+
         .action-input{
             display: flex;
             justify-content: center;
             flex-direction: row;
             align-items: center;
-            label { margin-right: 0.5em; color: white; }
+            margin-right: 8px;
             input {
-                width: 4em;
-                height: 2em;
+                width: 75px;
+                height: 24px;
                 color: white;
-                font-size: 12pt;
+                font-size: 12px;
+                background: none;
+                border: none;
                 background-color: black;
+                padding: 6px;
             }
         }
     }
@@ -88,11 +361,11 @@
             justify-content: flex-start;
             flex-direction: row;
             width: 100vw;
-            height: 78.5vh;
+            height: 84vh;
 
             .timeline{
                 width: 100vw;
-                background: gray;
+                background: #333333;
                 display: flex;
                 align-items: center;
                 justify-content: stretch;
@@ -184,7 +457,7 @@
             }
 
             .object-tree{
-                background-color: rgba(0, 0, 0, 0.3);
+                background-color:#111111;
                 padding: 10px;
                 margin-top: 19px;
                 height: 11em;
@@ -214,7 +487,7 @@
             padding-left: 32px;
             overflow-y: scroll;
             scroll-behavior: smooth;
-            background-color: #444444;
+            background-color: #111111;
             height: 100%;
 
             .linear{

inspector/src/components/actionTabs/tabs/propertyGrids/animations/graphActionsBar.tsx

@@ -1,6 +1,6 @@
 
 import * as React from "react";
-import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
+import { IconButtonLineComponent } from '../../../lines/iconButtonLineComponent';
 
 interface IGraphActionsBarProps {
    addKeyframe: () => void;
@@ -14,6 +14,9 @@ interface IGraphActionsBarProps {
    lerpMode: boolean;
    currentValue: number;
    currentFrame: number;
+   title: string;
+   close: (event: any) => void;
+   enabled: boolean;
 }
 
 export class GraphActionsBar extends React.Component<IGraphActionsBarProps>{ 
@@ -24,19 +27,25 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps>{
     render() { 
        return (
            <div className="actions-wrapper">
+               <div className="title-container">
+               <div className="icon babylon-logo"></div>
+               <div className="title">{this.props.title}</div>
+               </div>
+               <div className="buttons-container" style={{display: this.props.enabled ? 'flex' : 'none'}}>
                <div className="action-input">
-               <label>Frame</label>
                <input type="number" value={this.props.currentFrame} onChange={this.props.handleFrameChange} step="1"/>
                </div>
                <div className="action-input">
-               <label>Value</label>
                <input type="number" value={this.props.currentValue.toFixed(3)} onChange={this.props.handleValueChange} step="0.001"/>
                </div>
-              <ButtonLineComponent label={"Add Keyframe"} onClick={this.props.addKeyframe} />
-              <ButtonLineComponent label={"Remove Keyframe"} onClick={this.props.removeKeyframe} />
-              <ButtonLineComponent label={"Flat Tangents"} onClick={this.props.flatTangent} />
-              <ButtonLineComponent label={this.props.brokenMode ? "Broken Mode On" : "Broken Mode Off" } onClick={this.props.brokeTangents} />
-              <ButtonLineComponent label={this.props.lerpMode ? "Lerp On" : "lerp Off" } onClick={this.props.setLerpMode} />
+              <IconButtonLineComponent tooltip={"Add Keyframe"} icon="new-key" onClick={this.props.addKeyframe} />
+              <IconButtonLineComponent tooltip={"Remove Keyframe"} icon="frame" onClick={this.props.removeKeyframe} />
+              <IconButtonLineComponent tooltip={"Flat Tangents"} icon="flat-tangent" onClick={this.props.flatTangent} />
+              <IconButtonLineComponent tooltip={this.props.brokenMode ? "Broken Mode On" : "Broken Mode Off" } icon={this.props.brokenMode ? "break-tangent" : "unify-tangent" } onClick={this.props.brokeTangents} />
+              <IconButtonLineComponent tooltip={this.props.lerpMode ? "Lerp On" : "lerp Off" } icon="linear-tangent" onClick={this.props.setLerpMode} />
+              </div>
+              <div className="icon close" onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => this.props.close(event)}>
+              </div>
            </div>
         )
     }

inspector/src/components/actionTabs/tabs/propertyGrids/animations/targetedAnimationPropertyGridComponent.tsx

@@ -97,8 +97,7 @@ export class TargetedAnimationGridComponent extends React.Component<ITargetedAni
                             onOpen={(window: Window) => { window.console.log("Window opened!!") }}
                             onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
 
-                            <AnimationCurveEditorComponent 
-                                title="Animations Curve Editor" 
+                            <AnimationCurveEditorComponent
                                 scene={this.props.scene} 
                                 entity={targetedAnimation as any} 
                                 playOrPause={() => this.playOrPause()}