New tutorial component

changes/mario_3345-new-tutorial-component

@@ -0,0 +1 @@
+[Added] [#3345](https://github.com/cosmos/lunie/issues/3345) New tutorial component @mariopino

src/components/common/TmModalTutorial.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="show"
+    v-focus-last
+    class="tm-modal-tutorial"
+    tabindex="0"
+    @keyup.esc="close()"
+  >
+    <main class="tm-modal-tutorial-main">
+      <slot name="main" />
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: `tm-modal-tutorial`,
+  props: {
+    close: {
+      type: Function,
+      required: true
+    },
+    show: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tm-modal-tutorial {
+  position: fixed;
+  bottom: 0;
+  right: 1rem;
+  z-index: var(--z-modal);
+  width: 22rem;
+  height: 28rem;
+  background: var(--app-fg);
+  display: flex;
+  backdrop-filter: blur(0.5em);
+}
+
+.tm-modal-tutorial h1 {
+  font-weight: 500;
+  font-size: 1.6rem;
+  color: var(--bright);
+  margin-bottom: 1rem;
+}
+
+.tm-modal-tutorial b {
+  font-weight: 500;
+  color: var(--bright);
+}
+
+.tm-modal-tutorial-main {
+  display: flex;
+  flex-flow: column;
+  padding: 1.5rem;
+}
+</style>

src/components/wallet/PagePortfolio.vue

@@ -3,6 +3,21 @@
     <template slot="managed-body">
       <DelegationsOverview />
       <Undelegations />
+      <TmModalTutorial :show="showTutorial" :close="closeTutorial">
+        <div slot="main" class="tutorial">
+          <h1>An awesome tutorial</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+          <TmBtn v-focus value="Next" type="primary" />
+        </div>
+      </TmModalTutorial>
     </template>
   </TmPage>
 </template>
@@ -12,12 +27,36 @@ import TmPage from "common/TmPage"
 import DelegationsOverview from "staking/DelegationsOverview"
 import Undelegations from "staking/Undelegations"
 
+// Just to test tutorial component
+import TmModalTutorial from "common/TmModalTutorial"
+import TmBtn from "src/components/common/TmBtn"
+
 export default {
   name: `page-portfolio`,
   components: {
     TmPage,
     Undelegations,
-    DelegationsOverview
+    DelegationsOverview,
+    // Just to test tutorial component
+    TmModalTutorial,
+    TmBtn
+  },
+  // Just to test tutorial component
+  data: () => ({
+    showTutorial: true
+  }),
+  // Just to test tutorial component
+  methods: {
+    closeTutorial() {
+      this.showTutorial = false
+    }
   }
 }
 </script>
+
+<style>
+.tutorial .button {
+  width: 100%;
+  margin-top: 2rem;
+}
+</style>