Add badge component

client/source/sass/components/_badge.scss

@@ -0,0 +1,13 @@
+.badge {
+  background: $status-filter--count--background;
+  border-radius: 100px;
+  color: $status-filter--count--foreground;
+  display: inline-block;
+  font-size: 0.8em;
+  font-weight: 800;
+  line-height: 1;
+  margin-left: 10px;
+  padding: 1px 5px;
+  transition: background 0.25s;
+  vertical-align: baseline;
+}

client/source/sass/components/_status-filter.scss

@@ -20,7 +20,7 @@
     &.is-active {
       color: $status-filter--foreground--active;
 
-      .status-filter__count {
+      .badge {
         background: $status-filter--count--background--active;
       }
 
@@ -40,18 +40,9 @@
     }
   }
 
-  &__count {
+  .badge {
     background: $status-filter--count--background;
-    border-radius: 100px;
     color: $status-filter--count--foreground;
-    display: inline-block;
-    font-size: 0.8em;
-    font-weight: 800;
-    line-height: 1;
-    margin-left: 10px;
-    padding: 1px 5px;
-    transition: background 0.25s;
-    vertical-align: baseline;
   }
 }
 

client/source/sass/components/_torrent-details-panel.scss

@@ -171,16 +171,9 @@
 
     &__heading {
 
-      &__count {
+      .badge {
         background: $torrent-details--table--header--count--background;
-        border-radius: 20px;
         color: $torrent-details--table--header--count--foreground;
-        display: inline-block;
-        font-size: 0.6em;
-        line-height: 1.4;
-        margin-left: 5px;
-        padding: 0 5px;
-        vertical-align: middle;
       }
     }
   }

client/source/sass/style.scss

@@ -17,6 +17,7 @@
 
 @import "components/action-bar";
 @import "components/application-content";
+@import "components/badge";
 @import "components/client-stats";
 @import "components/directory-tree";
 @import "components/dropdown";

client/source/scripts/components/sidebar/StatusFilter.js

@@ -1,8 +1,9 @@
 import classnames from 'classnames';
 import React from 'react';
 
-import TorrentFilterStore from '../../stores/TorrentFilterStore';
+import Badge from '../ui/Badge';
 import EventTypes from '../../constants/EventTypes';
+import TorrentFilterStore from '../../stores/TorrentFilterStore';
 
 const METHODS_TO_BIND = [
   'handleClick'
@@ -34,9 +35,9 @@ export default class StatusFilter extends React.Component {
       <li className={classNames} onClick={this.handleClick}>
         {this.props.icon}
         {this.props.name}
-        <span className="status-filter__count">
+        <Badge>
           {this.props.count}
-        </span>
+        </Badge>
       </li>
     );
   }

client/source/scripts/components/torrent-details/TorrentPeers.js

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import FolderOpenSolid from '../icons/FolderOpenSolid';
+import Badge from '../ui/Badge';
 import DirectoryTree from '../filesystem/DirectoryTree';
 import File from '../icons/File';
+import FolderOpenSolid from '../icons/FolderOpenSolid';
 import format from '../../util/formatData';
 
 export default class TorrentPeers extends React.Component {
@@ -35,10 +36,9 @@ export default class TorrentPeers extends React.Component {
               <tr>
                 <th className="torrent-details__table__heading--primary">
                   Peers
-                  <span
+                  <Badge>
-                    className="torrent-details__section__heading__count">
                     {peers.length}
-                  </span>
+                  </Badge>
                 </th>
                 <th className="torrent-details__table__heading--secondary">
                   DL

client/source/scripts/components/torrent-details/TorrentTrackers.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Badge from '../ui/Badge';
+
 export default class TorrentTrackrs extends React.Component {
   render() {
     let trackers = this.props.trackers || [];
@@ -28,10 +30,9 @@ export default class TorrentTrackrs extends React.Component {
               <tr>
                 <th className="torrent-details__table__heading--primary">
                   Trackers
-                  <span
+                  <Badge>
-                    className="torrent-details__section__heading__count">
                     {trackerCount}
-                  </span>
+                  </Badge>
                 </th>
                 <th className="torrent-details__table__heading--secondary">
                   Type

client/source/scripts/components/ui/Badge.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class Badge extends React.Component {
+  render() {
+    return (
+      <div className="badge">
+        {this.props.children}
+      </div>
+    );
+  }
+}

server/assets/style.css

@@ -752,6 +752,20 @@ body {
 .application__content {
   background: #e9eef2; }
 
+.badge {
+  background: #2b4456;
+  border-radius: 100px;
+  color: #132532;
+  display: inline-block;
+  font-size: 0.8em;
+  font-weight: 800;
+  line-height: 1;
+  margin-left: 10px;
+  padding: 1px 5px;
+  -webkit-transition: background 0.25s;
+  transition: background 0.25s;
+  vertical-align: baseline; }
+
 .client-stat {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1350,7 +1364,7 @@ body {
         fill: #7a97af; }
     .status-filter__item.is-active {
       color: #258de5; }
-      .status-filter__item.is-active .status-filter__count {
+      .status-filter__item.is-active .badge {
         background: #3b586d; }
       .status-filter__item.is-active .icon {
         fill: #258de5; }
@@ -1363,19 +1377,9 @@ body {
       transition: fill 0.25s;
       vertical-align: middle;
       width: auto; }
-  .status-filter__count {
+  .status-filter .badge {
     background: #2b4456;
-    border-radius: 100px;
+    color: #132532; }
-    color: #132532;
-    display: inline-block;
-    font-size: 0.8em;
-    font-weight: 800;
-    line-height: 1;
-    margin-left: 10px;
-    padding: 1px 5px;
-    -webkit-transition: background 0.25s;
-    transition: background 0.25s;
-    vertical-align: baseline; }
 
 .status-filter__item--heading {
   cursor: default;
@@ -1503,16 +1507,9 @@ body {
   .torrent-details__section__heading, .torrent-details__section__null-data {
     color: #3a5c74;
     font-size: 1.125em; }
-  .torrent-details__section__heading__count {
+  .torrent-details__section__heading .badge {
     background: rgba(82, 120, 147, 0.5);
-    border-radius: 20px;
+    color: #0c1b26; }
-    color: #0c1b26;
-    display: inline-block;
-    font-size: 0.6em;
-    line-height: 1.4;
-    margin-left: 5px;
-    padding: 0 5px;
-    vertical-align: middle; }
 
 .torrent-details-enter {
   opacity: 0; }