chore: round barrier corners

deriv-com · Nov 5, 2024 · 2127135 · 2127135
1 parent 01ab016
commit 2127135
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/chart_app/lib/deriv_chart_wrapper.dart b/chart_app/lib/deriv_chart_wrapper.dart
@@ -281,7 +281,6 @@ class DerivChartWrapperState extends State<DerivChartWrapper> {
                                   style: HorizontalBarrierStyle(
                                       color: latestTickColor,
                                       hasArrow: false,
-                                      labelHeight: 26,
                                       textStyle: TextStyle(
                                         fontSize: 12,
                                         height: 1.8,

diff --git a/sass/components/_barrier.scss b/sass/components/_barrier.scss
@@ -96,6 +96,7 @@
     right: -1px;
     background-color: $color-blue;
     justify-content: space-between;
+    border-radius: 4px;
 
     .arrow-icon {
         height: 41px;

diff --git a/src/components/PriceLine.tsx b/src/components/PriceLine.tsx
@@ -95,6 +95,8 @@ const PriceLine = ({
                             width: isOverlappingWithPriceLine ? overlappedBarrierWidth : width,
                             opacity,
                             right: price_right_offset,
+                            borderTopRightRadius: isOverlappingWithPriceLine ? 0 : 4,
+                            borderBottomRightRadius: isOverlappingWithPriceLine ? 0 : 4,
                         }}
                     >
                         <HamburgerDragIcon />
@@ -117,7 +119,13 @@ const PriceLine = ({
                     {isOverlappingWithPriceLine && (
                         <div
                             className='price-overlay'
-                            style={{ backgroundColor: color, width: width - overlappedBarrierWidth + 6, right: isMobile ? 20 : 3 }}
+                            style={{
+                                backgroundColor: color,
+                                width: width - overlappedBarrierWidth + 6,
+                                right: isMobile ? 20 : 3,
+                                borderTopRightRadius: isOverlappingWithPriceLine ? 4 : 0,
+                                borderBottomRightRadius: isOverlappingWithPriceLine ? 4 : 0,
+                            }}
                         />
                     )}
                 </div>