const Button = styled.div` line-height: 20px; min-height: 20px; display: inline-flex; align-items: center; justify-content: left; background: inherit; color: inherit; font-size: 16px; .icon { position: relative; &:before { margin: -8px; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; } } .count { margin-left: 8px; } &:not([disabled]) { cursor: pointer; } &:not([disabled]):hover { opacity: 1 !important; color: DeepSkyBlue; .icon:before { background: rgba(0, 191, 255, 0.1); } } `; const CommentIcon = ( <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-2 0 20 20" stroke="currentColor" strokeWidth="0.5" style={{ width: "1.25em" }} > <path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z" /> </svg> ); return ( <Button disabled={!context.accountId || props.disabled} title={props.title ?? "Comment"} onClick={props.onClick} > <span className="icon">{CommentIcon}</span> <span className="count" /> </Button> );