This is very simple CSS modification to the XF default online indicator.
In your EXTRA.less template add the following code.
Hit save and you are good to go.

In your EXTRA.less template add the following code.
CSS:
.message-avatar-wrapper .message-avatar-online {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 2px solid;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
border-radius: 3px;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217)
}