pretty icons

2 files changed, 30 insertions, 10 deletions

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index f699f92e..91e9ff9e 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -32,7 +32,7 @@ var FeedItem = React.createClass({
         if(this.props.active) {
             classes += " bg-primary";
         }
-        if(this.props.error_count == 6) {
+        if(this.props.error_count >= 6) {
             classes += " bg-danger";
         } else if(this.props.error_count > 3) {
             classes += " bg-warning";
@@ -151,17 +151,25 @@ var MenuFilter = React.createClass({
         if (this.props.feed_in_error) {
             error_button = (
                     <Button active={this.props.filter == "error"}
+                            title="Some of your feeds are in error, click here to list them"
                             onMouseDown={this.setErrorFilter}
-                            bsSize="small" bsStyle="warning">Error</Button>
+                            bsSize="small" bsStyle="warning">
+                        <Glyphicon glyph="exclamation-sign" />
+                    </Button>
             );
         }
         return (<ButtonGroup className="nav nav-sidebar">
                     <Button active={this.props.filter == "all"}
-                            onMouseDown={this.setAllFilter}
-                            bsSize="small">All</Button>
+                            title="Display all feeds"
+                            onMouseDown={this.setAllFilter} bsSize="small">
+                        <Glyphicon glyph="menu-hamburger" />
+                    </Button>
                     <Button active={this.props.filter == "unread"}
+                            title="Display only feed with unread article"
                             onMouseDown={this.setUnreadFilter}
-                            bsSize="small">Unread</Button>
+                            bsSize="small">
+                        <Glyphicon glyph="unchecked" />
+                    </Button>
                     {error_button}
                 </ButtonGroup>
         );
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index b2107383..d2c4df5b 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -119,29 +119,41 @@ var MiddlePanelFilter = React.createClass({
         if(this.state.display_search) {
             search_row = <MiddlePanelSearchRow />
         }
+        var delay = 750;
         return (<div>
                 <Row className="show-grid">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
-                                onMouseDown={this.setAllFilter}
-                                bsSize="small">All</Button>
+                                title="Display all articles"
+                                onMouseDown={this.setAllFilter} bsSize="small">
+                            <Glyphicon glyph="menu-hamburger" />
+                        </Button>
                         <Button active={this.state.filter == "unread"}
+                                title="Display only unread article"
                                 onMouseDown={this.setUnreadFilter}
-                                bsSize="small">Unread</Button>
+                                bsSize="small">
+                            <Glyphicon glyph="unchecked" />
+                        </Button>
                         <Button active={this.state.filter == "liked"}
+                                title="Filter only liked articles"
                                 onMouseDown={this.setLikedFilter}
                                 bsSize="small">
                             <Glyphicon glyph="star" />
                         </Button>
                     </ButtonGroup>
                     <ButtonGroup>
-                        <Button onMouseDown={this.toogleSearch} bsSize="small">
+                        <Button onMouseDown={this.toogleSearch}
+                                title="Search through displayed articles"
+                                bsSize="small">
                             <Glyphicon glyph="search" />
                         </Button>
                     </ButtonGroup>
                     <ButtonGroup>
                         <Button onMouseDown={MiddlePanelActions.markAllAsRead}
-                                bsSize="small">Mark all as read</Button>
+                                title="Mark all displayed article as read"
+                                bsSize="small">
+                            <Glyphicon glyph="trash" />
+                        </Button>
                     </ButtonGroup>
                 </Row>
                 {search_row}