Skip to content

Commit

Permalink
Final fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
WRadoslaw committed Jun 27, 2023
1 parent 84f2b86 commit 1c1776f
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 38 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ export type CopyAddressButtonProps = {
address: string
className?: string
size?: 'small' | 'big'
trucate?: boolean
truncate?: boolean
}

export const CopyAddressButton: FC<CopyAddressButtonProps> = ({ address, className, size = 'big', trucate }) => {
export const CopyAddressButton: FC<CopyAddressButtonProps> = ({ address, className, size = 'big', truncate }) => {
const { copyToClipboard } = useClipboard()
const [copyButtonClicked, setCopyButtonClicked] = useState(false)

Expand All @@ -31,7 +31,7 @@ export const CopyAddressButton: FC<CopyAddressButtonProps> = ({ address, classNa
return (
<Container onClick={handleCopyAddress}>
<StyledText as="button" variant={size === 'big' ? 't300' : 't100'} color="colorText" className={className}>
{trucate ? address : shortenString(address, 6, 4)}
{truncate ? address : shortenString(address, 6, 4)}
</StyledText>
<Tooltip text="Copy account address" placement="top">
{copyButtonClicked ? <StyledSvgActionCheck /> : <StyledSvgActionCopy />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,25 +72,6 @@ export const StyledAvatar = styled(Avatar)`
transition: opacity ${cVar('animationTransitionMedium')};
`

export const AvatarButton = styled.button`
position: relative;
cursor: pointer;
border: none;
padding: 0;
background: none;
align-self: start;
:hover {
${StyledAvatar} {
opacity: 1;
}
}
:active {
opacity: 0.75;
}
`

type FixedSizeContainerProps = {
height?: number | string
width?: number | string
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,17 @@ import { IconWrapper } from '@/components/IconWrapper'
import { JoyTokenIcon } from '@/components/JoyTokenIcon'
import { ListItem, ListItemProps } from '@/components/ListItem'
import { NumberFormat } from '@/components/NumberFormat'
import { Tooltip } from '@/components/Tooltip'
import { CopyAddressButton } from '@/components/_buttons/CopyAddressButton/CopyAddressButton'
import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
import { atlasConfig } from '@/config'
import { absoluteRoutes } from '@/config/routes'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
import { isMobile } from '@/utils/browser'

import { BalanceTooltip } from './BalanceTooltip'
import { SectionContainer } from './MemberDropdown.styles'
import {
AddressContainer,
AnimatedSectionContainer,
AvatarButton,
AvatarContainer,
BalanceContainer,
BlurredBG,
Expand Down Expand Up @@ -85,7 +82,6 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
const selectedChannel = activeMembership?.channels.find((chanel) => chanel.id === channelId)
const { url: memberAvatarUrl, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
const channelAvatarUrl = selectedChannel?.avatarPhoto?.resolvedUrl
const avatarWrapperRef = useRef<HTMLButtonElement>(null)
const { ref: sectionContainerRef, height: sectionContainerHeight } = useResizeObserver<HTMLDivElement>({
box: 'border-box',
})
Expand All @@ -106,17 +102,12 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
<MemberInfoAndBgWrapper>
<MemberInfoContainer>
<AvatarContainer>
{!isMobile() && (
<Tooltip reference={avatarWrapperRef.current} text="Member" offsetY={16} placement="bottom" />
)}
<AvatarButton ref={avatarWrapperRef} aria-label="Show member details">
<StyledAvatar
clickable={false}
size={40}
assetUrl={dropdownEntity.avatarUrl}
loading={dropdownEntity.avatarLoading}
/>
</AvatarButton>
<StyledAvatar
clickable={false}
size={40}
assetUrl={dropdownEntity.avatarUrl}
loading={dropdownEntity.avatarLoading}
/>
<div>
<MemberHandleText as="span" variant="h400">
{dropdownEntity.title}
Expand Down Expand Up @@ -182,7 +173,7 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
</BalanceContainer>
</div>
<AddressContainer>
<CopyAddressButton address={activeMembership?.controllerAccount ?? ''} size="big" trucate />
<CopyAddressButton address={activeMembership?.controllerAccount ?? ''} size="big" truncate />
</AddressContainer>
</AvatarContainer>
</MemberInfoContainer>
Expand Down

0 comments on commit 1c1776f

Please sign in to comment.