Updating navbar.

server/ui/src/Main.css

@@ -89,3 +89,7 @@ a::-moz-focus-inner {
   0% { transform: rotate(0deg); }
   100% {  transform: rotate(359deg); }
 }
+
+icon-flag {
+  margin-top: 6px;
+}

server/ui/src/components/navbar.tsx

@@ -30,7 +30,7 @@ export class Navbar extends Component<any, State> {
 
   navbar() {
     return (
-      <nav class="navbar navbar-light bg-light p-1 shadow">
+      <nav class="navbar navbar-dark bg-dark p-1 shadow">
         <a class="navbar-brand mx-1" href="#">
           <svg class="icon icon-database mr-2"><use xlinkHref="#icon-database"></use></svg>
           Torrents.csv

server/ui/src/components/search.tsx

@@ -25,7 +25,7 @@ export class Search extends Component<any, State> {
     searching: false
   };
 
-  constructor(props, context) {
+  constructor(props: any, context: any) {
     super(props, context);
   }
 
@@ -39,7 +39,7 @@ export class Search extends Component<any, State> {
   }
 
   // Re-do search if the props have changed
-  componentDidUpdate(lastProps, lastState, snapshot) {
+  componentDidUpdate(lastProps: any) {
     if (lastProps.match && lastProps.match.params !== this.props.match.params) {
       this.state.searchParams = {
         page: Number(this.props.match.params.page),
@@ -141,11 +141,11 @@ export class Search extends Component<any, State> {
                 <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
                 <td class="text-right text-success">
                   <svg class="icon icon-arrow-up d-none d-sm-inline mr-1"><use xlinkHref="#icon-arrow-up"></use></svg>
-                  {torrent.seeders}
+                  <span>{torrent.seeders}</span>
                 </td>
                 <td class="text-right text-danger d-none d-md-table-cell">
                   <svg class="icon icon-arrow-down mr-1"><use xlinkHref="#icon-arrow-down"></use></svg>
-                  {torrent.leechers}
+                  <span>{torrent.leechers}</span>
                 </td>
                 <td class="text-right text-muted d-none d-md-table-cell"
                   data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
@@ -157,14 +157,14 @@ export class Search extends Component<any, State> {
                     href={magnetLink(torrent.infohash, (torrent.name) ? torrent.name : torrent.path, torrent.index_)}
                     data-balloon="Magnet link"
                     data-balloon-pos="left">
-                    <svg class="icon"><use xlinkHref="#icon-magnet"></use></svg>
+                    <svg class="icon icon-magnet"><use xlinkHref="#icon-magnet"></use></svg>
                   </a>
                   <a class="btn btn-sm no-outline px-1 d-none d-sm-inline"
                     href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}
                     target="_blank"
                     data-balloon="Report Torrent"
                     data-balloon-pos="left">
-                    <svg class="icon"><use xlinkHref="#icon-flag"></use></svg>
+                    <svg class="icon icon-flag"><use xlinkHref="#icon-flag"></use></svg>
                   </a>
                 </td>
               </tr>
@@ -197,7 +197,7 @@ export class Search extends Component<any, State> {
     );
   }
 
-  switchPage(a: { i: Search, nextPage: boolean }, event) {
+  switchPage(a: { i: Search, nextPage: boolean }) {
     let newSearch = a.i.state.searchParams;
     newSearch.page += (a.nextPage) ? 1 : -1;
     a.i.props.history.push(`/search/${newSearch.type_}/${newSearch.q}/${newSearch.page}`);