initial stylistic changes

3 files changed, 97 insertions, 89 deletions

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 76c8475d1..83988e324 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -1,6 +1,6 @@
 @import "./../globalCssVariables.scss";
 
-
+$timelineColor: #9acedf;
 
 .timeline-toolbox {
     position: absolute;
@@ -13,6 +13,10 @@
     align-items: center;
     top: 20px;
 
+    .timeline-icon {
+        color: $timelineColor;
+    }
+
     div {
         padding: 0px;
         margin-left: 10px;
@@ -24,7 +28,7 @@
         width: auto;
         white-space: nowrap;
         font-size: 16px;
-        color: grey;
+        color: black;
         letter-spacing: 2px;
         text-transform: uppercase;
     }
@@ -33,7 +37,7 @@
         height: 40px;
         width: 80px;
         background-color: white;
-        border: 2px solid grey;
+        border: 2px solid black;
         border-radius: 20px;
         animation-fill-mode: forwards;
         animation-duration: 500ms;
@@ -50,7 +54,7 @@
             height: 35px;
             width: 35px;
             background-color: white;
-            border: 1px solid grey;
+            border: 1px solid black;
             border-radius: 20px;
             transition: transform 500ms ease-in-out;
             margin-left: 0px;
@@ -65,7 +69,7 @@
     width: 120px;
     white-space: nowrap;
     font-size: 16px;
-    color: grey;
+    color: black;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding-left: 5px;
@@ -112,13 +116,13 @@
             pointer-events: none;
 
             .scrubberhead {
-                top: -30px;
-                height: 30px;
-                width: 30px;
-                background-color: transparent;
+                top: -20px;
+                height: 20px;
+                width: 20px;
+                background-color: white;
                 border-radius: 50%;
-                border: 5px solid black;
-                left: -15px;
+                border: 3px solid black;
+                left: -9px;
                 position: absolute;
                 pointer-events: all;
             }
@@ -132,7 +136,7 @@
             overflow: hidden;
             background-color: white;
             position: absolute;
-            box-shadow: -10px 0px 10px 10px grey;
+            // box-shadow: -10px 0px 10px 10px red;
         }
 
     }
@@ -156,7 +160,7 @@
             float: left;
             border-style: solid;
             overflow-y: scroll;
-            overflow-x: hidden; 
+            overflow-x: hidden;
         }
     }
 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index fedffe8c1..589470111 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -8,7 +8,7 @@ import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlayCircle, faBackward, faForward, faGripLines,faPauseCircle, faEyeSlash,faEye,faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { faPlayCircle, faBackward, faForward, faGripLines, faPauseCircle, faEyeSlash, faEye, faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { ContextMenu } from "../ContextMenu";
 import { TimelineOverview } from "./TimelineOverview";
 import { FieldViewProps } from "../nodes/FieldView";
@@ -43,14 +43,14 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     //readonly constants
     private readonly DEFAULT_TICK_SPACING: number = 50;
-    private readonly MAX_TITLE_HEIGHT = 75; 
+    private readonly MAX_TITLE_HEIGHT = 75;
     private readonly MAX_CONTAINER_HEIGHT: number = 800;
     private readonly DEFAULT_TICK_INCREMENT: number = 1000;
 
     //height variables
     private DEFAULT_CONTAINER_HEIGHT: number = 330;
     private MIN_CONTAINER_HEIGHT: number = 205;
-    
+
     //react refs
     @observable private _trackbox = React.createRef<HTMLDivElement>();
     @observable private _titleContainer = React.createRef<HTMLDivElement>();
@@ -224,7 +224,7 @@ export class Timeline extends React.Component<FieldViewProps> {
         e.stopPropagation();
         let scrubberbox = this._infoContainer.current!;
         let left = scrubberbox.getBoundingClientRect().left;
-        let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale; 
+        let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale;
         this.changeCurrentBarX(offsetX + this._visibleStart); //changes scrubber to clicked scrubber position
     }
 
@@ -403,9 +403,9 @@ export class Timeline extends React.Component<FieldViewProps> {
         let size = 40 * scale; //50 is default
         return (
             <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
-                <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px`, color: "grey" }} /> </div>
-                <div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px`, color: "grey" }} /> </div>
-                <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px`, color: "grey" }} /> </div>
+                <div className="timeline-icon" key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
+                <div className="timeline-icon" key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
+                <div className="timeline-icon" key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
                 <div key="overview-text" className="animation-text">Timeline Overview</div>
                 <TimelineOverview isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
                 <div key="animation-text" className="animation-text">Mode: {this.props.Document.isATOn ? "Authoring" : "Play"}</div>
@@ -460,7 +460,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             roundToggle.style.transform = "translate(45px, 0px)";
             roundToggle.style.animationName = "turnon";
             roundToggleContainer.style.animationName = "turnon";
-            roundToggleContainer.style.backgroundColor = "green";
+            roundToggleContainer.style.backgroundColor = "#9acedf";
             timelineContainer.style.top = "0px";
             this.props.Document.isATOn = true;
         }
@@ -499,7 +499,7 @@ export class Timeline extends React.Component<FieldViewProps> {
     render() {
         return (
             <div>
-                <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}> 
+                <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
                     <div key="timeline_wrapper" style={{ visibility: BoolCast(this.props.Document.isATOn && this._timelineVisible) ? "visible" : "hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }}>
                         <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `0px` }}>
                             <div key="timeline_info" className="info-container" ref={this._infoContainer} onWheel={this.onWheelZoom}>
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index c7f9bd059..c643b978b 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,85 +1,89 @@
-@import "./../globalCssVariables.scss"; 
+@import "./../globalCssVariables.scss";
 
+$timelineColor: #9acedf;
 
-.timeline-overview-container{ 
-    padding: 0px; 
-    margin: 0px; 
-    width: 300px; 
+.timeline-overview-container {
+    padding: 0px;
+    margin: 0px;
+    width: 300px;
     height: 40px;
-    background: white; 
-    position: relative; 
-    border: 2px solid black; 
-    
-    .timeline-overview-visible{
-        position: absolute; 
-        height: 100%; 
-        background: green; 
+    background: white;
+    position: relative;
+    border: 2px solid black;
+
+    .timeline-overview-visible {
+        position: absolute;
+        height: 98%;
+        background: $timelineColor;
         display: inline-block;
-        margin: 0px; 
-        padding: 0px; 
+        margin: 0px;
+        padding: 0px;
     }
-    .timeline-overview-scrubber-container{   
-        margin: 0px; 
-        padding: 0px; 
-        position: absolute; 
+
+    .timeline-overview-scrubber-container {
+        margin: 0px;
+        padding: 0px;
+        position: absolute;
         height: 100%;
-        width: 2px; 
-        top: 0px; 
-        left: 0px; 
+        width: 2px;
+        top: 0px;
+        left: 0px;
         z-index: 1001;
-        background-color:black; 
-        display: inline-block; 
+        background-color: black;
+        display: inline-block;
 
-        .timeline-overview-scrubber-head{   
-            padding: 0px; 
-            margin: 0px; 
-            position:absolute; 
-            height: 30px; 
-            width: 30px;
-            background-color:transparent; 
-            border-radius: 50%; 
-            border: 5px solid black; 
-            left: -15px;
-            top: -30px; 
+        .timeline-overview-scrubber-head {
+            padding: 0px;
+            margin: 0px;
+            position: absolute;
+            height: 10px;
+            width: 10px;
+            // background-color: black;
+            border-radius: 50%;
+            // border: 3px solid black;
+            left: -4px;
+            // top: -30px;
+            top: -10px;
         }
     }
 }
 
 
 
-.timeline-play-bar{
-    position: relative; 
-    padding: 0px; 
-    margin: 0px; 
-    width: 300px; 
-    height: 4px; 
-    background-color: grey;
+.timeline-play-bar {
+    position: relative;
+    padding: 0px;
+    margin: 0px;
+    width: 300px;
+    height: 4px;
+    background-color: $timelineColor;
     border-radius: 20px;
-    cursor: pointer; 
-    
-    .timeline-play-head{
-        position: absolute; 
-        padding: 0px; 
-        margin: 0px; 
-        width: 20px; 
-        height: 20px; 
-        border-radius: 50%; 
-        background-color: white; 
-        border: 3px grey solid; 
-        left: 0px; 
-        top: -10px; 
-        cursor: pointer; 
+    cursor: pointer;
+
+    .timeline-play-head {
+        position: absolute;
+        padding: 0px;
+        margin: 0px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: white;
+        border: 3px $timelineColor;
+        left: 0px;
+        top: -10px;
+        cursor: pointer;
     }
-}  
-.timeline-play-tail{
-    position: absolute; 
-    padding: 0px; 
-    margin: 0px; 
-    height: 4px; 
-    width: 0px;   
-    z-index: 1000; 
-    background-color: green;
+}
+
+.timeline-play-tail {
+    position: absolute;
+    padding: 0px;
+    margin: 0px;
+    height: 4px;
+    width: 0px;
+    z-index: 1000;
+    background-color: $timelineColor;
     border-radius: 20px;
-    margin-top: -4px; 
-    cursor: pointer; 
+    margin-top: -4px;
+    cursor: pointer;
 }
\ No newline at end of file