fix(ui): small fixes for play position tracker, wording etc

frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx

@@ -52,7 +52,7 @@ function AddMetric({ metrics, history, siteId, title, description }: IProps) {
                     </div>
                    
                     <Button variant="text-primary" className="font-medium ml-2" onClick={onCreateNew}>
-                        + Create new
+                        + Create New
                     </Button>
                     
                 </div>

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -304,7 +304,7 @@ export default class Controls extends React.Component {
         return (
             <div className={styles.controls}>
                 {!live || liveTimeTravel ? (
-                    <Timeline jump={this.props.jump} liveTimeTravel={liveTimeTravel} pause={this.props.pause} togglePlay={this.props.togglePlay} />
+                    <Timeline live={live} jump={this.props.jump} liveTimeTravel={liveTimeTravel} pause={this.props.pause} togglePlay={this.props.togglePlay} />
                 ) : null}
                 {!fullscreen && (
                     <div className={cn(styles.buttons, { '!px-5 !pt-0': live })} data-is-live={live}>

frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx

@@ -37,7 +37,7 @@ interface Props {
 }
 
 const DraggableCircle: FC<Props> = memo(function DraggableCircle(props) {
-    const { left, top } = props
+    const { left, top, live } = props
     const [{ isDragging, item }, dragRef, preview] = useDrag(
         () => ({
             type: ItemTypes.BOX,
@@ -61,7 +61,7 @@ const DraggableCircle: FC<Props> = memo(function DraggableCircle(props) {
             style={getStyles(left, isDragging)}
             role="DraggableBox"
         >
-            <Circle isGreen={left > 99} />
+            <Circle isGreen={left > 99 && live} />
         </div>
     );
 })

frontend/app/components/Session_/Player/Controls/Timeline.js

@@ -18,7 +18,7 @@ const BOUNDRY = 0;
 function getTimelinePosition(value, scale) {
     const pos = value * scale;
 
-    return pos > 100 ? 100 : pos;
+    return pos > 100 ? 99 : pos;
 }
 
 const getPointerIcon = (type) => {
@@ -186,7 +186,7 @@ export default class Timeline extends React.PureComponent {
         const scale = 100 / endTime;
 
         return (
-            <div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: '100%' }}>
+            <div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: '100%', overflowX: 'hidden' }}>
                 <div
                     className={stl.progress}
                     onClick={disabled ? null : this.seekProgress}
@@ -198,13 +198,13 @@ export default class Timeline extends React.PureComponent {
                 >
                     <TooltipContainer liveTimeTravel={liveTimeTravel} />
                     {/* custo color is live */}
-                    <DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} />
+                    <DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} live={this.props.live} />
                     <CustomDragLayer
                         onDrag={this.onDrag}
                         minX={BOUNDRY}
                         maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY}
                     />
-                    <TimeTracker scale={scale} />
+                    <TimeTracker scale={scale}  />
 
                     {skip &&
                         skipIntervals.map((interval) => (

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -115,7 +115,8 @@ function PlayerControls(props: Props) {
                     onClick={() => setSkipInterval(parseInt(interval, 10))}
                     className="py-2 px-4 cursor-pointer hover:bg-active-blue border-t w-full text-left border-borderColor-gray-light-shade font-semibold"
                   >
-                    {interval} <span className="text-disabled-text">(Secs)</span>
+                    {interval}
+                    <span className="text-disabled-text">s</span>
                   </div>
                 ))}
               </div>