Small fix

src/components/Navigation/CodeButtonMenu/CodeButtonMenu.stories.tsx

@@ -63,6 +63,24 @@ export const NotInstrumented: Story = {
   }
 };
 
+export const NotDataYet: Story = {
+  args: {
+    codeContext: {
+      spans: {
+        assets: [],
+        errorData: null
+      },
+      isInstrumented: true,
+      methodId: "method id",
+      displayName: "code location display name",
+      hasMissingDependency: false,
+      canInstrumentMethod: true
+    },
+    isAutoFixing: false,
+    isAnnotationAdding: false
+  }
+};
+
 export const AddingTheAnnotation: Story = {
   args: {
     codeContext: {

src/components/Navigation/CodeButtonMenu/index.tsx

@@ -53,7 +53,6 @@ export const CodeButtonMenu = (props: CodeButtonMenuProps) => {
 
   const renderNoObservability = () => (
     <s.EmptyStateContainer>
-      <s.Title>No observability</s.Title>
       <s.Text>Click to observe this code in runtime</s.Text>
       <s.AddObservabilityButtonContainer>
         {props.isAnnotationAdding && <Spinner />}
@@ -73,11 +72,13 @@ export const CodeButtonMenu = (props: CodeButtonMenuProps) => {
 
   const renderNoData = () => (
     <s.EmptyStateContainer>
-      <s.Title>No data yet</s.Title>
+      <s.Title>
+        No data received yet,{" "}
+        <s.Link href={"#"} onClick={handleTroubleshootingLinkClick}>
+          need help?
+        </s.Link>
+      </s.Title>
       <s.Text>Trigger any action to analyze runtime data</s.Text>
-      <s.Link href={"#"} onClick={handleTroubleshootingLinkClick}>
-        Not seeing your application data?
-      </s.Link>
     </s.EmptyStateContainer>
   );
 
@@ -102,7 +103,7 @@ export const CodeButtonMenu = (props: CodeButtonMenuProps) => {
 
   return (
     <Popup
-      height={"78px"}
+      height={"86px"}
       header={
         props.codeContext.hasMissingDependency
           ? renderMissingDependency()

src/components/Navigation/CodeButtonMenu/styles.ts

@@ -5,11 +5,11 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 270px;
+  gap: 4px;
 `;
 
 export const CodeLocation = styled.div`
   display: flex;
-  padding: 8px;
   color: ${({ theme }) => theme.colors.v3.text.secondary};
   gap: 4px;
   align-items: center;
@@ -30,9 +30,8 @@ export const CodeIconContainer = styled.div`
 export const EmptyStateContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
   font-size: 14px;
-  padding: 0 8px;
 `;
 
 export const Title = styled.div`

src/components/Navigation/KebabMenu/index.tsx

@@ -62,7 +62,7 @@ export const KebabMenu = (props: KebabMenuProps) => {
             ? [
                 {
                   id: "localEngine",
-                  groupName: "localEngine",
+                  groupName: "settings",
                   label: "Local Engine",
                   icon: <s.LocalEngineStatusBadge />,
                   onClick: handleLocalEngineClick

src/components/common/ToggleSwitch/styles.ts

@@ -62,10 +62,10 @@ const getSwitchContainerColor = (
   if (isDisabled) {
     switch (theme.mode) {
       case "light":
-        return isChecked ? "#E5E5FF" : "#E6E8F2";
+        return isChecked ? "#4B4DB4" : "#E6E8F2";
       case "dark":
       case "dark-jetbrains":
-        return isChecked ? "#28293E" : "#27282E";
+        return isChecked ? "#4B4DB4" : "#27282E";
     }
   }
 
@@ -97,11 +97,11 @@ const getCircleColor = (
   if (isDisabled) {
     switch (theme.mode) {
       case "light": {
-        return "#E6E8F2";
+        return isChecked ? "#7C90F8" : "#E6E8F2";
       }
       case "dark":
       case "dark-jetbrains":
-        return "#2C2E33";
+        return isChecked ? "#7C90F8" : "#2C2E33";
     }
   }