Items displayed in text

Frame.js

@@ -294,7 +294,9 @@ function newFrame () {
       cornerRadious: 5,
       lineWidth: 0.1,
       opacity: 0.75,
-      container: frame.container
+      container: frame.container,
+      borderColor: UI_COLOR.DARK,
+      backgroundColor: UI_COLOR.WHITE
     }
 
     roundedCornersBackground(params)

StrategySpace/StrategyCollectionItem.js

@@ -19,7 +19,7 @@ function newStrategyCollectionItem () {
   return thisObject
 
   function initialize () {
-    const ITEM_WIDTH = 400
+    const ITEM_WIDTH = 430
     const ITEM_HEIGHT = 60
 
     thisObject.container.frame.width = ITEM_WIDTH
@@ -60,8 +60,8 @@ function newStrategyCollectionItem () {
       return
     }
 
-    const LEFT_MARGIN = 50
-    const TOP_MARGIN = 30
+    const LEFT_MARGIN = 70
+    const TOP_MARGIN = 35
 
     let strategy = thisObject.strategy
 
@@ -83,53 +83,16 @@ function newStrategyCollectionItem () {
 
   function borders () {
     let params = {
-      cornerRadious: 5,
-      lineWidth: 0.5,
-      opacity: 0.8,
-      container: thisObject.container
+      cornerRadious: 8,
+      lineWidth: 0.1,
+      opacity: 1,
+      container: thisObject.container,
+      borderColor: UI_COLOR.DARK,
+      backgroundColor: UI_COLOR.WHITE,
+      castShadow: true
     }
 
     roundedCornersBackground(params)
-
-    return
-
-    /* Shadow */
-
-    for (let i = 0; i <= 5; i++) {
-      opacity = 1 - (i / 100) - 0.93
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(point1.x + i, point1.y + i)
-      browserCanvasContext.lineTo(point2.x + i, point2.y + i)
-      browserCanvasContext.lineTo(point3.x + i, point3.y + i)
-      browserCanvasContext.lineTo(point4.x + i, point4.y + i)
-      browserCanvasContext.lineTo(point1.x + i, point1.y + i)
-      browserCanvasContext.closePath()
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
-      browserCanvasContext.lineWidth = 1
-      browserCanvasContext.stroke()
-    }
-
-    /* Background and Border */
-
-    browserCanvasContext.setLineDash([0, 0])
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y)
-    browserCanvasContext.lineTo(point2.x, point2.y)
-    browserCanvasContext.lineTo(point3.x, point3.y)
-    browserCanvasContext.lineTo(point4.x, point4.y)
-    browserCanvasContext.lineTo(point1.x, point1.y)
-    browserCanvasContext.closePath()
-
-    opacity = 1
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
-    browserCanvasContext.fill()
-
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
-    browserCanvasContext.lineWidth = 0.3
-    browserCanvasContext.stroke()
   }
 }
 

Utilities/RoundedCornersBackground.js

@@ -26,12 +26,41 @@ function roundedCornersBackground (params) {
   borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
   borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
 
-      /* We paint the panel background  */
-
-  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + params.opacity + ')'
-
   browserCanvasContext.setLineDash([0, 0])
 
+        /* Shadow  */
+
+  if (params.castShadow === true) {
+    let SHADOW_OFFSET = 2
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadious + SHADOW_OFFSET)
+    browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET)
+    browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadious + SHADOW_OFFSET)
+    browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET)
+
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.lineWidth = 10
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
+    browserCanvasContext.stroke()
+
+    browserCanvasContext.lineWidth = 5
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
+    browserCanvasContext.stroke()
+
+    browserCanvasContext.lineWidth = 1
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')'
+    browserCanvasContext.stroke()
+  }
+
+        /* Background  */
+
   browserCanvasContext.beginPath()
 
   browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI)
@@ -45,14 +74,12 @@ function roundedCornersBackground (params) {
 
   browserCanvasContext.closePath()
 
-  browserCanvasContext.lineWidth = params.lineWidth * 15
-  browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.05 + ')'
-  browserCanvasContext.stroke()
+  browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')'
 
   browserCanvasContext.fill()
 
   browserCanvasContext.lineWidth = params.lineWidth
-  browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + params.opacity + ')'
+  browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
   browserCanvasContext.stroke()
 }