implement what's new facelift

src/assets/scss/_overrides.scss

@@ -13,6 +13,7 @@ $dark: #f0f7f9;
 $color-text-primary: #1d1e21;
 $color-text-secondary: #ffffff;
 $color-text-muted: #747e8d;
+$color-text-grey: #3d4767;
 
 $font-size-base: 0.75rem; // Assumes the browse, typically `16px`
 $font-size-lg: 1rem;

src/assets/scss/style.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800&display=swap');
 @import 'overrides';
 @import 'bootstrap';
 @import 'tooltip';

src/assets/whats_new.json

@@ -0,0 +1,21 @@
+[
+  {
+    "page": "1",
+    "title": "Ledger Integration",
+    "description": "Swaps enabled loreum ipsum loreum ipsum oreum ipsum loreum ipsum. Swaps enabled loreum ipsum loreum ipsum oreum ipsum loreum ipsum. Swaps enabled loreum ipsum loreum ipsum oreum ipsum loreum ipsum. Swaps enabled loreum ipsum loreum ipsum oreum ipsum loreum ipsum"
+  },
+  {
+    "page": "2",
+    "title": "Did You Know...",
+    "description": "You can now view and manage your NFTs across Ethereum, Polygon and Arbitrum.  Loreum ipsum loreum ipsum oreum ipsum loreum ipsum"
+  },
+  {
+    "page": "3",
+    "title": "Issues Fixed",
+    "content": [
+      "Hop transaction status",
+      "UX validation prevents the user from making a swap",
+      "Thornchain swaps minimum transaction value and slippage"
+    ]
+  }
+]

src/components/Modal.vue

@@ -11,11 +11,12 @@
         :class="{
           'modal-dialog': true,
           [dialog]: true,
-          [type]: true
+          [type]: true,
+          'full-height': isFullHeight
         }"
         role="document"
       >
-        <div class="modal-content">
+        <div :class="['modal-content', isFullHeight ? 'full-height' : '']">
           <div class="modal-header">
             <div class="modal-header-container" v-if="hasSlot('header')">
               <slot name="header"></slot>
@@ -59,6 +60,10 @@ export default {
     closeOutside: {
       type: Boolean,
       default: false
+    },
+    isFullHeight: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -83,6 +88,13 @@ export default {
 
 .modal-dialog-centered {
   min-height: calc(100% - 40px) !important;
+  &.full-height {
+    min-height: 100vh !important;
+    margin: 0 !important;
+    .modal-header {
+      padding: 0 !important;
+    }
+  }
 }
 
 .modal {
@@ -99,6 +111,13 @@ export default {
   overflow: auto;
   max-height: 530px;
 
+  &.full-height {
+    max-height: 100%;
+    height: 100vh;
+    width: 100%;
+    padding: 48px;
+  }
+
   .modal-body {
     padding: 5px 20px 0 20px;
   }
@@ -111,6 +130,7 @@ export default {
 }
 
 .modal-header {
+  align-items: center !important;
   border-bottom: 0 !important;
   padding: 20px 20px 0 20px !important;
   svg.modal-close {

src/components/NFT/NFTAsset.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script>
-import Star from '@/components/NFT/Star'
-import NFTQuantity from '@/components/NFT/NFTQuantity.vue'
+import Star from '@/components/icons/Star'
+import NFTQuantity from '@/components/icons/NFTQuantity.vue'
 import NFTThumbnailImage from '@/assets/nft_thumbnail.png'
 
 export default {

src/components/WhatsNewModal.vue

@@ -1,68 +1,88 @@
 <template>
-  <Modal v-if="open" @close="close" body-class="">
+  <Modal v-if="open" @close="close" body-class="" type="modal-lg" isFullHeight>
     <template #header>
-      <h6>What's New</h6>
-    </template>
-    <template>
-      <div class="items">
-        <div class="item">
-          <div class="item-icon">
-            <ChartIcon />
-          </div>
-          <div class="item-content">
-            <pre class="text-wrap">- Injection Architecture change</pre>
-            <pre class="text-wrap">- New crypto-assets package update (architecture change)</pre>
-            <pre class="text-wrap">- Unstoppable domain bug fix</pre>
-            <pre class="text-wrap">- NFT notifications</pre>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template>
-      <h6 class="subHeader">Did you know you can…</h6>
+      <Logo />
     </template>
+    <h6 class="modal-header mt-4 text-uppercase">What's New &#124; {{ appVersion }}</h6>
+
     <template>
-      <div class="items">
-        <div class="item">
-          <div class="item-icon">
-            <ChartIcon />
-          </div>
-          <div class="item-content">
-            <pre class="text-wrap">
-Use a human-readable address (like liquality.wallet) to send assets using Liquality?</pre
-            >
-          </div>
+      <div v-for="item in whatsNewModalContent" :key="item.page">
+        <div v-if="item.page == currentView">
+          <h2 class="page-title">{{ item.title }}</h2>
+          <p v-if="item.description" class="mt-3">{{ item.description }}</p>
+          <ul v-if="item.content">
+            <li v-for="(listItem, index) in item.content" :key="index">
+              {{ listItem }}
+            </li>
+          </ul>
         </div>
       </div>
     </template>
     <template #footer>
       <div class="footer">
-        <div class="text-muted">Version {{ appVersion }}</div>
-        <button class="btn btn-outline-clear" id="wats_new_close_btn" @click="close">Close</button>
+        <div class="carousel">
+          <span
+            v-for="(line, index) in carouselLines"
+            :key="line"
+            class="carousel-line"
+            :class="index + 1 == currentView ? 'active' : ''"
+            @click="currentView = index + 1"
+          ></span>
+        </div>
+        <div class="footer-buttons">
+          <button
+            class="icon-wrapper"
+            :class="currentView === whatsNewModalContent.length ? 'active' : ''"
+            @click="currentView -= 1"
+            :disabled="currentView === 1"
+          >
+            <ArrowLeftIcon />
+          </button>
+          <button
+            class="icon-wrapper"
+            :class="currentView < whatsNewModalContent.length ? 'active' : ''"
+            @click="currentView += 1"
+            :disabled="currentView === whatsNewModalContent.length"
+          >
+            <ArrowRightIcon />
+          </button>
+        </div>
       </div>
     </template>
   </Modal>
 </template>
 <script>
 import Modal from '@/components/Modal'
-import ChartIcon from '@/assets/icons/chart_icon.svg'
-import { version } from '../../package.json'
+import whatsNew from '@/assets/whats_new.json'
+import Logo from '@/components/icons/Logo'
+import { version } from '/package.json'
 import { mapActions, mapState } from 'vuex'
+import ArrowLeftIcon from '@/assets/icons/arrow_left.svg'
+import ArrowRightIcon from '@/assets/icons/arrow_right.svg'
 
 export default {
   components: {
     Modal,
-    ChartIcon
+    ArrowRightIcon,
+    ArrowLeftIcon,
+    Logo
   },
   data: function () {
     return {
-      open: false
+      open: true,
+      currentView: 1
     }
   },
   computed: {
     ...mapState(['whatsNewModalVersion', 'termsAcceptedAt', 'unlockedAt']),
     appVersion() {
       return version
+    },
+    whatsNewModalContent() {
+      return whatsNew
+    },
+    carouselLines() {
+      return this.whatsNewModalContent.length
     }
   },
   methods: {
@@ -81,72 +101,89 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h6 {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  text-transform: uppercase;
+p,
+li {
+  font-size: 13px;
+  line-height: 19px;
 }
 
-h3 {
-  font-style: normal;
-  font-weight: 300;
-  font-size: 10px;
-  line-height: 20px;
-  text-transform: uppercase;
+.header {
+  display: flex;
+  width: 100%;
+  align-items: center;
 }
-
-.subHeader {
-  padding-left: 20px;
+.modal-header {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 22px;
+  letter-spacing: 0.92px;
+  color: $color-text-grey;
+  padding-left: 0 !important;
 }
-
-.items {
-  overflow-y: auto;
+.page-title {
+  font-weight: 900;
+  font-size: 32px;
+  line-height: 36px;
+  letter-spacing: 1px;
+  color: $color-text-grey;
+}
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
-  flex: 1;
   flex-direction: column;
-  height: 100%;
-  padding: 0px 0px 40px 0px;
+  align-items: center;
+  padding: 48px;
 
-  .item {
+  .carousel {
     display: flex;
-    border-bottom: 1px solid $hr-border-color;
-    align-items: flex-start;
-    padding: 20px 0px;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    width: 100%;
+    gap: 3px;
 
-    .item-icon {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      height: 35px;
-      padding: 0px 0px 0px 20px;
-      svg {
-        height: 100%;
-      }
-    }
+    &-line {
+      width: 85px;
+      height: 0px;
+      border: 1px solid #bfc3c7;
+      cursor: pointer;
 
-    .item-content {
-      padding: 0px 20px;
+      &.active {
+        border: 1px solid #7700d5;
+      }
     }
   }
-}
+  .footer-buttons {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 20px;
+    width: 100%;
 
-.footer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
+    .icon-wrapper {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 1px solid $color-text-grey;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
 
-  .btn {
-    margin-top: 20px;
-  }
-}
+      &.active {
+        background: #9742fb;
+        border: 1px solid #9742fb;
 
-.header {
-  display: flex;
-  width: 100%;
-  align-items: center;
+        svg {
+          > path {
+            fill: #fff;
+          }
+        }
+      }
+    }
+  }
 }
 </style>