feat #116 - Update Tooltip styles

src/components/Form/FieldLabel/FieldLabel.test.tsx

@@ -24,14 +24,6 @@ describe('Field Label', () => {
 		expect(wrapper.text()).toContain(MOCK_LABEL)
 	})
 
-	it('applies the correct class if required is passed as true', () => {
-		const fieldLabel = mount(<FieldLabel {...baseMockProps} required />)
-
-		expect(fieldLabel.getDOMNode().classList.toString()).toContain(
-			'required'
-		)
-	})
-
 	describe('loading', () => {
 		beforeEach(() => {
 			wrapper = shallow(<FieldLabel {...baseMockProps} loading />)

src/components/Popover/index.tsx

@@ -8,7 +8,6 @@ import { generatePopoverStyles } from './utils'
 import { getDataTestAttributeProp } from '../utils'
 import { ThemeType } from '../assets/styles/themes'
 import { TooltipPlacement } from 'antd/es/tooltip'
-
 import React, { FC, ReactNode } from 'react'
 
 const { dark, light } = ThemeType

src/components/Popover/utils.ts

@@ -41,16 +41,19 @@ export const generatePopoverStyles = (themeType: ThemeType) => {
 				},
 				'& > .ant-popover-inner': {
 					'& > .ant-popover-inner-content': {
-						color: base.color
+						color: base.color,
+						fontWeight: 300
 					},
 					'& > .ant-popover-title': {
 						borderBottomColor: base.borderColor,
-						color: text.title
+						color: text.title,
+						fontWeight: 300
 					},
 					backgroundColor: background,
 					borderRadius,
 					boxShadow: 'none',
-					color: base.color
+					color: base.color,
+					fontWeight: 300
 				}
 			},
 			filter: `drop-shadow(0px 2px 8px ${accent})`

src/components/Tooltip/index.tsx

@@ -3,10 +3,24 @@ import 'antd/lib/tooltip/style/index.css'
 import { Tooltip as AntDTooltip } from 'antd'
 import cn from 'classnames'
 import { CommonComponentProps } from '../types'
+import { createUseStyles } from 'react-jss'
+import { generateTooltipStyles } from './utils'
 import { getDataTestAttributeProp } from '../utils'
+import { ThemeType } from '../assets/styles/themes'
 import { TooltipPlacement } from 'antd/es/tooltip'
 import React, { FC, ReactNode } from 'react'
 
+const { dark, light } = ThemeType
+
+const useStyles = createUseStyles({
+	'@global': {
+		[`.${dark}`]: {
+			'& $div': generateTooltipStyles(dark)
+		},
+		div: generateTooltipStyles(light)
+	}
+})
+
 export type TooltipTitle = string | ReactNode
 
 export interface TooltipProps extends CommonComponentProps {
@@ -41,6 +55,8 @@ export const Tooltip: FC<TooltipProps> = ({
 	popupContainerSelector,
 	title
 }: TooltipProps) => {
+	useStyles()
+
 	let popupContainerProps = {}
 
 	if (popupContainerSelector) {

src/components/Tooltip/utils.ts

@@ -0,0 +1,42 @@
+import colors from 'components/assets/styles/colors'
+import { styleguide } from 'components/assets/styles/styleguide'
+import { ThemeType } from 'components/assets/styles/themes'
+
+const { blacks, whites } = colors
+
+const { borderRadius } = styleguide
+
+const { dark, light } = ThemeType
+
+const tooltipPalette = {
+	[dark]: {
+		background: blacks['lighten-10']
+	},
+	[light]: {
+		background: blacks.base
+	}
+}
+
+export const generateTooltipStyles = (themeType: ThemeType) => {
+	const { background } = tooltipPalette[themeType]
+
+	return {
+		'& .ant-tooltip': {
+			'& > .ant-tooltip-content': {
+				'& > .ant-tooltip-arrow': {
+					'& > .ant-tooltip-arrow-content': {
+						backgroundColor: background,
+						boxShadow: 'none'
+					},
+					backgroundColor: 'none'
+				},
+				'& > .ant-tooltip-inner': {
+					backgroundColor: background,
+					borderRadius,
+					color: whites.base,
+					fontWeight: 300
+				}
+			}
+		}
+	}
+}