diff --git a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts
index 18993ae5d3..86b2339658 100644
--- a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts
+++ b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts
@@ -81,6 +81,8 @@ const OptionsTab = styled.div`
box-shadow: 0px 2px 3px 2px #0d1117;
align-items: end;
+ z-index: 1000;
+
margin: 4px;
padding: 4px;
@@ -107,6 +109,8 @@ const OptionsTabSize = styled.div<{
justify-content: center;
cursor: pointer;
+ z-index: 1000;
+
background: ${({ backgroundColor }) =>
backgroundColor ? backgroundColor : 'transparent'};
diff --git a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx
index 7a1c395721..af70b202f7 100644
--- a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx
+++ b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx
@@ -35,6 +35,7 @@ import {
LabelSettingsArrow,
SliderContainer,
AlphaSlider,
+ LineWidthOptionsCont,
} from './FloatingToolbarSettingsCss';
import { SketchPicker } from 'react-color';
import {
@@ -487,17 +488,25 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
closeAllOptions('lineSize');
}}
>
-
+
+
+
+
{selectedDrawnShape &&
- (isLineSizeOptionTabActive ||
- isBorderSizeOptionTabActive) && (
+ isLineSizeOptionTabActive && (
{selectedDrawnShape &&
- (isLineStyleOptionTabActive ||
- isBorderStyleOptionTabActive) && (
+ isLineStyleOptionTabActive && (
-
+
+
+
+
+ {selectedDrawnShape &&
+ isBorderSizeOptionTabActive && (
+
+ {sizeOptions.map(
+ (item, index) => (
+ ,
+ ) => {
+ e.stopPropagation();
+ handleEditSize(
+ item.value,
+ isLineSizeOptionTabActive,
+ isBorderSizeOptionTabActive,
+ );
+ }}
+ >
+ {item.icon}{' '}
+ {item.name}
+
+ ),
+ )}
+
+ )}
+ {selectedDrawnShape &&
+ isBorderStyleOptionTabActive && (
+
+ {styleOptions.map(
+ (item, index) => (
+ ,
+ ) => {
+ e.stopPropagation();
+ handleEditStyle(
+ item.value,
+ isLineStyleOptionTabActive,
+ isBorderStyleOptionTabActive,
+ );
+ }}
+ >
+ {' '}
+ {item.name}
+
+ ),
+ )}
+
+ )}
@@ -884,7 +978,8 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
>
{isFibBackgroundTabActive &&
- index + 1 === selectedFibLevel && (
+ index + 1 ===
+ selectedFibLevel && (
- disabled ? 'brightness(1)' : 'brightness(1.2)'};
- }
`;
const LabelStyleContainer = styled.div`
@@ -170,10 +165,14 @@ const LineSettingsLeft = styled.div`
`;
const LineSettingsRight = styled.div`
- align-items: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
+ align-items: center;
+ justify-content: center;
+
+ position: relative;
+
gap: 10px;
`;
@@ -331,6 +330,24 @@ const StyledCheckbox = styled.div<{
}
`;
+const LineWidthOptionsCont = styled.div<{
+ disabled: boolean;
+}>`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background: ${({ disabled }) => (disabled ? '#242f3f' : '#2f3d52')};
+
+ width: 100%;
+ height: 100%;
+
+ &:hover {
+ filter: ${({ disabled }) =>
+ disabled ? 'brightness(1)' : 'brightness(1.2)'};
+ }
+`;
+
const LineWidthOptions = styled.div<{
backgroundColor: string | undefined;
}>`
@@ -568,4 +585,5 @@ export {
LabelSettingsArrow,
SliderContainer,
AlphaSlider,
+ LineWidthOptionsCont,
};