css adjustments

Author: VeraZab

src/components/fields/RectanglePositioner.js

@@ -6,7 +6,7 @@ import ResizableRect from 'react-resizable-rotatable-draggable';
 import RadioBlocks from '../widgets/RadioBlocks';
 import DualNumeric from './DualNumeric';
 
-const maxWidth = 276;
+const maxWidth = 280;
 const gridRes = 8;
 
 class UnconnectedRectanglePositioner extends Component {
@@ -58,8 +58,8 @@ class UnconnectedRectanglePositioner extends Component {
     const fieldWidthPx = Math.min(maxWidth, maxWidth / aspectRatio);
     const fieldHeightPx = Math.min(maxWidth, maxWidth * aspectRatio);
 
-    const width = fieldWidthPx * (x[1] - x[0]);
-    const height = fieldHeightPx * (y[1] - y[0]);
+    const width = fieldWidthPx * (x[1] - x[0]) - 6; // eslint-disable-line
+    const height = fieldHeightPx * (y[1] - y[0]) - 6; // eslint-disable-line
     const left = fieldWidthPx * x[0];
     const top = fieldHeightPx * (1 - y[1]);
 

src/styles/components/containers/_fold.scss

@@ -10,11 +10,10 @@
     font-size: var(--font-size-base);
     border: 1px solid var(--fold-header-border-color-closed);
     background-color: var(--fold-header-background-closed);
-    height: 15px;
+    height: 30px;
     border-radius: var(--border-radius);
     text-shadow: var(--text-shadow-dark-ui);
-    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out,
-      border 0.1s ease-in-out;
+    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out;
 
     &:hover {
       cursor: pointer;

src/styles/components/containers/_menupanel.scss

@@ -19,7 +19,7 @@
       display: block;
     }
     // gets overridden by user agent stylesheet otherwise
-    width: 15px !important;
+    width: 19px !important;
     height: 15px !important;
     fill: var(--color-text-light) !important;
     padding-left: var(--spacing-quarter-unit);

src/styles/components/widgets/_rangeslider.scss

@@ -11,7 +11,6 @@
   border: 1px solid var(--color-border-default);
   flex-grow: 1;
 
-
   &,
   .rangeslider__fill {
     display: block;
@@ -68,13 +67,12 @@
     background-color: var(--color-accent);
     border: var(--border-accent);
     border-radius: 10px;
-    transform: translateY(-1px);
     top: 0;
   }
   .rangeslider__handle {
     $size: 20px;
     width: $size/3;
-    height: $size*1.5;
+    height: $size * 1.5;
     border-radius: $size;
     top: 50%;
     transform: translate3d(-50%, -50%, 0);