From 808c35034a74a52ac5f6625b340056f63bb3b04a Mon Sep 17 00:00:00 2001 From: Ayumi Takahashi Date: Wed, 6 Dec 2023 14:53:11 +0900 Subject: [PATCH 01/30] add feature dApp area style --- src/staking-v3/components/FeatureDapp.vue | 47 +++++-- .../components/styles/discover-v3.scss | 4 +- .../components/styles/feature-dapp.scss | 115 +++++++++++++----- 3 files changed, 123 insertions(+), 43 deletions(-) diff --git a/src/staking-v3/components/FeatureDapp.vue b/src/staking-v3/components/FeatureDapp.vue index d30e078f1..4bc5d6b20 100644 --- a/src/staking-v3/components/FeatureDapp.vue +++ b/src/staking-v3/components/FeatureDapp.vue @@ -5,7 +5,7 @@ isVotingPeriod ? $t('stakingV3.votingNow') : $t('stakingV3.newDappPromotion') }} -
+
{{ isVotingPeriod ? $t('stakingV3.voteToday') : promotedDapp?.shortDescription }}
@@ -15,9 +15,27 @@ @click="navigateToVote()" > {{ $t('stakingV3.voteNow') }} + + + + - + {{ $t('stakingV3.stakeOn', { name: promotedDapp?.name }) }} + + + +
@@ -29,16 +47,25 @@ 2 /14 - 9.7% - 2.3% + + + 9.7 + % + + 2.3 + % - + + -
-
- +
+ +
diff --git a/src/staking-v3/components/styles/discover-v3.scss b/src/staking-v3/components/styles/discover-v3.scss index 54e926c99..0f56b9391 100644 --- a/src/staking-v3/components/styles/discover-v3.scss +++ b/src/staking-v3/components/styles/discover-v3.scss @@ -4,7 +4,7 @@ display: flex; flex-direction: column; align-items: center; - margin-top: 34px; - margin-bottom: 34px; + margin: 34px auto; row-gap: 40px; + max-width: 1300px; } diff --git a/src/staking-v3/components/styles/feature-dapp.scss b/src/staking-v3/components/styles/feature-dapp.scss index 6830af93b..fb0c40eb2 100644 --- a/src/staking-v3/components/styles/feature-dapp.scss +++ b/src/staking-v3/components/styles/feature-dapp.scss @@ -2,70 +2,113 @@ .wrapper--promo { padding: 0 16px; - margin-bottom: 80px; - @media (min-width: $md) { - padding: 0; + @media (min-width: $lg) { + padding: 60px 0 0 0; } + width: 100%; } .row--title { - margin-bottom: 4px; + margin-bottom: 8px; } .row--button { - margin-top: 64px; - margin-bottom: 64px; - text-align: center; + margin-top: 24px; + margin-bottom: 68px; } .text--promo-title { - font-size: 40px; + font-size: 48px; font-weight: 800; + letter-spacing: -0.5px; + line-height: 1.25; +} + +.text--promo-description { + font-size: 14px; + font-weight: 600; + max-width: 420px; } .row--data { + column-gap: 4px; + row-gap: 16px; display: flex; - column-gap: 6px; justify-content: center; - margin-bottom: 16px; + flex-wrap: wrap; + @media (min-width: $sm) { + flex-wrap: nowrap; + } } -.card--data { +.promo__data { background-color: $navy-1; - width: 80px; - height: 100px; - border-radius: 10px; + flex: 1; + height: 110px; + border-radius: 16px; padding: 16px 8px; + max-width: 147px; + @media (min-width: $sm) { + padding: 24px 8px 16px 8px; + } +} + +.card--data { display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; + line-height: 1.25; + height: 100%; } -.card__top { - height: 34px; +.button--link { + height: 48px; + font-size: 14px; + font-weight: 700; display: flex; align-items: center; + justify-content: center; + gap: 12px; + padding-left: 36px; + padding-right: 12px; + margin: auto; + @media (min-width: $sm) { + min-width: 216px; + margin: 0; + } + svg { + width: 24px; + height: 24px; + } } -.card__bottom { - justify-self: flex-end; +.pink--button { + background: $astar-pink; + &:hover { + background: lighten($astar-pink, 10%); + } } -.button--link { - width: 166px; - height: 48px; - @media (min-width: $sm) { - width: 216px; +.outlined--button { + border: solid 1px $navy-1; + background: white; + color: $navy-1; + &:hover { + background: $gray-1; } } .text--value { font-weight: 800; - font-size: 16px; + font-size: 20px; color: white; + @media (min-width: $sm) { + font-size: 24px; + } } + .text--value-small { font-weight: 500; font-size: 14px; @@ -79,17 +122,26 @@ } .row--start-staking { + width: 100%; + @media (min-width: $sm) { + max-width: 147px; + flex: 1; + } } .button--staking { - width: 100%; background-color: $astar-pink; border-radius: 16px; + padding: 16px; + transition: all 0.2s ease; + width: 100%; height: 80px; -} - -.pink--button { - background-color: $astar-pink; + @media (min-width: $sm) { + height: 110px; + } + &:hover { + background-color: lighten($astar-pink, 10%); + } } .text--start-staking { @@ -99,8 +151,8 @@ } .body--dark { - .card--data { - background-color: $astar-blue; + .promo__data { + background-color: $navy-3; } .text--value, .text--value-small, @@ -108,3 +160,4 @@ color: $gray-1; } } + From 3e74e530058a487686a69438b59d085d34e87c04 Mon Sep 17 00:00:00 2001 From: Ayumi Takahashi Date: Wed, 6 Dec 2023 16:37:51 +0900 Subject: [PATCH 02/30] add dapps list and data list area style --- src/staking-v3/components/Dapps.vue | 11 ++-- src/staking-v3/components/ToggleButtons.vue | 33 +++++++++- src/staking-v3/components/data/DataCard.vue | 23 ++++--- src/staking-v3/components/data/DataList.vue | 12 ++-- src/staking-v3/components/styles/dapps.scss | 62 +++++++++++++------ .../components/styles/discover-v3.scss | 6 +- .../components/styles/feature-dapp.scss | 11 +++- 7 files changed, 112 insertions(+), 46 deletions(-) diff --git a/src/staking-v3/components/Dapps.vue b/src/staking-v3/components/Dapps.vue index 55fdfedd7..151122b62 100644 --- a/src/staking-v3/components/Dapps.vue +++ b/src/staking-v3/components/Dapps.vue @@ -3,19 +3,20 @@
-
- icon +
+ icon
-
+
{{ dapp.basic.name }}
+
- T{{ getDappTier(dapp.chain.id) ?? '-' }} + T{{ getDappTier(dapp.chain.id) ?? '-' }}
- +
diff --git a/src/staking-v3/components/ToggleButtons.vue b/src/staking-v3/components/ToggleButtons.vue index 5a78c312c..e93e9f56e 100644 --- a/src/staking-v3/components/ToggleButtons.vue +++ b/src/staking-v3/components/ToggleButtons.vue @@ -47,18 +47,45 @@ export default defineComponent({ gap: 4px; font-size: 16px; font-weight: 700; - line-height: normal; } .button { - padding: 20px; + height: 54px; + border-radius: 27px; + padding: 0 20px; cursor: pointer; + display: flex; + align-items: center; + &:hover { + background-color: $gray-1; + } } .button--selected { background-color: $navy-1; color: $white; - border-radius: 50px; cursor: default; + transition: all 0.2s ease; + &:hover { + background-color: $navy-1; + } +} + +.body--dark { + .wrapper--buttons { + border-color: $gray-4; + } + .button { + &:hover { + background-color: $navy-4; + } + } + .button--selected { + background-color: $gray-1; + color: $navy-1; + &:hover { + background-color: $gray-1; + } + } } diff --git a/src/staking-v3/components/data/DataCard.vue b/src/staking-v3/components/data/DataCard.vue index 0e7f7aa7e..bd830ee0c 100644 --- a/src/staking-v3/components/data/DataCard.vue +++ b/src/staking-v3/components/data/DataCard.vue @@ -31,15 +31,17 @@ export default defineComponent({ border: 1px solid $navy-1; border-radius: 16px; padding: 24px; - min-width: 160px; + line-height: 1.25; + display: flex; + flex-direction: column; + justify-content: center; + gap: 8px; + min-height: 150px; } .card--top { font-size: 14px; font-weight: 600; - line-height: normal; - height: 60px; - padding-bottom: 8px; display: flex; align-items: flex-end; } @@ -47,11 +49,12 @@ export default defineComponent({ .card--bottom { font-size: 24px; font-weight: 800; - line-height: normal; - letter-spacing: -0.48px; - height: 60px; - padding-top: 8px; - display: flex; - align-items: flex-start; + letter-spacing: -0.5px; +} + +.body--dark { + .wrapper--data { + border-color: $gray-4; + } } diff --git a/src/staking-v3/components/data/DataList.vue b/src/staking-v3/components/data/DataList.vue index adce17b1d..c11e35d97 100644 --- a/src/staking-v3/components/data/DataList.vue +++ b/src/staking-v3/components/data/DataList.vue @@ -106,12 +106,12 @@ export default defineComponent({ diff --git a/src/staking-v3/components/styles/dapps.scss b/src/staking-v3/components/styles/dapps.scss index 62b624f74..9c294de6d 100644 --- a/src/staking-v3/components/styles/dapps.scss +++ b/src/staking-v3/components/styles/dapps.scss @@ -1,52 +1,76 @@ @import 'src/css/quasar.variables.scss'; .wrapper--dapps { - display: flex; - flex-wrap: wrap; - padding: 0 16px; - gap: 16px; + display: grid; + gap: 8px; width: 100%; - @media (min-width: $md) { - padding: 0; + grid-template-columns: repeat(1, minmax(0, 1fr)); + @media (min-width: $sm) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + @media (min-width: $xxl) { + grid-template-columns: repeat(4, minmax(0, 1fr)); } } .card--dapp { - width: 280px; - height: 196px; border: 1px solid $navy-1; border-radius: 16px; padding: 32px; cursor: pointer; + gap: 16px; + display: flex; + flex-direction: column; + transition: all 0.2s ease; + &:hover{ + background-color: $gray-1; + } } .card__top { display: flex; align-items: center; column-gap: 16px; - margin-bottom: 8px; - border-bottom: 1px solid $navy-3; +} + +.divider--dapp { + border-top: solid 1px $navy-3; + height: 1px; } .icon--dapp { - width: 80px; - height: 80px; + flex-shrink: none; + img { + width: 80px; + height: 80px; + object-fit: cover; + box-shadow: 0px 0px 8px 0px #0000001a; + border-radius: 16px; + overflow: hidden; + } +} + +.text--dapp { + flex: 1; } .card__bottom { display: flex; align-items: center; column-gap: 16px; + font-size: 12px; + font-weight: 600; + color: $gray-3; } .body--dark { -} - -.body--dark { - .card--dapp { - border: 1px solid $gray-1; + .card--dapp, + .divider--dapp { + border-color: $gray-4; } - .card__top { - border-bottom: 1px solid $gray-4; + .card--dapp{ + &:hover{ + background-color: $navy-4; + } } } diff --git a/src/staking-v3/components/styles/discover-v3.scss b/src/staking-v3/components/styles/discover-v3.scss index 0f56b9391..57450b35f 100644 --- a/src/staking-v3/components/styles/discover-v3.scss +++ b/src/staking-v3/components/styles/discover-v3.scss @@ -3,8 +3,12 @@ .wrapper--discover { display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; margin: 34px auto; row-gap: 40px; max-width: 1300px; + padding: 0 16px; + @media (min-width: $lg) { + padding: 0; + } } diff --git a/src/staking-v3/components/styles/feature-dapp.scss b/src/staking-v3/components/styles/feature-dapp.scss index fb0c40eb2..aa2fcad8a 100644 --- a/src/staking-v3/components/styles/feature-dapp.scss +++ b/src/staking-v3/components/styles/feature-dapp.scss @@ -1,7 +1,6 @@ @import 'src/css/quasar.variables.scss'; .wrapper--promo { - padding: 0 16px; @media (min-width: $lg) { padding: 60px 0 0 0; } @@ -71,7 +70,7 @@ align-items: center; justify-content: center; gap: 12px; - padding-left: 36px; + padding-left: 32px; padding-right: 12px; margin: auto; @media (min-width: $sm) { @@ -159,5 +158,13 @@ .text--card-title { color: $gray-1; } + .outlined--button { + border-color: $gray-1; + background: $navy-1; + color: $gray-1; + &:hover { + background: $navy-4; + } + } } From df766a5a328f60e43aa300829608903e331023f8 Mon Sep 17 00:00:00 2001 From: Ayumi Takahashi Date: Wed, 6 Dec 2023 16:42:29 +0900 Subject: [PATCH 03/30] add ad area style --- src/staking-v3/components/DynamicAdsArea.vue | 26 ------------------- .../components/styles/ads-area.scss | 11 +++++--- 2 files changed, 7 insertions(+), 30 deletions(-) diff --git a/src/staking-v3/components/DynamicAdsArea.vue b/src/staking-v3/components/DynamicAdsArea.vue index dfc3e342c..5402abd3b 100644 --- a/src/staking-v3/components/DynamicAdsArea.vue +++ b/src/staking-v3/components/DynamicAdsArea.vue @@ -91,29 +91,3 @@ export default defineComponent({ - - diff --git a/src/staking-v3/components/styles/ads-area.scss b/src/staking-v3/components/styles/ads-area.scss index 518523ef8..ee5164446 100644 --- a/src/staking-v3/components/styles/ads-area.scss +++ b/src/staking-v3/components/styles/ads-area.scss @@ -45,14 +45,14 @@ height: 100%; transition: all 0.2s ease; cursor: pointer; - box-shadow: 0 0 16px 2px #00000014; + border: solid 1px $gray-2; border-radius: 6px; overflow: hidden; &:hover { background: rgba(255, 255, 255, 0.7); } } -.body--dark{ +.body--dark { .card--swiper { background: rgba(255, 255, 255, 0.1); &:hover { @@ -87,7 +87,7 @@ font-weight: 700; color: $navy-1; } -.body--dark{ +.body--dark { .text--name { color: $gray-1; } @@ -104,7 +104,7 @@ font-size: 20px; font-weight: 600; } -.text--subtitle{ +.text--subtitle { color: $gray-3; font-weight: 600; } @@ -113,4 +113,7 @@ .text--description { color: $gray-1; } + .card--swiper { + border-color: transparent; + } } From 68e0de884187dd6e637f13c5bbf6a43687220731 Mon Sep 17 00:00:00 2001 From: Ayumi Takahashi Date: Wed, 6 Dec 2023 17:51:37 +0900 Subject: [PATCH 04/30] add Leaderboard area style --- src/staking-v3/components/DiscoverV3.vue | 15 +++-- src/staking-v3/components/ToggleButtons.vue | 3 +- .../components/leaderboard/Leaderboard.vue | 67 ++++++++++++------- .../components/leaderboard/Tier.vue | 67 +++++-------------- .../components/styles/ads-area.scss | 10 +-- src/staking-v3/components/styles/dapps.scss | 2 +- .../components/styles/discover-v3.scss | 6 +- .../components/styles/feature-dapp.scss | 5 +- .../components/styles/leaderboard.scss | 45 +++++++++++++ src/staking-v3/components/styles/tier.scss | 55 +++++++++++++++ 10 files changed, 183 insertions(+), 92 deletions(-) create mode 100644 src/staking-v3/components/styles/leaderboard.scss create mode 100644 src/staking-v3/components/styles/tier.scss diff --git a/src/staking-v3/components/DiscoverV3.vue b/src/staking-v3/components/DiscoverV3.vue index a3f6f4350..20ec8b4a3 100644 --- a/src/staking-v3/components/DiscoverV3.vue +++ b/src/staking-v3/components/DiscoverV3.vue @@ -7,12 +7,15 @@ - - - + +
+ + + +
diff --git a/src/staking-v3/components/ToggleButtons.vue b/src/staking-v3/components/ToggleButtons.vue index e93e9f56e..ac14f58db 100644 --- a/src/staking-v3/components/ToggleButtons.vue +++ b/src/staking-v3/components/ToggleButtons.vue @@ -40,13 +40,14 @@ export default defineComponent({ @import 'src/css/quasar.variables.scss'; .wrapper--buttons { - display: flex; + display: inline-flex; padding: 8px; border: 1px solid $gray-2; border-radius: 80px; gap: 4px; font-size: 16px; font-weight: 700; + margin-bottom: 24px; } .button { diff --git a/src/staking-v3/components/leaderboard/Leaderboard.vue b/src/staking-v3/components/leaderboard/Leaderboard.vue index 2d730c1d5..9c42756d6 100644 --- a/src/staking-v3/components/leaderboard/Leaderboard.vue +++ b/src/staking-v3/components/leaderboard/Leaderboard.vue @@ -1,10 +1,37 @@ @@ -14,34 +41,26 @@ import { defineComponent, computed } from 'vue'; import { useLeaderboard } from 'src/staking-v3/hooks'; import Tier from './Tier.vue'; +// Import Swiper +import { Swiper, SwiperSlide } from 'swiper/vue'; +import 'swiper/css'; +import 'swiper/css/navigation'; +import { Navigation } from 'swiper/modules'; + export default defineComponent({ components: { Tier, + Swiper, + SwiperSlide, }, setup() { const { leaderBoards } = useLeaderboard(); - return { leaderBoards }; + return { modules: [Navigation], leaderBoards }; }, }); - diff --git a/src/staking-v3/components/leaderboard/Tier.vue b/src/staking-v3/components/leaderboard/Tier.vue index 24b5d5d57..7f61ae73e 100644 --- a/src/staking-v3/components/leaderboard/Tier.vue +++ b/src/staking-v3/components/leaderboard/Tier.vue @@ -1,22 +1,24 @@ -
+
diff --git a/src/components/assets/styles/your-project.scss b/src/components/assets/styles/your-project.scss index d9493ad2e..7fb811fa5 100644 --- a/src/components/assets/styles/your-project.scss +++ b/src/components/assets/styles/your-project.scss @@ -10,10 +10,11 @@ .box--dapps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 32px; + gap: 16px; @media (min-width: $md) { grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 32px; } @media (min-width: $xxl) { grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -38,18 +39,6 @@ } } -.container { - border: solid 1px $gray-2; - background-color: white; - box-shadow: none; - border-radius: 16px; - padding: 16px 0 24px 0; - @media (min-width: $sm) { - padding-left: 24px; - padding-right: 24px; - } -} - .card--dapp { cursor: pointer; background-color: $gray-1; @@ -62,6 +51,10 @@ font-weight: 600; color: $navy-1; line-height: 1.25; + transition: all 0.2s ease; + &:hover{ + background-color: $gray-2; + } } .icon--dapp-logo { @@ -79,13 +72,12 @@ } .body--dark { - .container { - background-color: $navy-1; - border-color: $navy-3; - box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8); - } .card--dapp { background-color: $navy-3; + color: $gray-1; + &:hover{ + background-color: lighten($navy-3,5%); + } } .separator { background-color: $navy-3; diff --git a/src/staking-v3/components/my-staking/MyDapps.vue b/src/staking-v3/components/my-staking/MyDapps.vue index b4d0893a4..78c47b264 100644 --- a/src/staking-v3/components/my-staking/MyDapps.vue +++ b/src/staking-v3/components/my-staking/MyDapps.vue @@ -1,22 +1,26 @@ diff --git a/src/staking-v3/components/dapp/DappAvatar.vue b/src/staking-v3/components/dapp/DappAvatar.vue index e19f34c41..32ab9bc43 100644 --- a/src/staking-v3/components/dapp/DappAvatar.vue +++ b/src/staking-v3/components/dapp/DappAvatar.vue @@ -6,38 +6,38 @@
- {{ dapp.dapp.name }} + {{ dapp.dapp.name }} +
+
+ {{ dapp.dapp.description }}
- {{ tag }} + {{ tag }}
-
- - - {{ $t('dappStaking.stake') }} - - - -
-
- - - {{ $t('dappStaking.edit') }} - + +
+ + {{ $t('dappStaking.edit') }} + + + + + + {{ $t('assets.addToFavorite') }} + + + +
@@ -65,12 +65,6 @@ export default defineComponent({ router.push(url); }; - const goStakeLink = (address: string): void => { - const base = networkParam + Path.DappStaking + Path.Stake; - const url = `${base}?dapp=${address.toLowerCase()}`; - router.push(url); - }; - const isDisabledEditButton = computed( () => currentAccount.value !== props.dapp.contract.developerAddress ); @@ -78,7 +72,6 @@ export default defineComponent({ return { isDisabledEditButton, goEditLink, - goStakeLink, twitterUrl, isZkEvm, }; @@ -87,20 +80,5 @@ export default defineComponent({ diff --git a/src/staking-v3/components/dapp/DappImages.vue b/src/staking-v3/components/dapp/DappImages.vue index b0d53dc2e..2b0f6d520 100644 --- a/src/staking-v3/components/dapp/DappImages.vue +++ b/src/staking-v3/components/dapp/DappImages.vue @@ -138,5 +138,5 @@ export default defineComponent({ diff --git a/src/staking-v3/components/dapp/DappStatistics.vue b/src/staking-v3/components/dapp/DappStatistics.vue index f5ac0bcb9..cf813c7f2 100644 --- a/src/staking-v3/components/dapp/DappStatistics.vue +++ b/src/staking-v3/components/dapp/DappStatistics.vue @@ -1,60 +1,25 @@ @@ -62,9 +27,13 @@ import TokenBalance from 'src/components/common/TokenBalance.vue'; import { useNetworkInfo } from 'src/hooks'; import { defineComponent } from 'vue'; +import KpiCard from '../KpiCard.vue'; +import { useDappStakingNavigation } from '../../hooks'; + export default defineComponent({ components: { TokenBalance, + KpiCard, }, props: { dapp: { @@ -74,11 +43,13 @@ export default defineComponent({ }, setup() { const { nativeTokenSymbol } = useNetworkInfo(); - return { nativeTokenSymbol }; + const { navigateToVote } = useDappStakingNavigation(); + + return { nativeTokenSymbol, navigateToVote }; }, }); diff --git a/src/staking-v3/components/dapp/DappStatsCharts.vue b/src/staking-v3/components/dapp/DappStatsCharts.vue index 9f7b23b12..195424905 100644 --- a/src/staking-v3/components/dapp/DappStatsCharts.vue +++ b/src/staking-v3/components/dapp/DappStatsCharts.vue @@ -1,7 +1,7 @@