Skip to content

Commit

Permalink
Updated tooltip styles
Browse files Browse the repository at this point in the history
  • Loading branch information
belousovjr committed Nov 14, 2023
1 parent c019933 commit c606cfd
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 15 deletions.
6 changes: 3 additions & 3 deletions src/components/Tooltip/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { ReactNode, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { usePopper } from "react-popper";
import * as PopperJS from "@popperjs/core";
import { Box, Flex } from "../Box";
import { Portal } from "@reach/portal";
import { ITooltipProps } from './types';
import { Arrow, TooltipContainer } from './styles'
import { ITooltipProps } from "./types";
import { Arrow, TooltipContainer } from "./styles";

export default function ({ content, children }: ITooltipProps) {
const activatorElement = useRef<HTMLDivElement>(null);
Expand Down
23 changes: 11 additions & 12 deletions src/components/Tooltip/styles.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import styled from "styled-components";
import { transparentize } from "polished";

export const Arrow = styled.div`
width: 8px;
Expand All @@ -12,7 +11,7 @@ export const Arrow = styled.div`
box-sizing: border-box;
content: "";
transform: rotate(45deg);
background: ${({ theme }) => theme.colors.strokeGray};
background: ${({ theme }) => theme.colors.darkBg};
}
&.arrow-top {
Expand All @@ -39,14 +38,14 @@ export const TooltipContainer = styled.div<{ show: boolean }>`
transition: visibility 150ms linear, opacity 150ms linear;
max-width: 256px;
cursor: default;
padding: 0.6rem 1rem;
color: ${({ theme }) => theme.colors.white};
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding: 6px 8px;
color: ${({ theme }) => theme.colors.darkGray};
font-size: 14px;
font-weight: 300;
line-height: 18px;
word-break: break-word;
background: ${({ theme }) => theme.colors.strokeGray};
border: 1px solid ${({ theme }) => theme.colors.darkGray};
border-radius: 12px;
box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.colors.white)};
`;
background: ${({ theme }) => theme.colors.darkBg};
border-radius: 8px;
`;
1 change: 1 addition & 0 deletions src/theme/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const colors: ThemeColors = {
shadowLight: "#a9b6bf",
shadowDark: "#2d3643",
strokeGray: "#616971",
darkBg: "#1d2128",
darkGray: "#7b8187",
lightTextGray: "#3c454e",
primaryDefault: "#5d93b2",
Expand Down
1 change: 1 addition & 0 deletions src/theme/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export type ThemeColors = {
shadowLight: string;
shadowDark: string;
strokeGray: string;
darkBg: string;
darkGray: string;
lightTextGray: string;
primaryDefault: string;
Expand Down

0 comments on commit c606cfd

Please sign in to comment.