Improve styles (#1408)

* Improve styles

* Remove bottom prompt input from the Template page

Author: kshmidt-digma

src/components/Agentic/IncidentTemplate/index.tsx

@@ -187,13 +187,6 @@ export const IncidentTemplate = () => {
         onSetMCPServer={handleSetMCPServer}
         onDeleteMCPServer={handleDeleteMCPServer}
       />
-      <s.StyledAgentPromptInput
-        onChange={handleInputChange}
-        onSubmit={handleInputSubmit}
-        value={""}
-        isDisabled={true}
-        placeholder={"Enter a custom prompt"}
-      />
       {agentIdToUpdate && (
         <Overlay>
           <MCPServerDialog

src/components/Agentic/IncidentTemplate/styles.ts

@@ -55,20 +55,6 @@ export const StyledIncidentPromptInput = styled(PromptInput)`
   }
 `;
 
-export const StyledAgentPromptInput = styled(PromptInput)`
-  height: 96px;
-  ${/* TODO: change to color from the theme */ ""}
-  border: 1px solid #6063f6;
-
-  & ${TextArea} {
-    height: 100%;
-
-    &::placeholder {
-      color: ${({ theme }) => theme.colors.v3.text.primary};
-    }
-  }
-`;
-
 export const StyledOverlay = styled(Overlay)`
   align-items: center;
 `;

src/components/Errors/EmptyState/index.tsx

@@ -27,7 +27,8 @@ const getPresetContent = (preset: EmptyStatePreset) => {
     },
     noDismissedData: {
       icon: <CheckCircleIcon size={32} color={"currentColor"} />,
-      title: "No dismissed errors available"
+      title: "No dismissed errors available",
+      message: "Click above to see all errors"
     },
     selectAsset: {
       icon: <ErrorIcon size={32} color={"currentColor"} />,

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`

src/components/Insights/InsightsCatalog/InsightsPage/EmptyState/index.tsx

@@ -27,7 +27,8 @@ const getPresetContent = (preset: EmptyStatePreset, theme: DefaultTheme) => {
     },
     noDismissedData: {
       icon: <CardsColoredIcon size={33} themeKind={themeKind} />,
-      title: "No dismissed issues"
+      title: "No dismissed issues",
+      message: "Click above to see all issues"
     },
     noInsightsYet: {
       icon: <CardsColoredIcon size={33} themeKind={themeKind} />,

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`

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) => {
           <s.Title>{title}</s.Title>
           <s.Description>{description}</s.Description>
         </s.ContentContainer>
-        <s.CrossButton
-          buttonType={"tertiary"}
-          icon={CrossIcon}
-          onClick={handleCrossButtonClick}
-        />
+        <s.CloseButton onClick={handleCloseButtonClick}>
+          <CrossIcon color={"currentColor"} />
+        </s.CloseButton>
       </s.Container>
     </CSSTransition>
   );

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<ContainerProps>`
@@ -22,14 +21,14 @@ export const Container = styled.div<ContainerProps>`
     }
     &.${$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};
 `;

src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx

@@ -11,7 +11,8 @@ export const EndpointOption = <T,>({
   hideCopyIcon,
   onClick,
   metric,
-  isHeader
+  isHeader,
+  className
 }: EndpointOptionProps<T>) => {
   const title = `${serviceName} ${route}`;
 
@@ -28,14 +29,14 @@ export const EndpointOption = <T,>({
   };
 
   return (
-    <s.Container>
+    <s.Container className={className}>
       <Tooltip title={title}>
         <s.EndpointName
           $selected={selected}
           $clickable={Boolean(onClick)}
           onClick={handleEndpointNameClick}
         >
-          <s.ServiceName>{serviceName}</s.ServiceName>
+          <s.ServiceName $selected={selected}>{serviceName}</s.ServiceName>
           <s.Route>
             {spanCodeObjectId && onSpanLinkClick ? (
               <s.RouteLink $selected={selected} onClick={handleRouteLinkClick}>

src/components/common/AffectedEndpointsSelector/EndpointOption/styles.ts

@@ -1,16 +1,20 @@
 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;
   padding: 0;
 `;
 
 export const Container = styled.div`
-  ${footnoteRegularTypography}
+  ${bodyRegularTypography}
 
   display: flex;
   gap: 4px;
@@ -52,14 +56,15 @@ export const EndpointName = styled.div<EndpointNameProps>`
       : ""}
 `;
 
-export const ServiceName = styled.span`
+export const ServiceName = styled.span<ServiceNameProps>`
   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)<SpanLinkProps>`
+  ${bodyRegularTypography}
+
   ${({ $selected }) =>
     $selected
       ? css`