From 638a71f36cbe8d192d2b3973a5d5fd98bce299ce Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Wed, 26 Feb 2020 01:15:50 +0100
Subject: [PATCH] Added rudimentary release search.

---
 assets/components/header/header.vue | 202 +++++++++++++++++++++-------
 assets/components/home/home.vue     |   7 +-
 assets/components/search/search.vue |  57 ++++++++
 assets/components/tile/release.vue  |   6 +-
 assets/img/cancel-circle.svg        |   6 +
 assets/img/cancel-circle2.svg       |   5 +
 assets/img/cancel-square.svg        |   6 +
 assets/img/cancel-square2.svg       |   5 +
 assets/img/checkmark.svg            |   5 +
 assets/img/checkmark3.svg           |   5 +
 assets/img/cross.svg                |   5 +
 assets/img/cross2.svg               |   5 +
 assets/img/cross3.svg               |   5 +
 assets/img/minus-circle2.svg        |   5 +
 assets/img/plus-circle2.svg         |   5 +
 assets/js/curate.js                 |   2 +-
 assets/js/releases/actions.js       |  58 ++++++++
 assets/js/router.js                 |   6 +
 migrations/20200225223307_search.js |  14 ++
 public/img/cancel-circle2.svg       |   5 +
 20 files changed, 356 insertions(+), 58 deletions(-)
 create mode 100644 assets/components/search/search.vue
 create mode 100644 assets/img/cancel-circle.svg
 create mode 100644 assets/img/cancel-circle2.svg
 create mode 100644 assets/img/cancel-square.svg
 create mode 100644 assets/img/cancel-square2.svg
 create mode 100644 assets/img/checkmark.svg
 create mode 100644 assets/img/checkmark3.svg
 create mode 100644 assets/img/cross.svg
 create mode 100644 assets/img/cross2.svg
 create mode 100644 assets/img/cross3.svg
 create mode 100644 assets/img/minus-circle2.svg
 create mode 100644 assets/img/plus-circle2.svg
 create mode 100644 migrations/20200225223307_search.js
 create mode 100644 public/img/cancel-circle2.svg

diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index 2e14133c..b965aae4 100644
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -1,70 +1,108 @@
 <template>
     <header class="header">
-        <router-link
-            to="/home"
-            class="logo-link"
-        ><h1 class="logo"><Icon icon="logo" /></h1></router-link>
+        <div>
+            <router-link
+                to="/home"
+                class="logo-link"
+            ><h1 class="logo"><Icon icon="logo" /></h1></router-link>
 
-        <nav class="nav">
-            <ul class="nolist">
-                <li class="nav-item">
-                    <router-link
-                        v-slot="{ href, isActive, navigate }"
-                        to="/actors"
-                    >
-                        <a
-                            class="nav-link"
-                            :href="href"
-                            :class="{ active: isActive }"
-                            @click="navigate"
+            <nav class="nav">
+                <ul class="nolist">
+                    <li class="nav-item">
+                        <router-link
+                            v-slot="{ href, isActive, navigate }"
+                            to="/actors"
                         >
-                            <Icon icon="stars" /><span class="nav-label">Actors</span>
-                        </a>
-                    </router-link>
-                </li>
+                            <a
+                                class="nav-link"
+                                :href="href"
+                                :class="{ active: isActive }"
+                                @click="navigate"
+                            >
+                                <Icon icon="stars" /><span class="nav-label">Actors</span>
+                            </a>
+                        </router-link>
+                    </li>
 
-                <li class="nav-item">
-                    <router-link
-                        v-slot="{ href, isActive, navigate }"
-                        to="/networks"
-                    >
-                        <a
-                            class="nav-link"
-                            :href="href"
-                            :class="{ active: isActive }"
-                            @click="navigate"
+                    <li class="nav-item">
+                        <router-link
+                            v-slot="{ href, isActive, navigate }"
+                            to="/networks"
                         >
-                            <Icon icon="earth2" /><span class="nav-label">Networks</span>
-                        </a>
-                    </router-link>
-                </li>
+                            <a
+                                class="nav-link"
+                                :href="href"
+                                :class="{ active: isActive }"
+                                @click="navigate"
+                            >
+                                <Icon icon="earth2" /><span class="nav-label">Networks</span>
+                            </a>
+                        </router-link>
+                    </li>
 
-                <li class="nav-item">
-                    <router-link
-                        v-slot="{ href, isActive, navigate }"
-                        to="/tags"
-                    >
-                        <a
-                            class="nav-link"
-                            :href="href"
-                            :class="{ active: isActive }"
-                            @click="navigate"
+                    <li class="nav-item">
+                        <router-link
+                            v-slot="{ href, isActive, navigate }"
+                            to="/tags"
                         >
-                            <Icon icon="price-tags" /><span class="nav-label">Tags</span>
-                        </a>
-                    </router-link>
-                </li>
-            </ul>
-        </nav>
+                            <a
+                                class="nav-link"
+                                :href="href"
+                                :class="{ active: isActive }"
+                                @click="navigate"
+                            >
+                                <Icon icon="price-tags" /><span class="nav-label">Tags</span>
+                            </a>
+                        </router-link>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+        <form
+            class="search"
+            @submit.prevent="search"
+        >
+            <input
+                v-model="query"
+                type="search"
+                class="search-input"
+                placeholder="Search..."
+            >
+            <button
+                type="submit"
+                class="search-button"
+            ><Icon
+                icon="search"
+            /></button>
+        </form>
     </header>
 </template>
 
+<script>
+async function search() {
+    this.$router.push({ name: 'search', query: { q: this.query } });
+}
+
+export default {
+    data() {
+        return {
+            query: this.$route.query ? this.$route.query.q : null,
+        };
+    },
+    methods: {
+        search,
+    },
+};
+</script>
+
 <style lang="scss" scoped>
 @import 'theme';
 
 .header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     background: $background;
     color: $primary;
     border-bottom: solid 1px $shadow-hint;
@@ -128,6 +166,70 @@
     }
 }
 
+.search {
+    height: 100%;
+    max-width: 20rem;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 1rem 0 0;
+    border-left: solid 1px $shadow-hint;
+}
+
+.search-input {
+    height: 100%;
+    width: 100%;
+    padding: 0 .5rem;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    outline: none;
+
+    &::placeholder {
+        color: $shadow;
+    }
+
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        padding: .5rem;
+        position: relative;
+        right: 0;
+        color: $text;
+        background: url('/img/cancel-circle2.svg');
+        opacity: .25;
+
+        &:hover {
+            opacity: .5;
+            cursor: pointer;
+        }
+    }
+
+    &:focus::placeholder {
+        color: $shadow-weak;
+    }
+}
+
+.search-button {
+    height: 100%;
+    padding: 0 1rem;
+    background: none;
+    border: none;
+    margin: .3rem 0 0 0;
+
+    .icon {
+        fill: $shadow-weak;
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: $shadow;
+        }
+    }
+}
+
 @media(max-width: $breakpoint0) {
     .nav-label {
         display: none;
diff --git a/assets/components/home/home.vue b/assets/components/home/home.vue
index 1c145b3b..d621739b 100644
--- a/assets/components/home/home.vue
+++ b/assets/components/home/home.vue
@@ -3,10 +3,7 @@
         <FilterBar :fetch-releases="fetchReleases" />
 
         <div class="content-inner">
-            <Releases
-                :releases="releases"
-                referer="home"
-            />
+            <Releases :releases="releases" />
         </div>
     </div>
 </template>
@@ -16,7 +13,7 @@ import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 
 async function fetchReleases() {
-    this.releases = await this.$store.dispatch('fetchReleases', { limit: 250 });
+    this.releases = await this.$store.dispatch('fetchReleases', { limit: 20 });
     this.$store.commit('setCache', {
         target: 'home',
         releases: this.releases,
diff --git a/assets/components/search/search.vue b/assets/components/search/search.vue
new file mode 100644
index 00000000..10f70ce9
--- /dev/null
+++ b/assets/components/search/search.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="content-inner">
+        <span
+            v-if="!loading"
+            class="summary"
+        >Found {{ releases.length }} results for '{{ query }}'</span>
+
+        <span
+            v-else
+            class="summary"
+        >Searching...</span>
+
+        <Releases :releases="releases" />
+    </div>
+</template>
+
+<script>
+import Releases from '../releases/releases.vue';
+
+async function mounted() {
+    const results = await this.$store.dispatch('searchReleases', {
+        query: this.query,
+        limit: 100,
+    });
+
+    this.loading = false;
+
+    if (results) {
+        this.releases = results;
+    }
+}
+
+export default {
+    components: {
+        Releases,
+    },
+    data() {
+        return {
+            loading: true,
+            releases: [],
+            query: this.$route.query.query || this.$route.query.q,
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.summary {
+    display: block;
+    margin: 0 0 1rem 0;
+    color: $shadow;
+    font-weight: bold;
+}
+</style>
diff --git a/assets/components/tile/release.vue b/assets/components/tile/release.vue
index abce7551..2257b850 100644
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -7,7 +7,7 @@
         <span class="poster">
             <span class="details">
                 <router-link
-                    v-if="release.site.independent"
+                    v-if="release.site && release.site.independent"
                     :to="`/network/${release.network.slug}`"
                     class="site site-link"
                 ><img
@@ -16,7 +16,7 @@
                 >{{ release.network.name }}</router-link>
 
                 <span
-                    v-else
+                    v-else-if="release.network"
                     class="site"
                 >
                     <router-link
@@ -37,6 +37,8 @@
                     >{{ release.site.name }}</router-link>
                 </span>
 
+                <span v-else />
+
                 <a
                     v-if="release.date"
                     v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
diff --git a/assets/img/cancel-circle.svg b/assets/img/cancel-circle.svg
new file mode 100644
index 00000000..b01a4e25
--- /dev/null
+++ b/assets/img/cancel-circle.svg
@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cancel-circle</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"></path>
+<path d="M10.5 4l-2.5 2.5-2.5-2.5-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5 2.5-2.5z"></path>
+</svg>
diff --git a/assets/img/cancel-circle2.svg b/assets/img/cancel-circle2.svg
new file mode 100644
index 00000000..18ceaa72
--- /dev/null
+++ b/assets/img/cancel-circle2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cancel-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM12 10.5l-1.5 1.5-2.5-2.5-2.5 2.5-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5 2.5 2.5 2.5-2.5 1.5 1.5-2.5 2.5 2.5 2.5z"></path>
+</svg>
diff --git a/assets/img/cancel-square.svg b/assets/img/cancel-square.svg
new file mode 100644
index 00000000..f643b031
--- /dev/null
+++ b/assets/img/cancel-square.svg
@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cancel-square</title>
+<path d="M13.996 2c0.001 0.001 0.003 0.002 0.004 0.004v11.993c-0.001 0.001-0.002 0.003-0.004 0.004h-11.993c-0.001-0.001-0.003-0.002-0.004-0.004v-11.993c0.001-0.001 0.002-0.003 0.004-0.004h11.993zM14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2v0z"></path>
+<path d="M10.5 4l-2.5 2.5-2.5-2.5-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5 2.5-2.5z"></path>
+</svg>
diff --git a/assets/img/cancel-square2.svg b/assets/img/cancel-square2.svg
new file mode 100644
index 00000000..3ba120d4
--- /dev/null
+++ b/assets/img/cancel-square2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cancel-square2</title>
+<path d="M14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM12.457 11.043l-1.414 1.414-3.043-3.043-3.043 3.043-1.414-1.414 3.043-3.043-3.043-3.043 1.414-1.414 3.043 3.043 3.043-3.043 1.414 1.414-3.043 3.043 3.043 3.043z"></path>
+</svg>
diff --git a/assets/img/checkmark.svg b/assets/img/checkmark.svg
new file mode 100644
index 00000000..48b07f39
--- /dev/null
+++ b/assets/img/checkmark.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>checkmark</title>
+<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z"></path>
+</svg>
diff --git a/assets/img/checkmark3.svg b/assets/img/checkmark3.svg
new file mode 100644
index 00000000..08f8c3c1
--- /dev/null
+++ b/assets/img/checkmark3.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>checkmark3</title>
+<path d="M14 2.5l-8.5 8.5-3.5-3.5-1.5 1.5 5 5 10-10z"></path>
+</svg>
diff --git a/assets/img/cross.svg b/assets/img/cross.svg
new file mode 100644
index 00000000..9ffcb7fd
--- /dev/null
+++ b/assets/img/cross.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cross</title>
+<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"></path>
+</svg>
diff --git a/assets/img/cross2.svg b/assets/img/cross2.svg
new file mode 100644
index 00000000..0b03beef
--- /dev/null
+++ b/assets/img/cross2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cross2</title>
+<path d="M13.957 3.457l-1.414-1.414-4.543 4.543-4.543-4.543-1.414 1.414 4.543 4.543-4.543 4.543 1.414 1.414 4.543-4.543 4.543 4.543 1.414-1.414-4.543-4.543z"></path>
+</svg>
diff --git a/assets/img/cross3.svg b/assets/img/cross3.svg
new file mode 100644
index 00000000..c45560d8
--- /dev/null
+++ b/assets/img/cross3.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cross3</title>
+<path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z"></path>
+</svg>
diff --git a/assets/img/minus-circle2.svg b/assets/img/minus-circle2.svg
new file mode 100644
index 00000000..e06595e1
--- /dev/null
+++ b/assets/img/minus-circle2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>minus-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM13 9h-10v-2h10v2z"></path>
+</svg>
diff --git a/assets/img/plus-circle2.svg b/assets/img/plus-circle2.svg
new file mode 100644
index 00000000..814d41db
--- /dev/null
+++ b/assets/img/plus-circle2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>plus-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM9 9v4h-2v-4h-4v-2h4v-4h2v4h4v2h-4z"></path>
+</svg>
diff --git a/assets/js/curate.js b/assets/js/curate.js
index ee65975d..ba8fb7eb 100644
--- a/assets/js/curate.js
+++ b/assets/js/curate.js
@@ -23,9 +23,9 @@ function curateRelease(release) {
         actors: [],
         poster: release.poster && release.poster.media,
         tags: release.tags ? release.tags.map(({ tag }) => tag) : [],
-        network: release.site.network,
     };
 
+    if (release.site) curatedRelease.network = release.site.network;
     if (release.photos) curatedRelease.photos = release.photos.map(({ media }) => media);
     if (release.covers) curatedRelease.covers = release.covers.map(({ media }) => media);
     if (release.trailer) curatedRelease.trailer = release.trailer.media;
diff --git a/assets/js/releases/actions.js b/assets/js/releases/actions.js
index 7c97decc..8ef89651 100644
--- a/assets/js/releases/actions.js
+++ b/assets/js/releases/actions.js
@@ -25,6 +25,63 @@ function initReleasesActions(store, _router) {
         return releases.map(release => curateRelease(release));
     }
 
+    async function searchReleases({ _commit }, { query, limit = 20 }) {
+        const res = await graphql(`
+            query SearchReleases(
+                $query: String!
+                $limit: Int = 20
+            ) {
+                releases: searchReleases(
+                    search: $query
+                    first: $limit
+                ) {
+                    id
+                    title
+                    date
+                    url
+                    site {
+                        id
+                        slug
+                        name
+                        url
+                        network {
+                            id
+                            slug
+                            name
+                            url
+                        }
+                    }
+                    actors: releasesActors {
+                        actor {
+                            id
+                            slug
+                            name
+                        }
+                    }
+                    tags: releasesTags {
+                        tag {
+                            id
+                            name
+                            slug
+                        }
+                    }
+                    poster: releasesPosterByReleaseId {
+                        media {
+                            thumbnail
+                        }
+                    }
+                }
+            }
+        `, {
+            query,
+            limit,
+        });
+
+        if (!res) return [];
+
+        return res.releases.map(release => curateRelease(release));
+    }
+
     async function fetchReleaseById({ _commit }, releaseId) {
         // const release = await get(`/releases/${releaseId}`);
 
@@ -42,6 +99,7 @@ function initReleasesActions(store, _router) {
     return {
         fetchReleases,
         fetchReleaseById,
+        searchReleases,
     };
 }
 
diff --git a/assets/js/router.js b/assets/js/router.js
index e97da921..503458a3 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -10,6 +10,7 @@ import Actor from '../components/actors/actor.vue';
 import Actors from '../components/actors/actors.vue';
 import Tag from '../components/tags/tag.vue';
 import Tags from '../components/tags/tags.vue';
+import Search from '../components/search/search.vue';
 import NotFound from '../components/errors/404.vue';
 
 Vue.use(VueRouter);
@@ -69,6 +70,11 @@ const routes = [
         component: Tags,
         name: 'tags',
     },
+    {
+        path: '/search',
+        component: Search,
+        name: 'search',
+    },
     {
         path: '*',
         component: NotFound,
diff --git a/migrations/20200225223307_search.js b/migrations/20200225223307_search.js
new file mode 100644
index 00000000..bf713d14
--- /dev/null
+++ b/migrations/20200225223307_search.js
@@ -0,0 +1,14 @@
+exports.up = knex => Promise.resolve()
+    .then(() => knex.raw(`
+        CREATE FUNCTION search_releases(search text) RETURNS SETOF releases AS $$
+                SELECT * FROM releases
+                WHERE
+                title ILIKE ('%' || search || '%') OR
+                url ILIKE ('%' || search || '%')
+        $$ LANGUAGE SQL STABLE;
+    `));
+
+exports.down = knex => Promise.resolve()
+    .then(() => knex.raw(`
+        DROP FUNCTION IF EXISTS search_releases;
+    `));
diff --git a/public/img/cancel-circle2.svg b/public/img/cancel-circle2.svg
new file mode 100644
index 00000000..18ceaa72
--- /dev/null
+++ b/public/img/cancel-circle2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>cancel-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM12 10.5l-1.5 1.5-2.5-2.5-2.5 2.5-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5 2.5 2.5 2.5-2.5 1.5 1.5-2.5 2.5 2.5 2.5z"></path>
+</svg>