UI enhancement fixes (#3222)

- Added min-width and min-height to Display Layout lines to allow
 easier selection and move when line is purely vertical or horizontal;
 - Fixed spacing, size and icon of overlay close button;

platform/commonUI/dialog/res/templates/overlay.html

@@ -24,7 +24,7 @@
     <div class="c-overlay__outer">
         <button ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
+           class="c-click-icon c-overlay__close-button icon-x"></button>
         <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>

src/api/overlays/components/OverlayComponent.vue

@@ -7,7 +7,7 @@
     <div class="c-overlay__outer">
         <button
             v-if="dismissable"
-            class="c-click-icon c-overlay__close-button icon-x-in-circle"
+            class="c-click-icon c-overlay__close-button icon-x"
             @click="destroy"
         ></button>
         <div

src/api/overlays/components/overlay-component.scss

@@ -29,11 +29,9 @@
     }
 
     &__close-button {
-        $p: $interiorMargin;
-        border-radius: 100% !important;
+        $p: $interiorMargin + 2px;
         color: $overlayColorFg;
-        display: inline-block;
-        font-size: 1.25em;
+        font-size: 1.5em;
         position: absolute;
         top: $p; right: $p;
         z-index: 99;
@@ -136,13 +134,13 @@ body.desktop {
             }
 
             &__close-button {
-                top: $pad;
-                right: $interiorMarginSm;
+                //top: $interiorMargin;
+                //right: $interiorMargin;
             }
         }
 
         .l-browse-bar {
-            margin-right: $lrPad + $pad; // Don't cover close button
+            margin-right: 50px; // Don't cover close button
             margin-bottom: $interiorMargin;
         }
     }

src/plugins/displayLayout/components/LineView.vue

@@ -76,8 +76,8 @@ const START_HANDLE_QUADRANTS = {
     2: 'c-frame-edit__handle--se',
     3: 'c-frame-edit__handle--ne',
     4: 'c-frame-edit__handle--nw',
-    5: 'c-frame-edit__handle--ne',
-    6: 'c-frame-edit__handle--se'
+    5: 'c-frame-edit__handle--nw',
+    6: 'c-frame-edit__handle--ne'
 };
 
 const END_HANDLE_QUADRANTS = {

src/plugins/displayLayout/components/box-and-line-views.scss

@@ -46,6 +46,11 @@
     }
 
     .is-editing & {
+        // Needed to allow line to be moved
+        $w: 4px;
+        min-width: $w;
+        min-height: $w;
+
         &:hover {
             [class*='__hover-indicator'] {
                 display: inline;