added resize handlers and linted document decorations

1 files changed, 36 insertions, 43 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 135d6d001..af4ceb0b5 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,6 +1,8 @@
 @import 'global/globalCssVariables';
 
 $linkGap: 3px;
+$headerHeight: 20px;
+$resizeHandler: 8px;
 
 .documentDecorations-Dark,
 .documentDecorations {
@@ -16,8 +18,8 @@ $linkGap: 3px;
     top: 0;
     left: 0;
     display: grid;
-    grid-template-rows: 20px 8px 1fr 8px;
-    grid-template-columns: 8px 1fr 8px;
+    grid-template-rows: $headerHeight $resizeHandler 1fr $resizeHandler;
+    grid-template-columns: $resizeHandler 1fr $resizeHandler;
     pointer-events: none;
 
     .documentDecorations-centerCont {
@@ -82,29 +84,44 @@ $linkGap: 3px;
         grid-column: 3;
     }
 
-    .documentDecorations-rotation,
+    // Rotation handler
+    .documentDecorations-rotation {
+        border-radius: 100%;
+        height: 30;
+        width: 30;
+        right: -10;
+        top: 50%;
+        z-index: 1000000;
+        position: absolute;
+        pointer-events: all;
+        cursor: pointer;
+        background: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        font-size: 30px;
+    }
+
+    // Border radius handler
     .documentDecorations-borderRadius {
-        grid-column: 3;
-        grid-row: 4;
+        position: absolute;
         border-radius: 100%;
-        background: black;
-        height: 8;
-        right: -12;
-        top: 12;
-        position: relative;
+        background: $medium-gray;
+        height: 10;
+        width: 10;
         pointer-events: all;
         cursor: nwse-resize;
-
-        .borderRadiusTooltip {
-            width: 10px;
-            height: 10px;
-            position: absolute;
-        }
     }
 
-    .documentDecorations-rotation {
-        background: transparent;
-        right: -15;
+    .documentDecorations-rotationPath {
+        position: absolute;
+        width: 100%;
+        height: 0;
+        transform: translate(0px, -25%);
+        padding-bottom: 100%;
+        border-radius: 100%;
+        border: solid $medium-gray 10px;
     }
 
     .documentDecorations-topLeftResizer,
@@ -146,30 +163,6 @@ $linkGap: 3px;
         grid-column: 3;
     }
 
-    .documentDecorations-rotation,
-    .documentDecorations-borderRadius {
-        grid-column: 3;
-        grid-row: 4;
-        border-radius: 100%;
-        background: black;
-        height: 8;
-        right: -12;
-        top: 12;
-        position: relative;
-        pointer-events: all;
-        cursor: nwse-resize;
-
-        .borderRadiusTooltip {
-            width: 10px;
-            height: 10px;
-            position: absolute;
-        }
-    }
-    .documentDecorations-rotation {
-        background: transparent;
-        right: -15;
-    }
-
     .documentDecorations-topLeftResizer,
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;