🐛 Fix gradient background image

frontend/resources/styles/main-default.scss

@@ -62,6 +62,5 @@
 @import "main/partials/tab-container";
 @import "main/partials/user-settings";
 @import "main/partials/workspace";
-@import "main/partials/color-bullet";
 @import "main/partials/exception-page";
 @import "main/partials/signup-questions";

frontend/resources/styles/main/partials/color-bullet.scss

@@ -1,209 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.color-bullet {
-  border: 2px solid $color-gray-30;
-  position: relative;
-  width: var(--bullet-size);
-  height: var(--bullet-size);
-
-  &:hover {
-    border-color: $color-primary;
-  }
-}
-.color-cell {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 1fr auto;
-  height: 100%;
-  justify-items: center;
-  width: 65px;
-
-  .color-bullet {
-    border: 2px solid $color-gray-30;
-    position: relative;
-    width: var(--bullet-size);
-    height: var(--bullet-size);
-
-    &:hover {
-      border-color: $color-primary;
-    }
-  }
-
-  & > * {
-    overflow: hidden;
-  }
-}
-
-.color-cell.current {
-  .color-bullet {
-    border-color: $color-gray-30;
-  }
-}
-
-ul.palette-menu .color-bullet {
-  width: 20px;
-  height: 20px;
-  border: 1px solid $color-gray-30;
-  margin-right: 5px;
-  background-size: 8px;
-}
-.color-cell.add-color .color-bullet {
-  align-items: center;
-  background-color: $color-gray-50;
-  border: 3px dashed $color-gray-30;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 1rem;
-  padding: 0.6rem;
-
-  svg {
-    fill: $color-gray-10;
-    height: 30px;
-    width: 30px;
-  }
-}
-
-.colorpicker-content .color-bullet {
-  grid-area: color;
-  width: 20px;
-  height: 20px;
-  border: 1px solid $color-gray-30;
-  background-size: 8px;
-  overflow: hidden;
-}
-
-.asset-section .asset-list-item .color-bullet {
-  border: 1px solid $color-gray-30;
-  height: 20px;
-  margin-right: $size-1;
-  width: 20px;
-}
-.tool-window-content .asset-list .asset-list-item {
-  &:hover {
-    .color-bullet {
-      border: 1px solid $color-primary;
-    }
-  }
-}
-
-.color-cell.add-color:hover .color-bullet {
-  border-color: $color-gray-30;
-
-  svg {
-    fill: $color-gray-30;
-  }
-}
-
-.color-bullet {
-  display: flex;
-  flex-direction: row;
-  border-radius: 50%;
-
-  & .color-bullet-wrapper {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-      left center;
-    background-color: $color-white;
-    clip-path: circle(50%);
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    width: 100%;
-  }
-
-  &.is-gradient {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-      left center;
-    background-color: $color-white;
-  }
-
-  & .color-bullet-wrapper > * {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.color-data .color-bullet.multiple {
-  background: transparent;
-
-  &::before {
-    content: "?";
-  }
-}
-
-.color-data .color-bullet {
-  border: 1px solid $color-gray-30;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $color-gray-10;
-  flex-shrink: 0;
-  height: 20px;
-  margin: 5px 4px 0 0;
-  width: 20px;
-
-  &.palette-th {
-    align-items: center;
-    border: 1px solid $color-gray-30;
-    display: flex;
-    justify-content: center;
-
-    svg {
-      fill: $color-gray-30;
-      height: 16px;
-      width: 16px;
-    }
-
-    &:hover {
-      border-color: $color-primary;
-      svg {
-        fill: $color-primary;
-      }
-    }
-  }
-}
-
-.colorpicker-content .libraries .selected-colors .color-bullet {
-  grid-area: auto;
-  margin-bottom: 0.25rem;
-  cursor: pointer;
-
-  &:hover {
-    border-color: $color-primary;
-    z-index: 10;
-  }
-
-  &.button {
-    background: $color-white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &.button svg {
-    width: 12px;
-    height: 12px;
-    fill: $color-gray-30;
-  }
-
-  &.plus-button svg {
-    width: 8px;
-    height: 8px;
-    fill: $color-black;
-  }
-}
-
-.color-bullet.is-not-library-color {
-  border-radius: $br3;
-  overflow: hidden;
-
-  & .color-bullet-wrapper {
-    clip-path: none;
-  }
-}

frontend/src/app/main/ui/components/color_bullet.scss

@@ -39,13 +39,13 @@
     }
   }
   &.is-gradient {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
       left center;
     background-color: var(--color-bullet-background-color);
     transform: rotate(-90deg);
   }
   &.is-transparent {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
       left center;
     background-color: var(--color-bullet-background-color);
   }

frontend/src/app/main/ui/workspace/colorpicker/gradients.scss

@@ -19,7 +19,7 @@
   height: 100%;
   width: 100%;
   border-radius: $br-6;
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
     left center;
 }
 

frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss

@@ -54,12 +54,13 @@
   }
 
   &.opacity {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
       var(--background-repeat) center;
 
     &::after {
       content: "";
       position: absolute;
+      border-radius: $br-6;
       width: 100%;
       height: 100%;
       background: linear-gradient(