3 files changed, 13 insertions, 6 deletions
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 83988e324..060627c17 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -54,7 +54,7 @@ $timelineColor: #9acedf;
             height: 35px;
             width: 35px;
             background-color: white;
-            border: 1px solid black;
+            border: 3px solid black;
             border-radius: 20px;
             transition: transform 500ms ease-in-out;
             margin-left: 0px;
@@ -80,6 +80,13 @@ $timelineColor: #9acedf;
     height: 100%;
     width: 1px;
     background-color: black;
+    color: black;
+}
+
+.number-label {
+    color: black;
+    padding-left: 5px;
+
 }
 
 .timeline-container {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 589470111..2332b4d5f 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -131,7 +131,7 @@ export class Timeline extends React.Component<FieldViewProps> {
     drawTicks = () => {
         let ticks = [];
         for (let i = 0; i < this._time / this._tickIncrement; i++) {
-            ticks.push(<div key={Utils.GenerateGuid()} className="tick" style={{ transform: `translate(${i * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toReadTime(i * this._tickIncrement)}</p></div>);
+            ticks.push(<div key={Utils.GenerateGuid()} className="tick" style={{ transform: `translate(${i * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p className="number-label">{this.toReadTime(i * this._tickIncrement)}</p></div>);
         }
         return ticks;
     }
@@ -457,7 +457,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             timelineContainer.style.top = `${-this._containerHeight}px`;
             this.props.Document.isATOn = false;
         } else {
-            roundToggle.style.transform = "translate(45px, 0px)";
+            roundToggle.style.transform = "translate(40px, 0px)";
             roundToggle.style.animationName = "turnon";
             roundToggleContainer.style.animationName = "turnon";
             roundToggleContainer.style.backgroundColor = "#9acedf";
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index c643b978b..3517d3f39 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -38,7 +38,7 @@ $timelineColor: #9acedf;
             position: absolute;
             height: 10px;
             width: 10px;
-            // background-color: black;
+            background-color: black;
             border-radius: 50%;
             // border: 3px solid black;
             left: -4px;
@@ -68,9 +68,9 @@ $timelineColor: #9acedf;
         height: 20px;
         border-radius: 50%;
         background-color: white;
-        border: 3px $timelineColor;
+        border: 3px solid $timelineColor;
         left: 0px;
-        top: -10px;
+        top: -8px;
         cursor: pointer;
     }
 }