Merge #625: Add option to close banner

37d1466 refactor: layout adjusted (Mario)
7a85ba5 refactor: close banner icon now is centered (Mario)
c0ab028 feat: added cursor pointer (Mario)
a1dd945 feat: added option to close banner (Mario)

Pull request description:

  Banner could use a button to allow the user to close it.

ACKs for top commit:
  josecelano:
    ACK 37d1466

Tree-SHA512: 25e74007450b630c8724cb55b4ec1b38e890f2a24a6f9583d5155074baf09647b5dd8a44e13ee948f57849001e7f71df9b43097f7ed02fb5d4770dc5a1b7ee90

Author: josecelano

components/demo/Banner.vue

@@ -1,7 +1,21 @@
 <template>
-  <div v-if="isDemoMode" class="demo-banner">
-    {{ warning }}<NuxtLink to="/terms">
-      Read our terms.</NuxtLink>
+  <div v-if="isDemoMode" id="banner" class="demo-banner">
+    <div id="termsWarning"> {{ warning }}<NuxtLink to="/terms">
+      Read our terms.</NuxtLink></div>
+    <div id="closeButton"> <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-x cursor-pointer"
+      @click="closeBanner()"
+    ><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+    </svg></div>
   </div>
 </template>
 
@@ -27,18 +41,31 @@ watch(
   { immediate: true }
 );
 
+function closeBanner () {
+  document.getElementById("banner").style.display = "none";
+}
+
 </script>
 
 <style scoped>
 .demo-banner {
   background-color: #f5b14a;
   color: #000;
-  width: 100%;
   padding: 10px;
   text-align: center;
-  /*position: fixed;*/
-  top: 0;
-  left: 0;
+  width: 100%;
   z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#closeButton {
+padding-inline: 10px;
+}
+
+.feather:hover {
+  stroke: rgb(255, 255, 255);
+  stroke-opacity: 75%;
 }
 </style>