diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx index e5a6968828..094815ebe6 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx @@ -153,12 +153,14 @@ export default function KeyValuesTable(props: KeyValuesTableProps) { className="KeyValueTable--copyIcon" copyText={row.value} tooltipTitle="Copy value" + buttonText="Copy" /> diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.css b/packages/jaeger-ui/src/components/common/CopyIcon.css index 25738d372e..44c5aefd87 100644 --- a/packages/jaeger-ui/src/components/common/CopyIcon.css +++ b/packages/jaeger-ui/src/components/common/CopyIcon.css @@ -17,11 +17,14 @@ limitations under the License. .CopyIcon, .CopyIcon:hover { background-color: transparent; - border: none; + border: 1px solid inherit; color: inherit; height: 100%; overflow: hidden; - padding: 0px; + padding: 1px; + font-size: 13px; + margin-left: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .CopyIcon:focus { diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.tsx b/packages/jaeger-ui/src/components/common/CopyIcon.tsx index 5693d63c93..849203f38e 100644 --- a/packages/jaeger-ui/src/components/common/CopyIcon.tsx +++ b/packages/jaeger-ui/src/components/common/CopyIcon.tsx @@ -27,6 +27,7 @@ type PropsType = { icon?: string; placement?: TooltipPlacement; tooltipTitle: string; + buttonText: string; }; type StateType = { @@ -73,7 +74,9 @@ export default class CopyIcon extends React.PureComponent htmlType="button" icon={this.props.icon} onClick={this.handleClick} - /> + > + {this.props.buttonText} + ); }