From e86999e454e41411e0f1a35626b0660560846c90 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 30 Jan 2019 16:59:31 +0000
Subject: [PATCH] proper svg icons

---
 assets/svg/chevron-left.svg       | 12 ++++-----
 assets/svg/chevron.svg            |  6 -----
 assets/svg/close-wide.svg         | 16 ++++++++++++
 components/GalleryImageViewer.vue | 42 ++++++++++++++++++++++++++-----
 4 files changed, 58 insertions(+), 18 deletions(-)
 delete mode 100644 assets/svg/chevron.svg
 create mode 100644 assets/svg/close-wide.svg

diff --git a/assets/svg/chevron-left.svg b/assets/svg/chevron-left.svg
index fd1124a..beeaa7c 100644
--- a/assets/svg/chevron-left.svg
+++ b/assets/svg/chevron-left.svg
@@ -1,18 +1,18 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <svg version="1.1"
-     id="Capa_1"
      xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px"
      viewBox="0 0 256 256"
      xml:space="preserve"
 >
   <g>
     <polygon points="207.093,30.187 176.907,0 48.907,128 176.907,256 207.093,225.813 109.28,128"
-               fill-opacity="0.1"
-               fill="#ffffff"
-               stroke-width="6px"
-               stroke="#ffffff"
+              fill-opacity="0.5"
+              fill="#000000"
+              stroke="#ffffff"
+              stroke-width="6px"
+              stroke-linecap="round"
+              stroke-linejoin="round"
     />
   </g>
 </svg>
diff --git a/assets/svg/chevron.svg b/assets/svg/chevron.svg
deleted file mode 100644
index bf371c1..0000000
--- a/assets/svg/chevron.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" width="512px" height="512px">
-  <g>
-    <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#ff7c00"/>
-  </g>
-</svg>
diff --git a/assets/svg/close-wide.svg b/assets/svg/close-wide.svg
new file mode 100644
index 0000000..7806493
--- /dev/null
+++ b/assets/svg/close-wide.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 350.39741 351.03559"
+     y="0px"
+     x="0px"
+>
+  <path d="m 91.878859,32.707107 83.892861,83.892873 82.61784,-82.617833 58.66388,58.663883 -82.61783,82.61783 83.25469,83.2547 -58.98035,58.98035 -83.2547,-83.25469 L 91.37099,318.32848 32.707107,259.6646 116.79137,175.58033 32.898502,91.687463 Z"
+        fill-opacity="0.5"
+        fill="#000000"
+        stroke="#ffffff"
+        stroke-width="15px"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+   />
+</svg>
diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index 6af8f8b..41ecc4c 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -27,8 +27,9 @@
       </transition>
     </div>
     <div class="close-viewer mobile-only"
-         @click="$emit('close')">
-      X
+         @click="$emit('close')"
+    >
+      <SVGIcon />
     </div>
     <ThumbNav v-if="hasPrev"
               class="thumb-nav thumb-nav--left mobile-only"
@@ -44,10 +45,12 @@
 <script>
 import ThumbNav from '@/components/ThumbNav'
 import imageLoader from '~/mixins/imageLoader.js'
+import SVGIcon from '@/assets/svg/close-wide.svg'
 
 export default {
   components: {
-    ThumbNav
+    ThumbNav,
+    SVGIcon,
   },
   mixins: [ imageLoader ],
   props: {
@@ -170,10 +173,19 @@ export default {
   .close-viewer {
     z-index: 10;
     position: absolute;
-    top: 0;
-    right: 0;
-    font-size: 10em;
+    width: 3rem;
+    height: 3rem;
+    top: calc(#{$site-menu__header-height} + 2px);
+    right: 2px;
     cursor: pointer;
+
+    transition: opacity .3s .2s;
+    opacity: .2;
+
+    &:hover {
+      opacity: .4;
+      animation: rotate .3s ease-in-out 1;
+    }
   }
 
   .image-viewer {
@@ -296,4 +308,22 @@ export default {
     opacity: 0.1;
   }
 }
+
+@keyframes rotate {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+
+  30% {
+    transform: rotate(3deg);
+  }
+
+  60% {
+    transform: rotate(-1deg);
+  }
+
+  80% {
+    transform: rotate(1deg);
+  }
+}
 </style>