Online indicator based on user ID

Add this to the extra.less template.

Less:

/* #### Online Indicator #### */
.message-avatar-wrapper .message-avatar-online
{
    left: 48%;

    &:before
    {
        border-radius: 2px;
        font-weight: 900;
    }

    &.ctaOnlineIcon--
    {
        &0:before
        {
            .m-faContent(@fa-var-sleigh);
            color: #ee0010;
            background: #ffffff;
            border: #ffffff solid 4px;
        }

        &1:before
        {
            .m-faContent(@fa-var-bells);
            color: #ffd700;
            background: #008400;
            border: #008400 solid 4px;
        }

        &2:before
        {
            .m-faContent(@fa-var-candy-cane);
            color: #e75480;
            background: #ffffff;
            border: #ffffff solid 4px;
        }

        &3:before
        {
            .m-faContent(@fa-var-deer-rudolph);
            color: #654321;
            background: #fffafa;
            border: #fffafa solid 4px;
        }

        &4:before
        {
            .m-faContent(@fa-var-gifts);
            color: #800080;
            background: #ffdd4b;
            border: #ffdd4b solid 4px;
        }

        &5:before
        {
            .m-faContent(@fa-var-glass-cheers);
            color: #ffe9ca;
            background: #d2222f;
            border: #d2222f solid 4px;
        }

        &6:before
        {
            .m-faContent(@fa-var-hat-santa);
            color: #ee0010;
            background: #ffffff;
            border: #ffffff solid 4px;
        }

        &7:before
        {
            .m-faContent(@fa-var-holly-berry);
            color: #008800;
            background: #ffffff;
            border: #ffffff solid 4px;
        }

        &8:before
        {
            .m-faContent(@fa-var-snowman);
            color: #fffafa;
            background: #87ceeb;
            border: #87ceeb solid 4px;
        }

        &9:before
        {
            .m-faContent(@fa-var-tree-decorated);
            color: #006600;
            background: #edf6fd;
            border: #edf6fd solid 4px;
        }
    }
}

Add this to the extra.less template.

Less:

/* #### Online Indicator #### */
.message-avatar-wrapper .message-avatar-online
{
    left: 48%;

    &:before
    {
        border-radius: 2px;
        font-weight: 900;
    }

    &.ctaOnlineIcon--
    {
        &0:before
        {
            .m-faContent(@fa-var-broom);
            color: #654321;
            background: #e8ecef;
            border: #e8ecef solid 4px;
        }

        &1:before
        {
            .m-faContent(@fa-var-bat);
            color: #000000;
            background: #4678b3;
            border: #4678b3 solid 4px;
        }

        &2:before
        {
            .m-faContent(@fa-var-cauldron);
            color: #111;
            background: #489466;
            border: #489466 solid 4px;
        }

        &3:before
        {
            .m-faContent(@fa-var-coffin);
            color: #654321;
            background: #aaaaaa;
            border: #aaaaaa solid 4px;
        }

        &4:before
        {
            .m-faContent(@fa-var-ghost);
            color: #f8f8ff;
            background: #171139;
            border: #171139 solid 4px;
        }

        &5:before
        {
            .m-faContent(@fa-var-hat-witch);
            color: #000000;
            background: #489466;
            border: #489466 solid 4px;
        }

        &6:before
        {
            .m-faContent(@fa-var-hat-wizard);
            color: #000000;
            background: #a885bf;
            border: #a885bf solid 4px;
        }

        &7:before
        {
            .m-faContent(@fa-var-hockey-mask);
            color: #ffffff;
            background: #1e1e46;
            border: #1e1e46 solid 4px;
        }

        &8:before
        {
            .m-faContent(@fa-var-jack-o-lantern);
            color: #ff7518;
            background: #000000;
            border: #000000 solid 4px;
        }

        &9:before
        {
            .m-faContent(@fa-var-spider-black-widow);
            color: #000000;
            background: #ce0018;
            border: #ce0018 solid 4px;
        }
    }
}