Skip to content

Commit

Permalink
feat: fix TooltipTrigger styles (#692), ♻️ 💄
Browse files Browse the repository at this point in the history
  • Loading branch information
Vlad116 committed Jun 8, 2023
1 parent d3db459 commit dc8df59
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 51 deletions.
49 changes: 0 additions & 49 deletions src/components/TooltipTrigger.tsx

This file was deleted.

2 changes: 2 additions & 0 deletions src/components/TooltipTrigger/icon-svg-path.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const iconTooltipTrigger =
'M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z';
47 changes: 47 additions & 0 deletions src/components/TooltipTrigger/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from 'react';
import { ITooltipHostProps, TooltipHost } from 'office-ui-fabric-react';

import { iconTooltipTrigger } from './icon-svg-path';

interface ITooltipTriggerProps extends ITooltipHostProps {
size?: number;
iconColor?: string;
tooltipBackground?: string;
tooltipFontColor?: string;
}

const TooltipTrigger = ({
size = 20,
iconColor = '#FFFFFF',
tooltipBackground = '#676e72',
tooltipFontColor = '#FFFFFF',
...restProps
}: ITooltipTriggerProps): JSX.Element => (
<TooltipHost
tooltipProps={{
styles: {
content: { color: tooltipFontColor },
},
calloutProps: {
styles: {
beak: { backgroundColor: tooltipBackground },
beakCurtain: { backgroundColor: tooltipBackground },
calloutMain: { backgroundColor: tooltipBackground, cursor: 'help' },
},
},
}}
{...restProps}
>
<svg
className="tooltip-icon"
width={`${size}px`}
height={`${size}px`}
viewBox="0 0 48 48"
version="1.1"
>
<path fill={iconColor} d={iconTooltipTrigger}></path>
</svg>
</TooltipHost>
);

export default TooltipTrigger;
6 changes: 4 additions & 2 deletions src/pages/Options/Options.css
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
.Box-header {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
padding: 0 25px;
margin: -1px -1px 0;
Expand All @@ -34,13 +34,15 @@
border-top-right-radius: 6px;
}

.Box-header svg {
.Box-header svg.tooltip-icon {
cursor: help;
margin-top: 4px;
}

.Box-title {
font-size: 18px;
font-weight: 600;
margin-right: 8px;
}

ul {
Expand Down

0 comments on commit dc8df59

Please sign in to comment.