style(#ott2840): fav tooltip styles fixed

keep-around/99001d5964a4727568711990575a9f282fe3f67e
Farber Denis 3 years ago
parent 82c96edf47
commit 1451fa5f5d
  1. 2
      src/features/UserFavorites/index.tsx
  2. 32
      src/features/UserFavorites/styled.tsx

@ -68,7 +68,7 @@ export const UserFavorites = ({ marginTop }: Props) => {
type: item.type, type: item.type,
})} })}
> >
<Close size={8} /> <Close size={9} />
<TournamentNameTooltip> <TournamentNameTooltip>
<Name nameObj={item.info} /> <Name nameObj={item.info} />
</TournamentNameTooltip> </TournamentNameTooltip>

@ -34,7 +34,7 @@ export const ScrollWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
/* overflow-y: auto; */
${customScrollbar} ${customScrollbar}
` `
@ -42,8 +42,8 @@ export const UserSportFavXWrapper = styled.button`
position: absolute; position: absolute;
top: -0.472rem; top: -0.472rem;
right: -0.472rem; right: -0.472rem;
height: 0.95rem; width: 1.25rem;
width: 0.95rem; height: 1.25rem;
padding: 0px; padding: 0px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -56,10 +56,11 @@ export const UserSportFavXWrapper = styled.button`
export const UserSportFavItemLogoWrapper = styled.div` export const UserSportFavItemLogoWrapper = styled.div`
position: relative; position: relative;
width: 2.6rem; width: 3.3125rem;
height: 2.6rem; height: 3.3125rem;
border-radius: 4px; border-radius: 4px;
background-color: #3F3F3F; background-color: #3F3F3F;
border: 2px solid #3F3F3F;
${UserSportFavXWrapper} { ${UserSportFavXWrapper} {
display: none; display: none;
@ -74,7 +75,7 @@ export const UserSportFavItemLogoWrapper = styled.div`
} }
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.7); border: 2px solid #fff;
cursor: pointer; cursor: pointer;
${UserSportFavXWrapper} { ${UserSportFavXWrapper} {
@ -107,7 +108,7 @@ export const UserSportFavStar = styled.div<UserSportFavStarProps>`
min-height: 1.85rem; min-height: 1.85rem;
background: url('/images/sportFavStar.png') no-repeat center / 100%; background: url('/images/sportFavStar.png') no-repeat center / 100%;
margin-left: 0.15rem; margin-left: 0.15rem;
margin-bottom: 0.567rem; margin-bottom: 1.125rem;
margin-top: ${({ marginTop = 0 }) => marginTop}px; margin-top: ${({ marginTop = 0 }) => marginTop}px;
` `
@ -134,19 +135,16 @@ export const Text = styled(T9n)`
export const TournamentNameTooltip = styled.div` export const TournamentNameTooltip = styled.div`
position: absolute; position: absolute;
top: -0.1875rem; top: 50%;
left: 1.25rem; transform: translateY(-50%);
min-width: 14.5rem; left: 1.5625rem;
max-width: 14.5rem; padding: 0 6px;
padding-left: 6px; line-height: 1.0625rem;
line-height: 1.3125rem;
background-color: #fff; background-color: #fff;
border-radius: 6px; border-radius: 6px;
color: #000; color: #000;
font-weight: 600; font-weight: 400;
font-size: 0.9375rem; font-size: 0.6875rem;
text-transform: uppercase;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis;
` `

Loading…
Cancel
Save