From 40f39127a344adbe2a8527b5a36a9c1ce6fb6ef6 Mon Sep 17 00:00:00 2001 From: Ayumi Takahashi Date: Tue, 30 Jan 2024 10:25:10 -0800 Subject: [PATCH] Update v3 styles (#1150) * add basic style * add anchor links * update condition * Revert "add basic style" This reverts commit 8b84aa350ef65b0cc5455650c5b479517d34e03c. * clean up * change links position and update dark theme style * add condition for dapp owner * italic font style * update dapps category styles * update data list styles * update top page styles * update dapp card stats * add grid background to the top page * adjust leaderbord title position for wide schreen * remove flip animation for no description * format token balance on the project page status * update owner page style * update project page style * update project page style * update register banner style * dapp border color navy * refactoring * add text animation * move logo svg to component * adjust wording * remove the importing line not to use * remove text animation --- src/components/assets/Assets.vue | 3 + src/components/common/Logo.vue | 29 ++- src/css/markdown.scss | 5 +- src/i18n/en-US/index.ts | 18 +- src/pages/DappPage.vue | 4 +- src/staking-v3/assets/grid_bg.svg | 168 ++++++++++++++++++ src/staking-v3/assets/register_bg.webp | Bin 0 -> 212372 bytes src/staking-v3/components/Dapps.vue | 54 +++++- src/staking-v3/components/DiscoverV3.vue | 8 +- src/staking-v3/components/FeatureDapp.vue | 8 +- src/staking-v3/components/KpiCard.vue | 78 +++++++- src/staking-v3/components/Owner.vue | 40 +++-- src/staking-v3/components/RegisterBanner.vue | 80 ++++++--- src/staking-v3/components/ToggleButtons.vue | 1 + src/staking-v3/components/YourRewards.vue | 10 +- ...pBackground.vue => DappIconBackground.vue} | 16 +- src/staking-v3/components/dapp/DappImages.vue | 164 +++++++++-------- .../components/dapp/DappStatistics.vue | 10 +- src/staking-v3/components/dapp/DappV3.vue | 53 +++--- .../components/dapp/styles/builders.scss | 41 ++--- .../components/dapp/styles/dapp-images.scss | 138 +++++--------- .../dapp/styles/dapp-statistics.scss | 7 +- .../components/dapp/styles/dapp.scss | 56 +++++- .../dapp/styles/project-details.scss | 1 + .../dapp/styles/project-overview.scss | 1 + src/staking-v3/components/data/DataCard.vue | 2 + src/staking-v3/components/data/DataList.vue | 122 ++++++++----- .../leaderboard/styles/leaderboard.scss | 11 +- .../components/my-staking/ModalUnbondDapp.vue | 6 +- src/staking-v3/components/styles/dapps.scss | 62 +++++-- .../components/styles/discover-v3.scss | 1 + src/staking-v3/components/styles/edit.scss | 1 + .../components/styles/feature-dapp.scss | 91 ++-------- src/staking-v3/components/styles/owner.scss | 55 ++++-- .../components/styles/your-rewards.scss | 13 +- 35 files changed, 896 insertions(+), 461 deletions(-) create mode 100644 src/staking-v3/assets/grid_bg.svg create mode 100644 src/staking-v3/assets/register_bg.webp rename src/staking-v3/components/dapp/{DappBackground.vue => DappIconBackground.vue} (83%) diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue index de34b4230..4b17c4dee 100644 --- a/src/components/assets/Assets.vue +++ b/src/components/assets/Assets.vue @@ -3,6 +3,7 @@
+ (null); diff --git a/src/components/common/Logo.vue b/src/components/common/Logo.vue index 800a91b30..db6bab58a 100644 --- a/src/components/common/Logo.vue +++ b/src/components/common/Logo.vue @@ -1,11 +1,36 @@ diff --git a/src/staking-v3/components/Owner.vue b/src/staking-v3/components/Owner.vue index 6e42e2eeb..a19676783 100644 --- a/src/staking-v3/components/Owner.vue +++ b/src/staking-v3/components/Owner.vue @@ -1,24 +1,34 @@ @@ -30,10 +40,10 @@ import { useDapps, useDappStakingNavigation, useDappStaking, RewardsPerPeriod } import { CombinedDappInfo } from '../logic'; import Edit from './Edit.vue'; import YourRewards from './YourRewards.vue'; -import DappBackground from './dapp/DappBackground.vue'; +import DappIconBackground from './dapp/DappIconBackground.vue'; export default defineComponent({ - components: { YourRewards, Edit, DappBackground }, + components: { YourRewards, Edit, DappIconBackground }, setup() { const route = useRoute(); const { getDapp } = useDapps(); diff --git a/src/staking-v3/components/RegisterBanner.vue b/src/staking-v3/components/RegisterBanner.vue index 0f243738f..00333de44 100644 --- a/src/staking-v3/components/RegisterBanner.vue +++ b/src/staking-v3/components/RegisterBanner.vue @@ -2,17 +2,19 @@ -
-
🎉 {{ `${$t('stakingV3.dappRegistered')}` }}
-
{{ `${$t('stakingV3.registerNow')}` }}
+
+
🎉 {{ `${$t('stakingV3.congrats')}` }}
+
{{ `${$t('stakingV3.dappRegistered')}` }}
+
{{ `${$t('stakingV3.registerNow')}` }}
diff --git a/src/staking-v3/components/ToggleButtons.vue b/src/staking-v3/components/ToggleButtons.vue index ac5a29af5..a78325457 100644 --- a/src/staking-v3/components/ToggleButtons.vue +++ b/src/staking-v3/components/ToggleButtons.vue @@ -47,6 +47,7 @@ export default defineComponent({ gap: 4px; font-size: 16px; font-weight: 700; + background-color: white; } .button { diff --git a/src/staking-v3/components/YourRewards.vue b/src/staking-v3/components/YourRewards.vue index 7c8daccc8..1d005a6ac 100644 --- a/src/staking-v3/components/YourRewards.vue +++ b/src/staking-v3/components/YourRewards.vue @@ -39,7 +39,7 @@ > {{ $t('stakingV3.claimYourRewards') }} - {{ $n(truncate(ethers.utils.formatEther(totalRewards.toString()), 3)) }} + {{ nativeTokenSymbol }} @@ -50,10 +50,8 @@ diff --git a/src/staking-v3/components/dapp/DappBackground.vue b/src/staking-v3/components/dapp/DappIconBackground.vue similarity index 83% rename from src/staking-v3/components/dapp/DappBackground.vue rename to src/staking-v3/components/dapp/DappIconBackground.vue index 6112e2fed..064afe884 100644 --- a/src/staking-v3/components/dapp/DappBackground.vue +++ b/src/staking-v3/components/dapp/DappIconBackground.vue @@ -23,14 +23,10 @@ export default defineComponent({ position: absolute; z-index: 0; right: calc(50% - 200px); - top: -200px; + top: -350px; @media (min-width: $sm) { - right: -300px; - top: -500px; - } - @media (min-width: $lg) { right: -200px; - top: -400px; + top: -500px; } } .image--dapp-icon { @@ -39,11 +35,11 @@ export default defineComponent({ object-fit: cover; overflow: hidden; border-radius: 99999px; - filter: blur(75px) brightness(1.2); - opacity: 0.7; + filter: blur(80px) brightness(1.2); + opacity: 0.5; @media (min-width: $sm) { - width: 800px; - height: 800px; + width: 600px; + height: 600px; filter: blur(150px) brightness(1.2); } } diff --git a/src/staking-v3/components/dapp/DappImages.vue b/src/staking-v3/components/dapp/DappImages.vue index 821f25d90..58dd93a8c 100644 --- a/src/staking-v3/components/dapp/DappImages.vue +++ b/src/staking-v3/components/dapp/DappImages.vue @@ -1,65 +1,81 @@ diff --git a/src/staking-v3/components/leaderboard/styles/leaderboard.scss b/src/staking-v3/components/leaderboard/styles/leaderboard.scss index 2d707b5da..eba6e85f3 100644 --- a/src/staking-v3/components/leaderboard/styles/leaderboard.scss +++ b/src/staking-v3/components/leaderboard/styles/leaderboard.scss @@ -5,6 +5,7 @@ padding: 100px 0 20px 0; position: relative; background-color: $navy-1; + overflow: hidden; @media (min-width: $lg) { padding-right: 40px; padding-left: 40px; @@ -20,7 +21,7 @@ } } -.bg--leaderboard{ +.bg--leaderboard { position: absolute; top: 0; left: 0; @@ -33,11 +34,15 @@ .title { font-size: 32px; - font-weight: 700; + font-weight: 900; line-height: 1.25; position: relative; z-index: 1; color: white; + font-style: italic; + @media (min-width: $xxxl) { + padding-top: 80px; + } } .container--boards { @@ -71,7 +76,7 @@ } } -.swiper { +.swiper--leaderboard { overflow: visible; } diff --git a/src/staking-v3/components/my-staking/ModalUnbondDapp.vue b/src/staking-v3/components/my-staking/ModalUnbondDapp.vue index 789df7f84..e9039096e 100644 --- a/src/staking-v3/components/my-staking/ModalUnbondDapp.vue +++ b/src/staking-v3/components/my-staking/ModalUnbondDapp.vue @@ -1,7 +1,7 @@