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} + } +`;