adding in funky hide icon

added in new hide icon

app/src/components/ModesCardorg.vue

@@ -106,7 +106,7 @@
           to quickly format your text and add images from websources, you can
           even use html and embed codes.
         </p>
-
+        <SvgButton />
         <div class="btn-row">
           <BaseButton buttonClass="danger" @click="hideTips()">Hide</BaseButton>
         </div>
@@ -120,6 +120,8 @@
 import marked from 'marked'
 import { mapState } from 'vuex'
 
+import SvgButton from '@/components/SvgButton'
+
 export default {
   data: function () {
     return {
@@ -144,6 +146,9 @@ export default {
       //  this.hidetipsstate = false
     },
   },
+  components: {
+    SvgButton,
+  },
 }
 </script>
 

app/src/components/SvgButton.vue

+<template>
+  <div>
+    <!-- Hide icon ONLY for now -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="50"
+      viewBox="0 0 147.899 147.9"
+    >
+      <g transform="translate(-1596.55 -847.55)">
+        <g class="a" transform="translate(1613 868)">
+          <circle class="c" cx="55" cy="55" r="55" />
+          <circle class="d" cx="55" cy="55" r="51.5" />
+        </g>
+        <circle cx="21.5" cy="21.5" r="21.5" transform="translate(1647 901)" />
+        <line class="b" x1="138" y2="138" transform="translate(1601.5 852.5)" />
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="css" scoped>
+.a {
+  fill: #fff;
+  stroke: #000;
+  stroke-width: 7px;
+}
+.b,
+.d {
+  fill: none;
+}
+.b {
+  stroke: #2d9cdb;
+  stroke-width: 14px;
+}
+.c {
+  stroke: none;
+}
+</style>