 
     render_connection_status: ->
         if @props.connection_status == 'connected'
-            icon_style = {marginRight: 8, fontSize: '13pt', display: 'inline'}
+            icon_style = {marginRight: '16px', fontSize: '13pt', display: 'inline'}
             if (@props.mesg_info?.get('enqueued') ? 0) > 5  # serious backlog of data!
                 icon_style.color = 'red'
             else if (@props.mesg_info?.get('count') ? 0) > 1 # worrisome amount

                icon_style.color = '#00c'
            else
                icon_style.color = 'grey'
            <div>
                <Icon name='wifi' style={icon_style}/>
                {@render_ping() if @props.show_pingtime}
            </div>
        else if @props.connection_status == 'connecting'
            <span style={backgroundColor : '#FFA500', color : 'white', padding : '1ex', 'zIndex': 100001}>
                connecting...
            </span>
        else if @props.connection_status == 'disconnected'
            <span style={backgroundColor : '#FFA500', color : 'white', padding : '1ex', 'zIndex': 100001}>
                disconnected
            </span>

    connection_click: ->
        @props.actions.show_connection(true)

        document.activeElement.blur() # otherwise, it'll be highlighted even when closed again

    render: ->
        outer_styles =
            color      : '#666'
            fontSize   : '10pt'
            lineHeight : '10pt'
            cursor     : 'pointer'
            float      : 'left'
        inner_styles =
            paddingTop : '3px'

        <NavItem style={outer_styles} onClick={@connection_click}>
            <div style={inner_styles} >
