import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import classNames from 'classnames';
-import { CloseIcon, DestructiveIcon, FlagWarningIcon, Theme, themeColor } from 'design-system';
+import {
+ CloseIcon,
+ FlagWarningIcon,
+ InteractiveIcon,
+ Theme,
+ themeBorder,
+ themeColor,
+} from 'design-system';
import * as React from 'react';
import { ChartLegendIcon } from '../../components/icons/ChartLegendIcon';
import { translateWithParameters } from '../../helpers/l10n';
const isActionable = removeMetric !== undefined;
return (
- <StyledLegendItem className={classNames('sw-px-2 sw-py-1 sw-rounded-pill', className)}>
+ <StyledLegendItem
+ className={classNames('sw-px-2 sw-py-1 sw-rounded-2', className)}
+ isActionable={isActionable}
+ >
{showWarning ? (
- <FlagWarningIcon className="sw-mx-2" />
+ <FlagWarningIcon className="sw-mr-2" />
) : (
- <ChartLegendIcon className="sw-mx-2" index={index} />
+ <ChartLegendIcon className="sw-mr-2" index={index} />
)}
<span className="sw-body-sm" style={{ color: themeColor('graphCursorLineColor')({ theme }) }}>
{name}
</span>
{isActionable && (
- <DestructiveIcon
+ <InteractiveIcon
Icon={CloseIcon}
aria-label={translateWithParameters('project_activity.graphs.custom.remove_metric', name)}
className="sw-ml-2"
);
}
-const StyledLegendItem = styled.div`
+interface GraphPillsProps {
+ isActionable: boolean;
+}
+
+const StyledLegendItem = styled.div<GraphPillsProps>`
display: flex;
align-items: center;
- border: 1px solid ${themeColor('graphLegendBorder')};
+ border: ${(props) =>
+ props.isActionable ? themeBorder('default', 'buttonSecondaryBorder') : 'none'};
`;
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,NaNL20,NaN"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,NaNZ"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,0L20,6"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,12Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="12"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"
<circle
cx="0"
cy="16"
- fill="rgb(58,127,173)"
+ fill="rgb(85,170,223)"
r="4"
stroke="white"
stroke-width="1"
<circle
cx="0"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="4"
stroke="white"
stroke-width="1"
<path
class="line-chart-path line-chart-path-0"
d="M0,16L20,8"
- stroke="rgb(58,127,173)"
+ stroke="rgb(85,170,223)"
/>
<path
class="line-chart-path line-chart-path-1"
d="M40,0Z"
- stroke="rgb(85,170,223)"
+ stroke="rgb(58,127,173)"
/>
</g>
<g>
<circle
cx="40"
cy="0"
- fill="rgb(85,170,223)"
+ fill="rgb(58,127,173)"
r="2"
stroke="white"
stroke-width="1"