if ( !props.accountId || !context.accountId || context.accountId === props.accountId ) { return ""; } const Wrapper = styled.div` .vote-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; height: 32px; border-radius: 100px; font-weight: 600; font-size: 12px; line-height: 15px; text-align: center; cursor: pointer; background: #FBFCFD; border: 1px solid #D7DBDF; color: ${props.primary ? "#006ADC" : "#11181C"} !important; white-space: nowrap; &:hover, &:focus { background: #ECEDEE; text-decoration: none; outline: none; } } `; const Link = styled.a` display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; height: 32px; border-radius: 100px; font-weight: 600; font-size: 12px; line-height: 15px; text-align: center; cursor: pointer; background: #FBFCFD; border: 1px solid #D7DBDF; color: ${props.primary ? "#006ADC" : "#11181C"} !important; white-space: nowrap; &:hover, &:focus { background: #ECEDEE; text-decoration: none; outline: none; } i { transition: transform 0.2s ease-in-out; } &:hover { i { transform: translateX(5px) scale(1.1); } } `; return ( <Wrapper className={props.className}> <Link href={props.href} target="_blank"> <i class={`bi ${props.icon || "bi-envelope-paper"}`} /> {props.buttonText || "Vote"} </Link> </Wrapper> );