From ada12561c9a51d14760d1cc1405bde40ddc02c83 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 15 Mar 2019 10:13:45 -0700
Subject: [PATCH] Removing font-awesome

Replacing with icomoon svgs.
Fixes #54
---
 server/ui/src/Main.css              | 21 ++++++++++++++
 server/ui/src/components/navbar.tsx |  6 ++--
 server/ui/src/components/search.tsx | 16 +++++++----
 server/ui/src/index.html            |  1 -
 server/ui/src/index.tsx             | 44 ++++++++++++++++++++++++++++-
 5 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/server/ui/src/Main.css b/server/ui/src/Main.css
index 4a2a01b..f031e60 100644
--- a/server/ui/src/Main.css
+++ b/server/ui/src/Main.css
@@ -66,3 +66,24 @@ a::-moz-focus-inner {
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;
 }
+
+.icon {
+  display: inline-flex;
+  width: .8em;
+  height: .8em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+  vertical-align: initial;
+}
+
+.spinner {
+  animation: spin 2s linear infinite;
+  width: 20vw;
+  height: 20vh;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% {  transform: rotate(359deg); }
+}
diff --git a/server/ui/src/components/navbar.tsx b/server/ui/src/components/navbar.tsx
index 8fdd10b..7245df6 100644
--- a/server/ui/src/components/navbar.tsx
+++ b/server/ui/src/components/navbar.tsx
@@ -32,11 +32,11 @@ export class Navbar extends Component<any, State> {
     return (
       <nav class="navbar navbar-light bg-light p-1 shadow">
         <a class="navbar-brand mx-1" href="#">
-          <i class="fas fa-fw fa-database mr-1"></i>
+          <svg class="icon icon-database mr-2"><use xlinkHref="#icon-database"></use></svg>
           Torrents.csv
         </a>
         <div class="navbar-nav ml-auto mr-2">
-          <a class="nav-item nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
+          <a class="nav-item nav-link" href={repoUrl}><svg class="icon icon-github"><use xlinkHref="#icon-github"></use></svg></a>
         </div>
         {this.searchForm()}
       </nav>
@@ -59,7 +59,7 @@ export class Navbar extends Component<any, State> {
               <option value="file">File</option>
             </select>
             <button class="btn btn-secondary border-0 rounded-right no-outline" type="submit">
-              <i className="fas fa-fw fa-search"></i>
+              <svg class="icon icon-search"><use xlinkHref="#icon-search"></use></svg>
             </button>
           </div>
         </div>
diff --git a/server/ui/src/components/search.tsx b/server/ui/src/components/search.tsx
index 0f8a872..080761f 100644
--- a/server/ui/src/components/search.tsx
+++ b/server/ui/src/components/search.tsx
@@ -93,7 +93,7 @@ export class Search extends Component<any, State> {
   spinner() {
     return (
       <div class="text-center m-5 p-5">
-        <i class="fas fa-spinner fa-spin fa-5x"></i>
+        <svg class="icon icon-spinner spinner"><use xlinkHref="#icon-spinner"></use></svg>
       </div>
     );
   }
@@ -139,8 +139,14 @@ export class Search extends Component<any, State> {
                   </td>
                 )}
                 <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
-                <td class="text-right text-success"><i class="fas fa-fw fa-arrow-up d-none d-sm-inline mr-1"></i>{torrent.seeders}</td>
-                <td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down mr-1"></i>{torrent.leechers}</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}
+                </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}
+                </td>
                 <td class="text-right text-muted d-none d-md-table-cell"
                   data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
                   data-balloon-pos="down">
@@ -151,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">
-                    <i class="fas fa-fw fa-magnet"></i>
+                    <svg class="icon icon-magnet"><use xlinkHref="#icon-magnet"></use></svg>
                   </a>
                   <a class="btn btn-sm no-outline p-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">
-                    <i class="fas fa-fw fa-flag"></i>
+                    <svg class="icon icon-flag"><use xlinkHref="#icon-flag"></use></svg>
                   </a>
                 </td>
               </tr>
diff --git a/server/ui/src/index.html b/server/ui/src/index.html
index fcf50ba..2422032 100644
--- a/server/ui/src/index.html
+++ b/server/ui/src/index.html
@@ -8,7 +8,6 @@
 
 	<title>Torrents.csv</title>
   <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
-	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
 </head>
 
diff --git a/server/ui/src/index.tsx b/server/ui/src/index.tsx
index 774880e..638c559 100644
--- a/server/ui/src/index.tsx
+++ b/server/ui/src/index.tsx
@@ -19,9 +19,51 @@ class Index extends Component<any, any> {
             <Route exact path="/" component={Home} />
             <Route path={`/search/:type_/:q/:page`} component={Search} />
           </Switch>
+          {this.symbols()}
         </div>
       </HashRouter>
-    )
+    );
+  }
+  symbols() {
+    return (
+
+<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<symbol id="icon-database" viewBox="0 0 24 28">
+<title>database</title>
+<path d="M12 12c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 24c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 18c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 0c6.625 0 12 1.797 12 4v2c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2c0-2.203 5.375-4 12-4z"></path>
+</symbol>
+<symbol id="icon-flag" viewBox="0 0 29 28">
+<title>flag</title>
+<path d="M5 4c0 0.719-0.391 1.359-1 1.719v19.781c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-19.781c-0.609-0.359-1-1-1-1.719 0-1.109 0.891-2 2-2s2 0.891 2 2zM28 5v11.922c0 0.578-0.359 0.797-0.812 1.031-1.766 0.953-3.719 1.813-5.766 1.813-2.875 0-4.25-2.188-7.656-2.188-2.484 0-5.094 1.125-7.25 2.281-0.172 0.094-0.328 0.141-0.516 0.141-0.547 0-1-0.453-1-1v-11.594c0-0.375 0.187-0.641 0.484-0.859 0.375-0.25 0.828-0.469 1.234-0.672 1.969-1 4.359-1.875 6.578-1.875 2.453 0 4.375 0.812 6.547 1.828 0.438 0.219 0.891 0.297 1.375 0.297 2.453 0 5.094-2.125 5.781-2.125 0.547 0 1 0.453 1 1z"></path>
+</symbol>
+<symbol id="icon-magnet" viewBox="0 0 24 28">
+<title>magnet</title>
+<path d="M24 13v2c0 6.375-5.047 11-12 11s-12-4.625-12-11v-2c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1v2c0 2.859 3.328 3 4 3s4-0.141 4-3v-2c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1zM8 3v6c0 0.547-0.453 1-1 1h-6c-0.547 0-1-0.453-1-1v-6c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1zM24 3v6c0 0.547-0.453 1-1 1h-6c-0.547 0-1-0.453-1-1v-6c0-0.547 0.453-1 1-1h6c0.547 0 1 0.453 1 1z"></path>
+</symbol>
+<symbol id="icon-arrow-down" viewBox="0 0 32 32">
+<title>arrow-down</title>
+<path d="M16 31l15-15h-9v-16h-12v16h-9z"></path>
+</symbol>
+<symbol id="icon-arrow-up" viewBox="0 0 32 32">
+<title>arrow-up</title>
+<path d="M16 1l-15 15h9v16h12v-16h9z"></path>
+</symbol>
+<symbol id="icon-search" viewBox="0 0 32 32">
+<title>search</title>
+<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
+</symbol>
+<symbol id="icon-github" viewBox="0 0 32 32">
+<title>github</title>
+<path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>
+</symbol>
+<symbol id="icon-spinner" viewBox="0 0 32 32">
+<title>spinner</title>
+<path d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"></path>
+</symbol>
+</defs>
+</svg>
+  );
   }
 }
 render(<Index />, container);