diff --git a/src/components/Agentic/IncidentTemplate/index.tsx b/src/components/Agentic/IncidentTemplate/index.tsx
index dc8c19c9e..c095d8b45 100644
--- a/src/components/Agentic/IncidentTemplate/index.tsx
+++ b/src/components/Agentic/IncidentTemplate/index.tsx
@@ -187,13 +187,6 @@ export const IncidentTemplate = () => {
onSetMCPServer={handleSetMCPServer}
onDeleteMCPServer={handleDeleteMCPServer}
/>
-
{agentIdToUpdate && (
theme.colors.v3.text.primary};
- }
- }
-`;
-
export const StyledOverlay = styled(Overlay)`
align-items: center;
`;
diff --git a/src/components/Errors/EmptyState/index.tsx b/src/components/Errors/EmptyState/index.tsx
index 56257f13c..0f4f7e3b9 100644
--- a/src/components/Errors/EmptyState/index.tsx
+++ b/src/components/Errors/EmptyState/index.tsx
@@ -27,7 +27,8 @@ const getPresetContent = (preset: EmptyStatePreset) => {
},
noDismissedData: {
icon: ,
- title: "No dismissed errors available"
+ title: "No dismissed errors available",
+ message: "Click above to see all errors"
},
selectAsset: {
icon: ,
diff --git a/src/components/Errors/GlobalErrorsList/styles.ts b/src/components/Errors/GlobalErrorsList/styles.ts
index 104d1dfab..c9ae37d20 100644
--- a/src/components/Errors/GlobalErrorsList/styles.ts
+++ b/src/components/Errors/GlobalErrorsList/styles.ts
@@ -57,6 +57,10 @@ export const BackToAllErrorsButton = styled.button`
align-items: center;
cursor: pointer;
color: ${({ theme }) => theme.colors.v3.text.primary};
+
+ &:hover {
+ color: ${({ theme }) => theme.colors.v3.text.link};
+ }
`;
export const ToolbarContainer = styled.div`
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/EmptyState/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/EmptyState/index.tsx
index 8f718d3aa..35bda5383 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/EmptyState/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/EmptyState/index.tsx
@@ -27,7 +27,8 @@ const getPresetContent = (preset: EmptyStatePreset, theme: DefaultTheme) => {
},
noDismissedData: {
icon: ,
- title: "No dismissed issues"
+ title: "No dismissed issues",
+ message: "Click above to see all issues"
},
noInsightsYet: {
icon: ,
diff --git a/src/components/Insights/InsightsCatalog/styles.ts b/src/components/Insights/InsightsCatalog/styles.ts
index 5852fb3e5..3899e98db 100644
--- a/src/components/Insights/InsightsCatalog/styles.ts
+++ b/src/components/Insights/InsightsCatalog/styles.ts
@@ -87,6 +87,10 @@ export const BackToAllInsightsButton = styled.button`
align-items: center;
cursor: pointer;
color: ${({ theme }) => theme.colors.v3.text.primary};
+
+ &:hover {
+ color: ${({ theme }) => theme.colors.v3.text.link};
+ }
`;
export const MarkingAsReadToolbarActionsContainer = styled.div`
diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/index.tsx
index f6dbb48cd..1b9de0f26 100644
--- a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/index.tsx
+++ b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/index.tsx
@@ -29,7 +29,7 @@ export const ErrorCard = ({ title, description }: ErrorCardProps) => {
startTimer();
};
- const handleCrossButtonClick = () => {
+ const handleCloseButtonClick = () => {
setIsVisible(false);
};
@@ -62,11 +62,9 @@ export const ErrorCard = ({ title, description }: ErrorCardProps) => {
{title}
{description}
-
+
+
+
);
diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/styles.ts b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/styles.ts
index ff857715b..cb3020213 100644
--- a/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/styles.ts
+++ b/src/components/RecentActivity/CreateEnvironmentWizard/ErrorsPanel/ErrorCard/styles.ts
@@ -3,7 +3,6 @@ import {
bodySemiboldTypography,
subscriptRegularTypography
} from "../../../../common/App/typographies";
-import { Button } from "../../../../common/v3/Button";
import type { ContainerProps } from "./types";
export const Container = styled.div`
@@ -22,14 +21,14 @@ export const Container = styled.div`
}
&.${$transitionClassName}-enter-active {
transform: translateX(0);
- transition: all ${$transitionDuration}ms ease;
+ transition: all ${$transitionDuration}ms ease-in-out;
}
&.${$transitionClassName}-exit {
transform: translateX(0);
}
&.${$transitionClassName}-exit-active {
transform: translateX(100%);
- transition: all ${$transitionDuration}ms ease;
+ transition: all ${$transitionDuration}ms ease-in-out;
}
`}
`;
@@ -50,11 +49,17 @@ export const Description = styled.div`
color: ${({ theme }) => theme.colors.v3.text.secondary};
`;
-export const CrossButton = styled(Button)`
- padding: 0;
+export const CloseButton = styled.button`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+ background: none;
+ border: none;
+ cursor: pointer;
`;
export const ErrorIconContainer = styled.div`
display: flex;
- color: ${({ theme }) => theme.colors.v3.icon.white};
+ color: ${({ theme }) => theme.colors.v3.icon.primary};
`;
diff --git a/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx b/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx
index f052d0648..07ff5f559 100644
--- a/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx
+++ b/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx
@@ -11,7 +11,8 @@ export const EndpointOption = ({
hideCopyIcon,
onClick,
metric,
- isHeader
+ isHeader,
+ className
}: EndpointOptionProps) => {
const title = `${serviceName} ${route}`;
@@ -28,14 +29,14 @@ export const EndpointOption = ({
};
return (
-
+
- {serviceName}
+ {serviceName}
{spanCodeObjectId && onSpanLinkClick ? (
diff --git a/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts b/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts
index fb3e8e6fd..434e4f448 100644
--- a/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts
+++ b/src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts
@@ -1,8 +1,12 @@
import styled, { css } from "styled-components";
-import { footnoteRegularTypography } from "../../App/typographies";
+import { bodyRegularTypography } from "../../App/typographies";
import { CopyButton } from "../../v3/CopyButton";
import { Link as CommonLink } from "../../v3/Link";
-import type { EndpointNameProps, SpanLinkProps } from "./types";
+import type {
+ EndpointNameProps,
+ ServiceNameProps,
+ SpanLinkProps
+} from "./types";
export const StyledCopyButton = styled(CopyButton)`
display: none;
@@ -10,7 +14,7 @@ export const StyledCopyButton = styled(CopyButton)`
`;
export const Container = styled.div`
- ${footnoteRegularTypography}
+ ${bodyRegularTypography}
display: flex;
gap: 4px;
@@ -52,14 +56,15 @@ export const EndpointName = styled.div`
: ""}
`;
-export const ServiceName = styled.span`
+export const ServiceName = styled.span`
max-width: 100px;
min-width: 30px;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- color: ${({ theme }) => theme.colors.v3.text.tertiary};
+ color: ${({ theme, $selected }) =>
+ $selected ? theme.colors.v3.text.secondary : theme.colors.v3.text.tertiary};
`;
export const Route = styled.span`
@@ -70,6 +75,8 @@ export const Route = styled.span`
`;
export const RouteLink = styled(CommonLink)`
+ ${bodyRegularTypography}
+
${({ $selected }) =>
$selected
? css`
diff --git a/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts b/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts
index 60da40e6b..7672663f3 100644
--- a/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts
+++ b/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts
@@ -11,6 +11,7 @@ export interface EndpointOptionProps {
label: string;
};
isHeader?: boolean;
+ className?: string;
}
export interface EndpointNameProps {
@@ -18,6 +19,10 @@ export interface EndpointNameProps {
$clickable?: boolean;
}
+export interface ServiceNameProps {
+ $selected?: boolean;
+}
+
export interface SpanLinkProps {
$selected?: boolean;
}
diff --git a/src/components/common/AffectedEndpointsSelector/index.tsx b/src/components/common/AffectedEndpointsSelector/index.tsx
index 5be1268c3..22768085f 100644
--- a/src/components/common/AffectedEndpointsSelector/index.tsx
+++ b/src/components/common/AffectedEndpointsSelector/index.tsx
@@ -70,7 +70,7 @@ export const AffectedEndpointsSelector = ({
isDisabled={isDisabled}
listHeader={
- theme.colors.v3.text.tertiary};
-
- ${footnoteRegularTypography}
`;
export const ServicePart = styled.div`
width: 151px;
`;
+
+export const ListHeaderEndpointOption = styled(EndpointOption)`
+ ${footnoteRegularTypography}
+
+ & > ${RouteLink} {
+ ${footnoteRegularTypography}
+ }
+`;