From 7b880e58198dd7ae1d94cf89aeb7f1982caea628 Mon Sep 17 00:00:00 2001
From: Rob Watson <rob@netflux.io>
Date: Sat, 4 Jul 2020 09:11:41 +0200
Subject: [PATCH] improve icons

---
 server/ui/src/Main.css              | 5 ++++-
 server/ui/src/components/search.tsx | 6 ++----
 server/ui/src/index.tsx             | 6 ++++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/server/ui/src/Main.css b/server/ui/src/Main.css
index 0385b6b..8e0fc7f 100644
--- a/server/ui/src/Main.css
+++ b/server/ui/src/Main.css
@@ -80,7 +80,10 @@ a::-moz-focus-inner {
 }
 
 th .icon {
-  color: #333333;
+  color: #666666;
+  position: relative;
+  top: 0.125em;
+  left: 0.125em;
 }
 
 .spinner {
diff --git a/server/ui/src/components/search.tsx b/server/ui/src/components/search.tsx
index 47471f4..80781dd 100644
--- a/server/ui/src/components/search.tsx
+++ b/server/ui/src/components/search.tsx
@@ -137,18 +137,16 @@ export class Search extends Component<any, State> {
 
   sortLinkIcon(sortKey: string) {
     const searchParams = this.state.searchParams;
-
     if (searchParams.sort_key !== sortKey) {
       return "";
     }
-
     if (searchParams.sort_dir === "Asc") {
       return (
-        <svg class="icon icon-arrow-up d-none d-sm-inline mr-1"><use xlinkHref="#icon-arrow-up"></use></svg>
+        <svg class="icon icon-arrow-up2"><use xlinkHref="#icon-arrow-up2"></use></svg>
       )
     } else {
       return (
-        <svg class="icon icon-arrow-down mr-1"><use xlinkHref="#icon-arrow-down"></use></svg>
+        <svg class="icon icon-arrow-down2"><use xlinkHref="#icon-arrow-down2"></use></svg>
       )
     }
   }
diff --git a/server/ui/src/index.tsx b/server/ui/src/index.tsx
index dbdb31b..0585508 100644
--- a/server/ui/src/index.tsx
+++ b/server/ui/src/index.tsx
@@ -49,6 +49,12 @@ class Index extends Component<any, any> {
 <title>arrow-up</title>
 <path d="M16 1l-15 15h9v16h12v-16h9z"></path>
 </symbol>
+<symbol id="icon-arrow-up2" viewBox="0 0 32 32">
+  <path d="M27.414 12.586l-10-10c-0.781-0.781-2.047-0.781-2.828 0l-10 10c-0.781 0.781-0.781 2.047 0 2.828s2.047 0.781 2.828 0l6.586-6.586v19.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-19.172l6.586 6.586c0.39 0.39 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586c0.781-0.781 0.781-2.047 0-2.828z"></path>
+</symbol>
+<symbol id="icon-arrow-down2" viewBox="0 0 32 32">
+  <path d="M27.414 19.414l-10 10c-0.781 0.781-2.047 0.781-2.828 0l-10-10c-0.781-0.781-0.781-2.047 0-2.828s2.047-0.781 2.828 0l6.586 6.586v-19.172c0-1.105 0.895-2 2-2s2 0.895 2 2v19.172l6.586-6.586c0.39-0.39 0.902-0.586 1.414-0.586s1.024 0.195 1.414 0.586c0.781 0.781 0.781 2.047 0 2.828z"></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>