feat: add new overlapping behaviour

deriv-com · Nov 11, 2024 · 756c88e · 756c88e
1 parent 40bd516
commit 756c88e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 30 deletions.
diff --git a/sass/_themes.scss b/sass/_themes.scss
@@ -87,7 +87,7 @@ $color-green-3: #00a79e;
 $color-green-4: #008079;
 $color-orange: #ff6444;
 $color-yellow: #ffad3a;
-$color-blue: #377cfc;
+$color-blue: #2c9aff;
 
 /* Preserve legacy variables */
 /* Primary */

diff --git a/sass/components/_barrier.scss b/sass/components/_barrier.scss
@@ -83,14 +83,18 @@
 
 .drag-price {
     display: flex;
-    height: 24px;
-    top: -12px;
+    height: 21px;
+    top: -10px;
     position: absolute;
     right: -1px;
-    background-color: $color-blue;
     justify-content: space-between;
+    border: 1px solid;
     border-radius: 4px;
 
+    @include themify($themes) {
+        background: themed('DefaultMain');
+    }
+
     .arrow-icon {
         height: 41px;
         padding: 4px 0px;
@@ -104,10 +108,8 @@
 .price {
     display: block;
     font-size: 12px;
-    font-weight: bold;
     line-height: 18px;
     overflow: unset;
-    padding: 3px 1px;
     position: relative;
     right: 45px;
     text-align: center;
@@ -116,19 +118,15 @@
     &--zero {
         color: $color-blue;
         @include themify($themes) {
-            background-color: themed('DefaultBg');
+            /* stylelint-disable number-max-precision, plugin/no-unsupported-browser-features */
+            background-image: linear-gradient(
+                rgba(255, 255, 255, 0.001) 30%,
+                themed('DefaultBg') 50%,
+                rgba(255, 255, 255, 0.001) 75%
+            );
+            /* stylelint-enable number-max-precision, plugin/no-unsupported-browser-features */
         }
     }
-    &-overlay {
-        /* rtl:begin:ignore */
-        background-color: $color-blue;
-        height: 24px;
-        opacity: 0.3;
-        position: absolute;
-        right: -10px;
-        top: -12px;
-        /* rtl:end:ignore */
-    }
 }
 
 .draggable {
@@ -144,10 +142,16 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        margin-left: 3px;
+        padding-left: 3px;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+
+        @include themify($themes) {
+            background: themed('DefaultMain');
+        }
 
         div {
-            background-color: $color-white;
+            background-color: $color-blue;
             height: 1px;
             margin: 1px;
             width: 8px;

diff --git a/src/components/PriceLine.tsx b/src/components/PriceLine.tsx
@@ -59,7 +59,7 @@ const PriceLine = ({
     if (!showBarrier) return null;
 
     const width = priceLineWidth + 12;
-    const price_right_offset = (isOverlappingWithPriceLine ? width - overlappedBarrierWidth : 0) + (isMobile ? 20 : 3);
+    const price_right_offset = isMobile ? 20 : 3;
 
     return (
         <div
@@ -82,7 +82,7 @@ const PriceLine = ({
                         style={{
                             borderTopColor: color,
                             borderTopStyle: lineStyle as React.CSSProperties['borderTopStyle'],
-                            width: `calc(100% - ${width}px + ${!isMobile ? overlappedBarrierWidth : 0}px)`,
+                            width: `calc(100% - ${width}px + ${isMobile ? 0 : overlappedBarrierWidth - 4}px)`,
                         }}
                     />
                 )}
@@ -91,8 +91,10 @@ const PriceLine = ({
                     <div
                         className='drag-price'
                         style={{
-                            backgroundColor: color,
-                            width: isOverlappingWithPriceLine ? overlappedBarrierWidth : width,
+                            backgroundColor: isOverlappingWithPriceLine ? 'rgba(12, 40, 247, 0.16)' : '',
+                            color,
+                            borderColor: color,
+                            width: draggable && isOverlappingWithPriceLine ? width + 6 : width - 6,
                             opacity,
                             right: price_right_offset,
                         }}
@@ -103,7 +105,7 @@ const PriceLine = ({
                             style={{
                                 color: isOverlappingWithPriceLine ? color : '',
                                 right: isOverlappingWithPriceLine
-                                    ? overlappedBarrierWidth + priceDisplay.length * 8 - (!draggable ? 16 : 0)
+                                    ? overlappedBarrierWidth + 6 + priceDisplay.length * 8 + (draggable ? 16 : 0)
                                     : 0,
                             }}
                         >
@@ -114,12 +116,6 @@ const PriceLine = ({
                             <PriceLineArrow offScreenDirection={offScreenDirection} color={color} />
                         )}
                     </div>
-                    {isOverlappingWithPriceLine && (
-                        <div
-                            className='price-overlay'
-                            style={{ backgroundColor: color, width: width - overlappedBarrierWidth + 6, right: isMobile ? 20 : 3 }}
-                        />
-                    )}
                 </div>
                 {title && (
                     <PriceLineTitle