diff --git a/web/packages/design/src/Mark/Mark.story.tsx b/web/packages/design/src/Mark/Mark.story.tsx index 9cae48b6ccd50..596190e6bd69d 100644 --- a/web/packages/design/src/Mark/Mark.story.tsx +++ b/web/packages/design/src/Mark/Mark.story.tsx @@ -19,7 +19,7 @@ import Box from 'design/Box'; import { IconTooltip } from 'design/Tooltip'; -import { Mark as M, MarkForToolTip } from './Mark'; +import { Mark as M, MarkInverse } from './Mark'; export default { title: 'Design/Mark', @@ -39,8 +39,6 @@ export const SampleText = () => { necessitatibus {' '} obcaecati asperiores neque. -
-
); }; @@ -48,8 +46,8 @@ export const SampleText = () => { export const MarkInsideTooltip = () => { return ( - Example of MarkForToolTip. Note the{' '} - inversed background and text color. + Example of MarkForToolTip. Note the{' '} + inversed background and text color. ); }; diff --git a/web/packages/design/src/Mark/Mark.tsx b/web/packages/design/src/Mark/Mark.tsx index 1331d3923b0d4..07e11f360bd6b 100644 --- a/web/packages/design/src/Mark/Mark.tsx +++ b/web/packages/design/src/Mark/Mark.tsx @@ -27,7 +27,7 @@ export const Mark = styled.mark` color: inherit; `; -export const MarkForToolTip = styled(Mark)` +export const MarkInverse = styled(Mark)` background-color: ${p => p.theme.colors.tooltip.inverseBackground}; color: ${p => p.theme.colors.text.main}; `; diff --git a/web/packages/design/src/Mark/index.ts b/web/packages/design/src/Mark/index.ts index 27c066fb26cfa..8ff108e93731d 100644 --- a/web/packages/design/src/Mark/index.ts +++ b/web/packages/design/src/Mark/index.ts @@ -16,4 +16,4 @@ * along with this program. If not, see . */ -export { Mark, MarkForToolTip } from './Mark'; +export { Mark, MarkInverse } from './Mark'; diff --git a/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx index 8215987e8b1d0..78627abfb0947 100644 --- a/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx +++ b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx @@ -17,7 +17,7 @@ */ import Link from 'design/Link'; -import { MarkForToolTip } from 'design/Mark'; +import { MarkInverse } from 'design/Mark'; import { Position } from 'design/Popover/Popover'; import { IconTooltip } from 'design/Tooltip'; import styled from 'styled-components'; @@ -48,8 +48,8 @@ export function ResourceLabelTooltip({ > Teleport RBAC - . Only roles with node_labels{' '} - that match these labels will be allowed to access this server. + . Only roles with node_labels that + match these labels will be allowed to access this server. @@ -74,9 +74,9 @@ export function ResourceLabelTooltip({ > Teleport RBAC - . Only roles with{' '} - kubernetes_labels that match - these labels will be allowed to access this Kubernetes cluster. + . Only roles with kubernetes_labels{' '} + that match these labels will be allowed to access this Kubernetes + cluster. {resourceKind === 'eks' && (
  • @@ -106,8 +106,8 @@ export function ResourceLabelTooltip({ > Teleport RBAC - . Only roles with db_labels that - match these labels will be allowed to access this database. + . Only roles with db_labels that match + these labels will be allowed to access this database.
  • {resourceKind === 'rds' && (