@jotforminc/dnd-builder 2.0.0-beta.4 → 2.0.0

package/lib/cjs/styles/_jfDarkTheme.scss

@@ -52,11 +52,11 @@
     }
 
     .toolSection-dropdown, .toolSection-input, .colorPicker-wrapper {
-      border-color: #303339;
+      border-color: $inputDarkGrayBorder;
       color: $white;
 
       &:hover {
-        border-color: darken(#303339, 10);
+        border-color: $inputDarkGrayBorderHover;
       }
     }
 
@@ -268,28 +268,28 @@
 
     .rangeSlider-bar::-webkit-slider-thumb {
       background: $white;
-      border: 3px solid #0099FF;
+      border: 3px solid $ctaBlue;
 
       &:hover {
-        background-color: opacify(#0099FF, .1);
+        background-color: opacify($ctaBlue, .1);
       }
     }
 
     .rangeSlider-bar::-moz-range-thumb {
       background: $white;
-      border: 3px solid #0099FF;
+      border: 3px solid $ctaBlue;
 
       &:hover {
-        background-color: #0099FF;
+        background-color: $ctaBlue;
       }
     }
 
     .rangeSlider-indicator {
-      background-color: #0099FF;
+      background-color: $ctaBlue;
     }
 
     .rangeSlider-bar::-ms-fill-lower {
-      background: #0099FF;
+      background: $ctaBlue;
     }
 
     .rangeSlider-bar::-ms-fill-upper {
@@ -297,12 +297,12 @@
     }
 
     .rangeSlider-bar::-ms-thumb {
-      border: 3px solid #0099FF;
+      border: 3px solid $ctaBlue;
       background: #fff;
     }
 
     .rangeSlider-bar:focus::-ms-fill-lower {
-      background: #0099FF;
+      background: $ctaBlue;
     }
 
     .rangeSlider-bar:focus::-ms-fill-upper {
@@ -317,8 +317,8 @@
     }
 
     .dropArea.isDragging {
-      background: $white;
-      border: 1px dashed $green;
+      border: 2px dashed $ctaBlue;
+      color: $ctaBlue;
     }
 
     .uploadInfo {
@@ -336,6 +336,7 @@
 
     .hasUnit:after {
       color: $infoGray;
+      border-color: #303339;
     }
 
     .toolSection-dropdownWrapper {
@@ -344,7 +345,7 @@
       }
 
       &:after {
-        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
+        background-color: #303339;
       }
 
       &.isDark {
@@ -444,7 +445,7 @@
   }
 
   .toolSection-list:not(.forChart):not(.forShapes) .toolSection-listItem {
-    .jfReportSVG path, .jfReportSVG circle {
+    .jfReportSVG {
       fill: $white;
     }
   }
@@ -455,8 +456,7 @@
     }
 
     &.isSelected {
-      background-color: #0099FF;
-      color: $white;
+      background-color: $ctaBlue;
 
       svg {
         fill: $white;
@@ -490,16 +490,20 @@
 
   .bigList {
     .toolSection-listItem {
-      & > span:first-child {
+      & > span:not(.toolSection-listItemName) {
         background-color: #fff;
       }
+
       & > span:last-child {
         color: $white;
       }
 
       &.isSelected {
+        color: #ffffff;
+        border-color: transparent;
+
         & > span:first-child {
-          background-color: #0099FF;
+          background-color: $ctaBlue;
         }
       }
     }
@@ -534,7 +538,7 @@
 
       &.isSelected {
         background-color: #303339;
-        border-left-color: #0099FF;
+        border-left-color: $ctaBlue;
         &:hover {
           .thumbnailOrder {
             color: #fff;
@@ -553,4 +557,36 @@
   .jfReport-pane-footer {
     background-color: #404651;
   }
+
+  .jfReportSelectOption-list .jfReportSelectOption-name:not(.isDark) {
+    background-color: #555F6E;
+
+    .jfReportSelectOption-text {
+      color: #ffffff;
+    }
+
+    .jfReportSelectOption-icon {
+      fill: #ffffff;
+      color: #ffffff;
+    }
+
+    .forPin svg {
+      color: $white;
+      fill: $white;
+    }
+  }
+
+  .jfReportSelectOption-list:not(.forChart) .jfReportSelectOption-drag {
+    fill: #ffffff;
+  }
+
+  .jfReportSelectOption-list .jfReportSelectOption-name.isDark {
+    .jfReportSelectOption-drag {
+      fill: #ffffff;
+    }
+  }
+
+  .jfReportSelectOption-list.forPageLayer .jfReportSelectOption-name:hover {
+    border-color: $inputDarkGrayBorderHover;
+  }
 }

package/lib/cjs/styles/_jfLightTheme.scss

@@ -36,6 +36,15 @@
       fill: $additionalGray;
     }
 
+    .toolSection-dropdown, .toolSection-input, .colorPicker-wrapper, .jfReportPalette-item {
+      border-color: $inputGrayBorder;
+      background-color: $inputGray;
+
+      &:hover {
+        border-color: $inputGrayBorderHover;
+      }
+    }
+
     .toolToggle {
 
       .toolToggle-custom {
@@ -209,7 +218,7 @@
     }
 
     .imageUpload-wrapper {
-      @include inputDefault;
+      border: 2px dashed $inputGrayBorder;
 
       &.imageUpload-info span:first-child {
         color: #abadc1;
@@ -218,11 +227,16 @@
 
     .dropArea.isDragging {
       background: $white;
-      border: 1px dashed $green;
+      border: 2px dashed $green;
+      color: $ctaGreen;
     }
 
     .uploadInfo {
-      color: $infoGray;
+      color: $inputGrayBorder;
+    }
+
+    .userUploads-image {
+      border: 1px solid $inputGrayBorder;
     }
 
     .colorPicker-wrapper {
@@ -230,12 +244,13 @@
       border: 1px solid #ccc;
 
       .toolSection-input {
-        border-right-color: $inputGray;
+        border-right-color: $inputGrayBorder;
       }
     }
 
     .hasUnit:after {
       color: $infoGray;
+      border-color: $inputGrayBorder;
     }
 
     .toolSection-dropdownWrapper {
@@ -244,33 +259,16 @@
       }
 
       &:after {
-        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
-      }
-
-      &.isDark {
-        .toolSection-dropdown {
-          background-color: #2E354A;
-          color: #fff;
-        }
-
-        &:after {
-          background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' fill='%23A8AABF' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
-          background-color: #2E354A;
-        }
-
-        &:hover {
-          .toolSection-dropdown, &:after {
-            background-color: lighten(#2E354A, 5);
-          }
-
-          &:after {
-            background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' fill='%23FFF' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
-          }
-        }
+        background-color: #D3D4DE;
       }
     }
   }
 
+  .forSlides .jfReport-pane-footer {
+    border-top-color: #dde0ea;
+    background-color: #fff;
+  }
+
   .forAllSlides .pageActionsBar {
     background-color: $white;
 
@@ -360,7 +358,6 @@
 
     &.isSelected {
       background-color: $ctaGreen;
-      color: $white;
 
       svg {
         fill: $white;
@@ -370,8 +367,15 @@
 
   .bigList {
     .toolSection-listItem {
-      & > span:first-child {
-        background-color: #8382a9;
+      & > span:not(.toolSection-listItemName) {
+        background-color: $inputGray;
+        border: 1px solid $inputGrayBorder;
+      }
+
+      &:hover {
+        & > span:not(.toolSection-listItemName) {
+          border-color: $inputGrayBorderHover;
+        }
       }
 
       &.isSelected {
@@ -381,4 +385,35 @@
       }
     }
   }
+
+  .jfReportSelectOption-list:not(.forChart) .jfReportSelectOption-name {
+    background-color: $inputGray;
+    border: 1px solid $inputGrayBorder;
+  }
+
+  .jfReportSelectOption-list.forPageLayer .jfReportSelectOption-name:hover {
+    border-color: $inputGrayBorderHover;
+  }
+
+  .toolSection-dropdownWrapper.isDark {
+    .toolSection-dropdown {
+      background-color: #2E354A;
+      color: #fff;
+    }
+
+    &:after {
+      background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' fill='%23A8AABF' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
+      background-color: #2E354A;
+    }
+
+    &:hover {
+      .toolSection-dropdown, &:after {
+        background-color: lighten(#2E354A, 5);
+      }
+
+      &:after {
+        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' fill='%23FFF' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
 }

package/lib/cjs/styles/_jfReportsChoice.scss

@@ -19,17 +19,17 @@
     background: 0;
 
     &:not(.forPin):before {
+      content: "";
       width: 16px;
       height: 16px;
+      display: inline-block;
+      vertical-align: middle;
       transition: 0.3s;
-      content: "";
       margin-right: 10px;
       border-radius: 3px;
       background-repeat: no-repeat;
       background-position: center;
       background-size: 10px;
-      display: inline-block;
-      vertical-align: top;
       @include inputDefault;
     }
 
@@ -64,16 +64,17 @@
       }
 
       &:hover:before {
-        border-color: #0099FF;
+        border-color: $ctaBlue;
       }
     }
   }
 
   &.hasNotText {
+    display: block;
+
     .jfReportChoice-label {
       &:before {
         margin-right: 0;
-        vertical-align: text-top;
       }
     }
   }
@@ -94,19 +95,19 @@
     &:checked + .jfReportChoice-labelIcon {
       .jfReportChoice-label:before {
         background-image: $jfReportChoice-checkIcon;
-        background-color: #0099FF;
-        border-color: #0099FF;
+        background-color: $ctaBlue;
+        border-color: $ctaBlue;
       }
       .jfReportChoice-label.radio:before {
         background-image: none;
         background-color: transparent;
-        border-color: #0099FF;
+        border-color: $ctaBlue;
       }
       .jfReportChoice-label.radio:after {
         position: absolute;
         left: 4px;
         top: 4px;
-        background-color: #0099FF;
+        background-color: $ctaBlue;
         border-radius: 50%;
         width: 10px;
         height: 10px;

package/lib/cjs/styles/_jfReportsFonts.scss

@@ -6,53 +6,46 @@
 // stylelint-disable
 /* latin-ext */
 @font-face {
-  font-family: 'Circular Std';
+  font-family: "Circular";
+  src: local("Circular Book"), local("Circular-Book"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Book.woff2") format("woff2"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Book.woff") format("woff");
+  font-display: swap;
   font-style: normal;
   font-weight: 400;
-  font-display: block;
-  src: local('CircularXXWeb Regular'), local('CircularXXWeb-Regular'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Regular.woff2) format('woff2'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Regular.woff) format('woff');
 }
 @font-face {
-  font-family: 'Circular Std';
-  font-style: normal;
-  font-weight: 400;
+  font-family: "Circular";
+  src: local("Circular Book Italic"), local("Circular-Book-Italic"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-BookItalic.woff2") format("woff2"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-BookItalic.woff") format("woff");
   font-display: swap;
-  src: local('CircularXXWeb Regular'), local('CircularXXWeb-Regular'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Book.woff2) format('woff2'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Book.woff) format('woff');
-}
-@font-face {
-  font-family: 'Circular Std';
   font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('CircularXXWeb Bold'), local('CircularXXWeb-Bold'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-BoldItalic.woff2) format('woff2'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-BoldItalic.woff) format('woff');
+  font-weight: 400;
 }
 @font-face {
-  font-family: 'Circular Std';
+  font-family: "Circular";
+  src: local("Circular Medium"), local("Circular-Medium"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Medium.woff2") format("woff2"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Medium.woff") format("woff");
+  font-display: swap;
   font-style: normal;
   font-weight: 500;
-  font-display: swap;
-  src: local('CircularXXWeb Medium'), local('CircularXXWeb-Medium'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Medium.woff2) format('woff2'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Medium.woff) format('woff');
 }
 @font-face {
-  font-family: 'Circular Std';
+  font-family: "Circular";
+  src: local("Circular Medium Italic"), local("Circular-Medium-Italic"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-MediumItalic.woff2") format("woff2"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-MediumItalic.woff") format("woff");
+  font-display: swap;
   font-style: italic;
   font-weight: 500;
-  font-display: swap;
-  src: local('CircularXXWeb Medium'), local('CircularXXWeb-Medium'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-MediumItalic.woff2) format('woff2'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-MediumItalic.woff) format('woff');
 }
 @font-face {
-  font-family: 'Circular Std';
+  font-family: "Circular";
+  src: local("Circular Bold"), local("Circular-Bold"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Bold.woff2") format("woff2"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Bold.woff") format("woff");
+  font-display: swap;
   font-style: normal;
   font-weight: 700;
-  font-display: swap;
-  src: local('CircularXXWeb Bold'), local('CircularXXWeb-Bold'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Bold.woff2) format('woff2'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-Bold.woff) format('woff');
 }
 @font-face {
-  font-family: 'Circular Std';
-  font-style: italic;
-  font-weight: 400;
+  font-family: "Circular";
+  src: local("Circular Bold"), local("Circular-Bold"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-BoldItalic.woff2") format("woff2"), url("https://cdn.jotfor.ms/fonts/circular/fonts/Circular-BoldItalic.woff") format("woff");
   font-display: swap;
-  src: local('CircularXXWeb Regular'), local('CircularXXWeb-Regular'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-BookItalic.woff2) format('woff2'), url(https://cdn.jotfor.ms/fonts/circularx/fonts/CircularXXWeb-BookItalic.woff) format('woff');
+  font-style: italic;
+  font-weight: 700;
 }
 @font-face {
   font-family: 'Bitter';

package/lib/cjs/styles/_jfReportsPages.scss

@@ -97,7 +97,7 @@
 .jfReport .forSlides .pageAdder {
   display: flex;
   padding: 10px 20px 10px 16px;
-  background-color: #0099FF;
+  background-color: $ctaBlue;
   border-top: 1px solid #DDE0EA;
   border-radius: 4px;
   box-shadow: 0 -5px 0 rgba(#6A6E8F, 0.05);
@@ -113,7 +113,7 @@
   }
 
   &:hover {
-    background-color: #0099FF;
+    background-color: $ctaBlue;
 
     .jfReportSVG {
       fill: #fff;

package/lib/cjs/styles/_jfReportsPanelElements.scss

@@ -35,8 +35,8 @@
     }
 
     &-dropdown, &-input {
+      border: 1px solid transparent;
       font-size: 0.938rem;
-      @include inputDefault;
       height: 40px;
     }
 
@@ -73,7 +73,7 @@
       }
 
       &.forSegments {
-        height: 54px;
+        height: 38px;
         border-radius: 4px;
       }
 
@@ -128,6 +128,7 @@
             height: 80px;
             border-radius: 4px;
           }
+
           span.toolSection-listItemName {
             font-size: 16px;
             margin-top: 8px;
@@ -161,6 +162,10 @@
       }
     }
 
+    &.isBig .forSegments {
+      height: 54px;
+    }
+
     &-orientation {
       &Item {
         color: $infoGray;
@@ -370,7 +375,7 @@
 
     label[for="fileUploader"] {
       .jfReportButton {
-        background-color: #0099FF;
+        background-color: $ctaBlue;
         color: $white;
         border: none;
         font-size: 16px;
@@ -442,7 +447,6 @@
 
       .uploadInfo {
         margin-top: 10px;
-        color: #F3F3FE;
 
         &.isError {
           color: $danger;
@@ -490,7 +494,7 @@
         bottom: 0;
         left: 0;
         background-color: rgba(66, 119, 255, 0.5);
-        border: 3px solid #0099FF;
+        border: 3px solid $ctaBlue;
         z-index: 1;
       }
 
@@ -531,7 +535,7 @@
       font-weight: 500;
 
       &.isSuccess {
-        background-color: #0099FF;
+        background-color: $ctaBlue;
       }
       &.isDanger {
         background-color: #FF6100;
@@ -553,7 +557,7 @@
       font-weight: 500;
 
       &.isSuccess {
-        background-color: #0099FF;
+        background-color: $ctaBlue;
       }
     }
 
@@ -637,7 +641,7 @@
       height: 38px;
       right: 0;
       font-size: 15px;
-      border-left: 1px solid #303339;
+      border-left: 1px solid transparent;
       align-items: center;
       width: 38px;
       justify-content: center;
@@ -685,9 +689,7 @@
     width: 1px;
     top: 0;
     bottom: 0;
-    background-color: #303339;
     right: 38px;
-    background-image: none;
   }
 
   .toolSection-dropdown {

package/lib/cjs/styles/_jfReportsPanels.scss

@@ -9,8 +9,6 @@
   position: absolute;
 
   &-pane {
-    font-size: 0.938rem;
-
     // Panel Layout //
 
     .toolItem {
@@ -198,6 +196,7 @@
 
     .toolTabs {
       flex-shrink: 0;
+      font-size: 0.875rem;
 
       &-indicator {
         left: 0;

package/lib/cjs/styles/_jfReportsSVG.scss

@@ -44,10 +44,6 @@
 
   .toolItem-icon {
     color: $additionalGray;
-
-    .icon-bar path {
-      fill: $additionalGray;
-    }
   }
 
   .icon-fit {

package/lib/cjs/styles/_jfReportsSortableList.scss

@@ -32,9 +32,6 @@
       fill: #2c3345;
       color: #2c3345;
     }
-    .icon-drag {
-      fill: #999FA8;
-    }
   }
 
   &-drag {
@@ -88,14 +85,13 @@
     svg {
       display: block;
       width: 12px;
-      fill: #ffffff;
     }
   }
 
   &-name {
     width: calc(100% - 28px);
     background-color: #555F6E;
-    border-radius: 2px;
+    border-radius: 4px;
     padding: 9px 12px;
     display: flex;
     align-items: center;
@@ -109,6 +105,21 @@
     transition: $transition;
     min-width: 0;
 
+    &:not(.isDark) {
+      .jfReportSelectOption-text {
+        color: #2b3245;
+      }
+
+      .jfReportSelectOption-icon {
+        fill: #8483A9;
+        color: #8483A9;
+      }
+    }
+
+    .forPin:hover {
+      opacity: 1;
+    }
+
     &.isDark {
       color: #f2f2f2;
       svg {
@@ -170,7 +181,7 @@
   }
 
   & + .jfReportSelectOption {
-    margin-top: 20px;
+    margin-top: 10px;
   }
 
   .forChart & {
@@ -259,10 +270,6 @@
       }
     }
 
-    .jfReportSelectOption-name {
-      border: 1px solid #303339;
-    }
-
     &.withColorSelect {
       .jfReportSelectOption-name {
         padding-right: 26px;
@@ -308,10 +315,6 @@
       }
     }
 
-    &.forPageLayer .jfReportSelectOption-name:hover {
-      border-color: $inputGrayBorderHover;
-    }
-
     &.withDelete .jfReportSelectOption-name:hover .jfReportSelectOption-delete {
       opacity: 1;
     }