Several aesthetic adjustments

Canvas.js

@@ -144,7 +144,7 @@ function newCanvas () {
   function initializeBrowserCanvas () {
     try {
       browserCanvasContext = browserCanvas.getContext('2d')
-      browserCanvasContext.font = 'Saira'
+      browserCanvasContext.font = 'Saira Condensed'
 
       viewPort.initialize()
     } catch (err) {

FloatingSpace/UiObjectTitle.js

@@ -181,7 +181,7 @@ function newUiObjectTitle () {
       }
     }
 
-    input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px'
+    input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira Condensed; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px'
     input.style.display = 'block'
     input.focus()
   }

Globals.js

@@ -37,11 +37,11 @@ UI_COLOR = {
 /* User Interface Fonts */
 
 UI_FONT = {
-    PRIMARY: "Saira",
+    PRIMARY: "Saira Condensed",
     SECONDARY: "Source Code Pro"
 };
 
-FONT_ASPECT_RATIO = 0.45;
+let FONT_ASPECT_RATIO = 0.35;
 const MIN_ZOOM_LEVEL = -28.25
 
 const GET_CONTAINER_PURPOSE = {

Panels/Layer.js

@@ -120,8 +120,8 @@ function newLayer () {
       }
 
       thisObject.container.frame.position = position
-      thisObject.container.frame.width = UI_PANEL.WIDTH.MEDIUM
-      thisObject.container.frame.height = 90
+      thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+      thisObject.container.frame.height = 70
 
       let functionLibraryProtocolNode = newProtocolNode()
       let lightingPath =
@@ -323,15 +323,15 @@ function newLayer () {
 
     drawLayerDisplay()
 
-    drawProgressBar(marketFileProgressBar, 1, -5)
-    drawProgressBar(dailyFileProgressBar, 1, -6)
-    drawProgressBar(singleFileProgressBar, 1, -7)
-    drawProgressBar(fileSequenceProgressBar, 1, -8)
+    drawProgressBar(marketFileProgressBar, 1, -55)
+    drawProgressBar(dailyFileProgressBar, 1, -56)
+    drawProgressBar(singleFileProgressBar, 1, -57)
+    drawProgressBar(fileSequenceProgressBar, 1, -58)
 
     function drawProgressBar (progressBar, lineWidth, offsetY) {
       let point1
       let point2
-      let horizontalMargin = 50
+      let horizontalMargin = 15
 
       if (progressBar.value === 0) {
         return
@@ -393,13 +393,13 @@ function newLayer () {
     let plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent
 
     let labelArray = thisObject.payload.node.name.split(' ')
-    let label1 = labelArray[0]
-    let label2 = labelArray[1]
+    let label1 = thisObject.payload.node.name
+    let label2 = ''
     let label3 = exchange.name.substring(0, 15) + ' - ' + market
     let label4 = thisObject.status.toUpperCase()
 
     if (label1 !== undefined) {
-      label1 = label1.substring(0, 15)
+      label1 = label1.substring(0, 22)
     }
     if (label2 !== undefined) {
       label2 = label2.substring(0, 15)
@@ -451,21 +451,16 @@ function newLayer () {
 
     roundedCornersBackground(params)
 
-    if (label2 !== undefined) {
-      drawLabel(label1, 1 / 2, 2 / 8, 0, 0, 16, thisObject.container)
-      drawLabel(label2, 1 / 2, 4 / 8, 0, 0, 16, thisObject.container)
-    } else {
-      drawLabel(label1, 1 / 2, 3 / 8, 0, 0, 20, thisObject.container)
-    }
+    drawLabel(label1, 1 / 2, 6 / 10, -5, 0, 17, thisObject.container)
 
-    drawLabel(label3, 1 / 2, 6 / 8, 0, 0, 10, thisObject.container)
-    drawLabel(label4, 1 / 2, 7 / 8, 0, 0, 10, thisObject.container)
+    drawLabel(label3, 1 / 2, 8.2 / 10, -5, 0, 10, thisObject.container)
+    drawLabel(label4, 1 / 2, 9.5 / 10, -5, 0, 10, thisObject.container)
 
     /* Images */
-    drawIcon(icon1, 1 / 8, 1 / 4, 0, 0, 20, thisObject.container)
-    drawIcon(icon2, 7 / 8, 1 / 4, 0, 0, 20, thisObject.container)
-    drawIcon(icon3, 1 / 8, 3 / 4, 0, 0, 20, thisObject.container)
-    drawIcon(icon4, 7 / 8, 3 / 4, 0, 0, 20, thisObject.container)
+    drawIcon(icon1, 1 / 8, 2 / 10, 0, 0, 15, thisObject.container)
+    drawIcon(icon2, 7 / 8, 2 / 10, 0, 0, 15, thisObject.container)
+    drawIcon(icon3, 3 / 8, 2 / 10, 0, 0, 15, thisObject.container)
+    drawIcon(icon4, 5 / 8, 2 / 10, 0, 0, 15, thisObject.container)
   }
 }
 

Panels/LayersPanel.js

@@ -28,9 +28,9 @@ function newProductsPanel () {
   let panelTabButton
 
   let visible = true
-  let heatherHeight = 60
+  let heatherHeight = 50
   let footerHeight = 15
-  let layerHeight = 90
+  let layerHeight = 70
   let desiredVisibleLayers = 5
   let posibleVisibleLayers = 5
   let desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + heatherHeight + footerHeight
@@ -57,7 +57,7 @@ function newProductsPanel () {
   function initialize () {
     thisObject.container.name = thisObject.payload.node.name
     thisObject.container.frame.containerName = thisObject.container.name
-    thisObject.container.frame.width = UI_PANEL.WIDTH.MEDIUM
+    thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
     thisObject.container.frame.height = heatherHeight
 
     let position = {
@@ -335,7 +335,7 @@ function newProductsPanel () {
     let backgroundColor = UI_COLOR.BLACK
 
     let params = {
-      cornerRadius: 15,
+      cornerRadius: 5,
       lineWidth: 1,
       container: thisObject.container,
       borderColor: UI_COLOR.RUSTED_RED,
@@ -349,13 +349,13 @@ function newProductsPanel () {
     drawLabel(label1, 1 / 2, 0, 0, 20, 10, thisObject.container)
     drawLabel(label2, 1 / 2, 0, 0, 40, 10, thisObject.container)
 
-    drawIcon(icon1, 1 / 8, 0, 0, 30, 40, thisObject.container)
-    drawIcon(icon2, 7 / 8, 0, 0, 30, 40, thisObject.container)
+    drawIcon(icon1, 1 / 8, 0, 0, 30, 30, thisObject.container)
+    drawIcon(icon2, 7 / 8, 0, 0, 30, 30, thisObject.container)
   }
 
   function drawScrollBar () {
     if (thisObject.layers.length > posibleVisibleLayers && posibleVisibleLayers > 0) {
-      let xOffset = 5
+      let xOffset = 4
       let barTopPoint = {
         x: thisObject.container.frame.width - xOffset,
         y: heatherHeight
@@ -393,7 +393,7 @@ function newProductsPanel () {
       browserCanvasContext.lineTo(handleBottomPoint.x, handleBottomPoint.y)
       browserCanvasContext.closePath()
       browserCanvasContext.setLineDash([0, 0])
-      browserCanvasContext.lineWidth = 6
+      browserCanvasContext.lineWidth = 4
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + 1 + ')'
       browserCanvasContext.stroke()
     }

Scales/Commons.js

@@ -4,7 +4,7 @@ function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2,
   const OPACITY = 1
 
   let params = {
-    cornerRadius: 15,
+    cornerRadius: 5,
     lineWidth: 1,
     container: container,
     borderColor: UI_COLOR.RUSTED_RED,
@@ -25,13 +25,13 @@ function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2,
   drawLabel(label2, 1 / 2, 2 / 5, 0, 0, 20, container)
   drawLabel(label3, 1 / 2, 3 / 5, 0, 0, 10, container)
 
-  drawIcon(icon1, 1 / 8, 1 / 2, 0, 0, 40, container)
-  drawIcon(icon2, 7 / 8, 1 / 2, 0, 0, 40, container)
+  drawIcon(icon1, 1 / 8, 1 / 2, 0, 0, 30, container)
+  drawIcon(icon2, 7 / 8, 1 / 2, 0, 0, 30, container)
 }
 
 function drawScaleDisplayCover (container) {
   let params = {
-    cornerRadius: 15,
+    cornerRadius: 5,
     lineWidth: 1,
     container: container,
     borderColor: UI_COLOR.WHITE,

Scales/RateScale.js

@@ -28,8 +28,8 @@ function newRateScale () {
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
 
-  thisObject.container.frame.width = 200
-  thisObject.container.frame.height = 60
+  thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+  thisObject.container.frame.height = 50
 
   let visible = true
   let isMouseOver

Scales/TimeFrameScale.js

@@ -54,8 +54,8 @@ function newTimeFrameScale () {
     thisObject.container.isWheelable = true
     thisObject.container.detectMouseOver = true
 
-    thisObject.container.frame.width = 200
-    thisObject.container.frame.height = 60
+    thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+    thisObject.container.frame.height = 50
   }
 
   function finalize () {

Scales/TimeScale.js

@@ -27,8 +27,8 @@ function newTimeScale () {
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
 
-  thisObject.container.frame.width = 200
-  thisObject.container.frame.height = 60
+  thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+  thisObject.container.frame.height = 50
 
   let visible = true
   let isMouseOver

SplashScreen.js

@@ -133,7 +133,7 @@ function newSplashScreen () {
     }
 
     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.font = 'Saira'
+    browserCanvasContext.font = 'Saira Condensed'
     browserCanvasContext.fillStyle = 'rgba(0, 0, 0,  ' + opacity + ')'
     browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y)
   }