Feature/Mor20-main-page (#52)

* added info-card * added mor20 main-page, router refactoring * added comment --------- Co-authored-by: Yehor Podporinov <[email protected]>
MorpheusAIs · Jun 25, 2024 · 053f3b3 · 053f3b3
1 parent 1b346a5
commit 053f3b3
Show file tree

Hide file tree

Showing 25 changed files with 717 additions and 152 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -69,15 +69,15 @@ init()
 
 .app .app__navbar {
   &--desktop {
-    @include respond-to(medium) {
+    @include respond-to(large) {
       display: none;
     }
   }
 
   &--mobile {
     display: none;
 
-    @include respond-to(medium) {
+    @include respond-to(large) {
       display: flex;
     }
   }

diff --git a/src/assets/icons/arbitrum-alt-icon.svg b/src/assets/icons/arbitrum-alt-icon.svg
diff --git a/src/assets/icons/edit-icon.svg b/src/assets/icons/edit-icon.svg
diff --git a/src/assets/icons/ethereum-alt-icon.svg b/src/assets/icons/ethereum-alt-icon.svg
diff --git a/src/common/AppButton.vue b/src/common/AppButton.vue
@@ -517,12 +517,15 @@ $button-transition: var(--transition-duration-fast)
     --app-button-link-text-focused: var(--primary-main);
     --app-button-link-text-active: var(--primary-main);
     --app-button-link-text-disabled: var(--disable-secondary-main);
-    --app-button-icon: var(--primary-main);
 
     --app-button-link-underline: transparent;
     --app-button-link-underline-hover: var(--primary-main);
     --app-button-link-underline-focus: var(--primary-main);
     --app-button-link-underline-active: var(--primary-main);
+
+    &:not(.app-button--icon-only) {
+      --app-button-icon: var(--primary-main);
+    }
   }
 
   &--border-circle {

diff --git a/src/common/AppLogo.vue b/src/common/AppLogo.vue
@@ -19,7 +19,7 @@ import { useRoute } from '@/router'
 const route = useRoute()
 
 const onClick = () => {
-  if (route.name === ROUTE_NAMES.appCommunity) window.location.reload()
+  if (route.name === ROUTE_NAMES.appCapital) window.location.reload()
 }
 </script>
 

diff --git a/src/common/AppNavbar.vue b/src/common/AppNavbar.vue
@@ -5,10 +5,11 @@
       <app-button
         v-for="(link, idx) in links"
         :key="idx"
-        :text="link.text"
+        :route="link.route"
         :href="link.href"
-        target="_blank"
-        rel="noopener noreferrer"
+        :text="link.text"
+        :target="link.href ? '_blank' : undefined"
+        :rel="link.href ? 'noopener noreferrer' : undefined"
         scheme="link"
         color="none"
         class="app-navbar__link"
@@ -67,6 +68,8 @@ $z-index: 1000;
 }
 
 .app-navbar .app-navbar__link {
+  cursor: pointer;
+
   @include body-3-regular;
 
   &.router-link-active {

diff --git a/src/common/AppNavbarMobile.vue b/src/common/AppNavbarMobile.vue
@@ -14,17 +14,18 @@
       </transition>
     </button>
     <transition name="fade" appear>
-      <div v-if="isExtShown" class="app-navbar-mobile__ext-wrp">
-        <transition name="slide" appear>
-          <div class="app-navbar-mobile__ext">
+      <div v-show="isExtShown" class="app-navbar-mobile__ext-wrp">
+        <transition name="slide">
+          <div v-show="isExtShown" class="app-navbar-mobile__ext">
             <nav class="app-navbar-mobile__nav">
               <app-button
                 v-for="(link, idx) in links"
                 :key="idx"
-                :text="link.text"
+                :route="link.route"
                 :href="link.href"
-                target="_blank"
-                rel="noopener noreferrer"
+                :text="link.text"
+                :target="link.href ? '_blank' : undefined"
+                :rel="link.href ? 'noopener noreferrer' : undefined"
                 scheme="link"
                 color="none"
                 class="app-navbar-mobile__link"
@@ -97,8 +98,8 @@ $z-index: 1000;
 }
 
 .app-navbar-mobile__burger-icon {
-  height: toRem(24);
-  width: toRem(24);
+  height: toRem(30);
+  width: toRem(30);
   color: var(--text-secondary-light);
   transition: var(--transition-duration-fast) var(--transition-timing-default);
 
@@ -107,6 +108,11 @@ $z-index: 1000;
   .app-navbar-mobile__burger-btn:not([disabled]):active & {
     color: var(--primary-main);
   }
+
+  @include respond-to(medium) {
+    height: toRem(24);
+    width: toRem(24);
+  }
 }
 
 .app-navbar-mobile__ext-wrp {
@@ -133,7 +139,7 @@ $z-index: 1000;
 
 .app-navbar-mobile .app-navbar-mobile__link {
   &.router-link-active {
-    @include respond-to(medium) {
+    @include respond-to(large) {
       font-family: var(--app-font-family);
       font-size: toRem(18);
       font-weight: 600;
@@ -142,7 +148,7 @@ $z-index: 1000;
     }
   }
 
-  @include respond-to(medium) {
+  @include respond-to(large) {
     font-family: var(--app-font-family);
     font-size: toRem(18);
     font-weight: 400;

diff --git a/src/common/InfoCard.vue b/src/common/InfoCard.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="info-card" :class="{ 'info-card--loading': isLoading }">
+    <div class="info-card__content">
+      <div class="info-card__title-wrp">
+        <h4 class="info-card__title">
+          {{ card.title }}
+        </h4>
+        <div class="info-card__title-icon-wrp">
+          <app-icon class="info-card__title-icon" :name="card.icon" />
+        </div>
+      </div>
+      <p class="info-card__description">
+        {{ card.description }}
+      </p>
+      <app-button
+        class="info-card__address"
+        scheme="link"
+        color="none"
+        target="_blank"
+        rel="noopener noreferrer"
+        :text="card.address"
+        :icon-right="$icons.externalLink"
+        :href="card.link"
+      />
+    </div>
+    <div class="info-card__footer">
+      <app-button
+        class="info-card__show-more-btn"
+        scheme="link"
+        color="none"
+        target="_blank"
+        rel="noopener noreferrer"
+        href="#"
+        :text="$t('info-card.show-more')"
+      />
+      <div class="info-card__edit-btn-wrp">
+        <app-button
+          class="info-card__edit-btn"
+          scheme="link"
+          color="none"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="#"
+          :icon-right="$icons.edit"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type InfoCardType } from '@/types'
+import AppButton from './AppButton.vue'
+import AppIcon from './AppIcon.vue'
+
+withDefaults(
+  defineProps<{
+    card: InfoCardType.Card
+    isLoading?: boolean
+  }>(),
+  {
+    isLoading: false,
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.info-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: toRem(1) solid;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(
+    95.36deg,
+    rgba(255, 255, 255, 0.48) 0%,
+    rgba(255, 255, 255, 0.08) 100%
+  );
+  background: linear-gradient(
+    95.36deg,
+    rgba(57, 99, 58, 0.04) 0%,
+    rgba(38, 57, 57, 0.5) 100%
+  );
+
+  &--loading {
+    &:before {
+      $z-index: 2;
+
+      z-index: $z-index;
+    }
+
+    @include skeleton;
+
+    border-radius: 0;
+  }
+}
+
+.info-card__content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: toRem(20) toRem(20) toRem(24);
+
+  @include respond-to(medium) {
+    padding: toRem(16) toRem(16) toRem(20);
+  }
+}
+
+.info-card__title-wrp {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.info-card__title {
+  color: var(--primary-main);
+}
+
+.info-card__title-icon-wrp {
+  padding: toRem(8);
+  border: toRem(1) solid;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(
+    95.36deg,
+    rgba(255, 255, 255, 0.48) 0%,
+    rgba(255, 255, 255, 0.08) 100%
+  );
+  background: linear-gradient(
+    95.36deg,
+    rgba(57, 99, 58, 0.04) 0%,
+    rgba(38, 57, 57, 0.5) 100%
+  );
+}
+
+.info-card__title-icon {
+  height: toRem(28);
+  width: toRem(28);
+
+  @include respond-to(medium) {
+    height: toRem(24);
+    width: toRem(24);
+  }
+}
+
+.info-card__description {
+  $color: #cccccc;
+
+  margin-top: toRem(16);
+  color: $color;
+  white-space: pre-line;
+}
+
+.info-card .info-card__address {
+  display: grid;
+  width: 100%;
+  grid-auto-flow: column;
+  margin-top: auto;
+  justify-content: start;
+
+  @include body-3-semi-bold;
+}
+
+.info-card__footer {
+  display: flex;
+  align-items: center;
+  border-top: toRem(1) solid #494949;
+}
+
+.info-card .info-card__show-more-btn {
+  height: toRem(48);
+  flex: 1 toRem(286);
+}
+
+.info-card__edit-btn-wrp {
+  flex-basis: toRem(111);
+  border-left: toRem(1) solid #494949;
+}
+
+.info-card .info-card__edit-btn {
+  height: toRem(48);
+  width: 100%;
+}
+</style>
diff --git a/src/common/NetworkSwitch.vue b/src/common/NetworkSwitch.vue
@@ -32,8 +32,7 @@
 
 <script lang="ts" setup>
 import { useI18n } from '@/composables'
-import { NETWORK_IDS, ROUTE_NAMES } from '@/enums'
-import { useRouter } from '@/router'
+import { NETWORK_IDS } from '@/enums'
 import { useWeb3ProvidersStore } from '@/store'
 import { Route } from '@/types'
 import { onClickOutside } from '@vueuse/core'
@@ -46,37 +45,20 @@ type Link = {
   route: Route
 }
 
-const MAINNET_ROUTES_MAP: Partial<Record<ROUTE_NAMES, ROUTE_NAMES>> = {
-  [ROUTE_NAMES.appTestnetCapital]: ROUTE_NAMES.appMainnetCapital,
-}
-
-const TESTNET_ROUTES_MAP: Partial<Record<ROUTE_NAMES, ROUTE_NAMES>> = {
-  [ROUTE_NAMES.appMainnetCapital]: ROUTE_NAMES.appTestnetCapital,
-}
-
 const rootElement = ref<HTMLDivElement | null>(null)
 const isDropMenuShown = ref(false)
 
 const { t } = useI18n()
-const { currentRoute } = useRouter()
 const web3ProvidersStore = useWeb3ProvidersStore()
 
 const links = computed<Link[]>(() => [
   {
     title: t('network-switch.mainnet'),
-    route: {
-      name:
-        MAINNET_ROUTES_MAP[currentRoute.value.name as ROUTE_NAMES] ||
-        ROUTE_NAMES.appMainnet,
-    },
+    route: { query: { network: NETWORK_IDS.mainnet } } as Route,
   },
   {
     title: t('network-switch.testnet'),
-    route: {
-      name:
-        TESTNET_ROUTES_MAP[currentRoute.value.name as ROUTE_NAMES] ||
-        ROUTE_NAMES.appTestnet,
-    },
+    route: { query: { network: NETWORK_IDS.testnet } } as Route,
   },
 ])
 

diff --git a/src/common/index.ts b/src/common/index.ts
@@ -10,6 +10,7 @@ export { default as ConnectWalletButton } from './ConnectWalletButton.vue'
 export { default as CopyButton } from './CopyButton.vue'
 export { default as DropMenu } from './DropMenu.vue'
 export { default as InfoBar } from './InfoBar.vue'
+export { default as InfoCard } from './InfoCard.vue'
 export { default as InfoDashboard } from './InfoDashboard/index.vue'
 export { default as NetworkSwitch } from './NetworkSwitch.vue'
 export { default as WalletBalances } from './WalletBalances.vue'