Add theme :: Seasonal design - Luna New Year (#672)

* add new-year-divider

* update fireworks

* increase particles

* fix styling

* update animation

* fix styling

* set bigger height

* update logo

src/components/common/Logo.vue

@@ -1,14 +1,14 @@
 <template>
   <div v-if="currentNetworkChain === astarChain.SHIDEN">
-    <img src="~assets/img/shiden_logo.png" widht="152" height="44" />
+    <img src="~assets/img/shiden_logo_luna.png" width="200" height="44" />
   </div>
   <div v-else-if="currentNetworkChain === astarChain.SHIBUYA">
     <img src="~assets/img/shibuya_logo.png" width="152" height="55" />
   </div>
   <img
     v-else-if="currentNetworkChain === astarChain.ASTAR"
-    src="~assets/img/astar_logo.png"
-    width="200"
+    src="~assets/img/astar_logo_luna.png"
+    width="190"
     height="78"
   />
   <div v-else></div>

src/components/common/themes/DividerNewYear.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="divider">
+    <div class="first--vector"></div>
+    <div class="year">2023</div>
+    <div class="last--vector"></div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  setup() {},
+});
+</script>
+<style lang="scss" scoped>
+.divider {
+  position: absolute;
+  top: 87px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  z-index: 999;
+}
+.first--vector {
+  width: 80px;
+  height: 2px;
+  background: linear-gradient(
+    270.04deg,
+    #fdc605 -1.11%,
+    #793b02 32.1%,
+    #d9802e 69%,
+    #793b02 104.05%
+  );
+}
+.year {
+  font-style: normal;
+  font-weight: 900;
+  font-size: 16px;
+  line-height: 19px;
+  background: linear-gradient(225deg, #d9802e 0%, #793b02 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.last--vector {
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    270.04deg,
+    #fdc605 -1.11%,
+    #793b02 32.1%,
+    #d9802e 69%,
+    #793b02 104.05%
+  );
+}
+</style>

src/components/common/themes/DividerNewYearMobile.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="divider">
+    <div class="vector"></div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  setup() {},
+});
+</script>
+<style lang="scss" scoped>
+.divider {
+  position: absolute;
+  top: 63px;
+  left: 0px;
+  width: 100%;
+  z-index: 99;
+}
+.vector {
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    270.04deg,
+    #fdc605 -1.11%,
+    #793b02 32.1%,
+    #d9802e 69%,
+    #793b02 104.05%
+  );
+}
+</style>

src/components/common/themes/LunarPack.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="wrapper">
+    <canvas id="canvas" ref="target"></canvas>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent, ref, onMounted } from 'vue';
+export default defineComponent({
+  setup() {
+    const target = ref(null);
+
+    onMounted(() => {
+      window.requestAnimationFrame =
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        window.oRequestAnimationFrame ||
+        window.msRequestAnimationFrame ||
+        function (callback) {
+          window.setTimeout(callback, 1000 / 60);
+        };
+
+      let canvas,
+        ctx,
+        w = 300,
+        h = 200,
+        particles = [],
+        probability = 0.01,
+        xPoint,
+        yPoint;
+
+      function onLoad() {
+        canvas = target.value;
+        ctx = canvas.getContext('2d');
+
+        window.requestAnimationFrame(updateWorld);
+      }
+
+      function updateWorld() {
+        update();
+        paint();
+        window.requestAnimationFrame(updateWorld);
+      }
+
+      function update() {
+        if (particles.length < 500 && Math.random() < probability) {
+          createFirework();
+        }
+        const alive = [];
+        for (let i = 0; i < particles.length; i++) {
+          if (particles[i].move()) {
+            alive.push(particles[i]);
+          }
+        }
+        particles = alive;
+      }
+
+      function paint() {
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.fillStyle = 'rgba(0,0,0,0.2)';
+        ctx.clearRect(0, 0, w, h);
+        ctx.globalCompositeOperation = 'lighter';
+        for (let i = 0; i < particles.length; i++) {
+          particles[i].draw(ctx);
+        }
+      }
+
+      let nFireColors = ['#D2691E', '#FF8C00', '#DAA520'];
+      for (let j = 0; j < 5; j++) {
+        nFireColors = nFireColors.concat(...nFireColors);
+      }
+      nFireColors = nFireColors.concat(...nFireColors);
+
+      function createFirework() {
+        xPoint = Math.random() * (w - 200) + 100;
+        yPoint = Math.random() * (h - 200) + 100;
+        const nFire = Math.random() * 50 + 100;
+        const nFireColor = nFireColors[Math.floor(Math.random() * 3)];
+        for (let i = 0; i < nFire; i++) {
+          const particle = new Particle();
+          particle.color = nFireColor;
+          const vy = Math.sqrt(25 - particle.vx * particle.vx);
+          if (Math.abs(particle.vy) > vy) {
+            particle.vy = particle.vy > 0 ? vy : -vy;
+          }
+          particles.push(particle);
+        }
+      }
+
+      function Particle() {
+        this.w = this.h = Math.random() * 4 + 1;
+
+        this.x = xPoint - this.w / 2;
+        this.y = yPoint - this.h / 2;
+
+        this.vx = (Math.random() - 0.5) * 10;
+        this.vy = (Math.random() - 0.5) * 10;
+
+        this.alpha = Math.random() * 0.5 + 0.5;
+
+        this.color;
+      }
+
+      Particle.prototype = {
+        gravity: 0.05,
+        move: function () {
+          this.x += this.vx;
+          this.vy += this.gravity;
+          this.y += this.vy;
+          this.alpha -= 0.01;
+          if (
+            this.x <= -this.w ||
+            this.x >= screen.width ||
+            this.y >= screen.height ||
+            this.alpha <= 0
+          ) {
+            return false;
+          }
+          return true;
+        },
+        draw: function (c) {
+          c.save();
+          c.beginPath();
+
+          c.translate(this.x + this.w / 2, this.y + this.h / 2);
+          c.arc(0, 0, this.w, 0, Math.PI * 2);
+          c.fillStyle = this.color;
+          c.globalAlpha = this.alpha;
+
+          c.closePath();
+          c.fill();
+          c.restore();
+        },
+      };
+
+      onLoad();
+    });
+
+    return { target };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  position: absolute;
+  top: 300px;
+}
+#canvas {
+  width: 220px;
+  height: 240px;
+  z-index: 9999;
+}
+</style>

src/components/header/Header.vue

@@ -165,13 +165,4 @@ export default defineComponent({
   width: 127px;
   margin-left: -15px;
 }
-
-.m-header {
-  height: 64px !important;
-  padding-left: 20px !important;
-  padding-right: 16px !important;
-  @media (min-width: 500px) {
-    padding-left: 8px !important;
-  }
-}
 </style>

src/components/header/HeaderComp.vue

@@ -39,7 +39,7 @@ export default defineComponent({
   display: flex;
   justify-content: space-between;
   height: 6rem;
-  padding: 1.25rem 0.625rem;
+  padding: 40px 40px 25px 40px;
   background: rgba(247, 247, 248, 0.8);
   mix-blend-mode: normal;
   backdrop-filter: blur(200px);
@@ -80,7 +80,7 @@ export default defineComponent({
 @media screen and (max-width: $lg) {
   .header {
     height: 4rem;
-    padding: 0.5rem 1rem;
+    padding-top: 36px;
     padding-left: 20px;
     padding-right: 16px;
     background: $gray-1;

src/components/sidenav/styles/sidebar-desktop.scss

@@ -5,8 +5,10 @@
 
 .icon {
   text-align: center;
-  width: 170px;
+  width: 200px;
+  height: 78px;
   margin-left: 8px;
+  z-index: 1000;
 }
 
 .iconbase {
@@ -18,11 +20,10 @@
 .sidebar {
   width: 224px;
   height: 100%;
-  padding-top: 18px;
+  padding-top: 24px;
   background: $border-separator-light;
   display: flex;
   flex-direction: column;
-  z-index: 100;
 }
 
 .menu {

src/layouts/DashboardLayout.vue

@@ -1,11 +1,13 @@
 <template>
   <div id="app--main" class="tw-h-screen tw-flex tw-overflow-hidden">
     <template v-if="width >= screenSize.lg">
+      <divider-new-year />
       <sidebar-desktop />
     </template>
     <div class="tw-flex tw-flex-col tw-w-0 tw-flex-1 tw-overflow-y-auto lg:tw-overflow-hidden">
       <portal-header />
       <template v-if="screenSize.lg > width">
+        <divider-new-year-mobile />
         <sidebar-mobile />
       </template>
       <main
@@ -22,6 +24,9 @@
         </div>
       </main>
     </div>
+    <!-- <template v-if="width >= screenSize.lg">
+      
+    </template> -->
   </div>
 </template>
 
@@ -31,12 +36,16 @@ import { useBreakpoints, useGasPrice } from 'src/hooks';
 import PortalHeader from 'src/components/header/Header.vue';
 import SidebarDesktop from 'components/sidenav/SidebarDesktop.vue';
 import SidebarMobile from 'components/sidenav/SidebarMobile.vue';
+import DividerNewYear from 'components/common/themes/DividerNewYear.vue';
+import DividerNewYearMobile from 'components/common/themes/DividerNewYearMobile.vue';
 
 export default defineComponent({
   components: {
     PortalHeader,
     SidebarMobile,
     SidebarDesktop,
+    DividerNewYear,
+    DividerNewYearMobile,
   },
   setup() {
     const { width, screenSize } = useBreakpoints();