Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add dApp staking v3 onboarding modal #1142

Merged
merged 30 commits into from
Feb 9, 2024
Merged
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
9c5cb9a
add build period background
ayumitk Jan 15, 2024
f427107
adjust wrapper padding
ayumitk Jan 15, 2024
5bee5bb
add category images
ayumitk Jan 15, 2024
4e4081e
2 rows slider
ayumitk Jan 15, 2024
cbebe8b
update style
ayumitk Jan 15, 2024
941171d
update vote period style
ayumitk Jan 16, 2024
3b04481
update voting period background style
ayumitk Jan 16, 2024
796c1ef
fix 2 rows slider
ayumitk Jan 16, 2024
c2d4fa6
Merge branch 'main' into feat/dapp-staking-background
ayumitk Jan 16, 2024
23badf5
add base files
ayumitk Jan 17, 2024
96c489d
Merge branch 'main' into feat/dapp-staking-background
ayumitk Jan 17, 2024
3e84327
use camel case
ayumitk Jan 17, 2024
9bd8f15
Merge branch 'main' into feat/onboarding-modal
ayumitk Jan 17, 2024
fbf11db
Merge branch 'feat/dapp-staking-background' into feat/onboarding-modal
ayumitk Jan 17, 2024
1dcd681
add onboarding modal
ayumitk Jan 17, 2024
2d063a4
move texts to i18n
ayumitk Jan 17, 2024
88613ca
fix dark theme color
ayumitk Jan 17, 2024
8b84aa3
add basic style
ayumitk Jan 18, 2024
8a3fbd2
Merge branch 'main' of github.com:AstarNetwork/astar-apps
ayumitk Jan 18, 2024
08b7bd7
Merge branch 'main' into feat/onboarding-modal
ayumitk Jan 18, 2024
c4d98db
Revert "add basic style"
ayumitk Jan 18, 2024
30857b0
Merge branch 'main' of github.com:AstarNetwork/astar-apps
ayumitk Jan 19, 2024
4c64354
Merge branch 'main' into feat/onboarding-modal
ayumitk Jan 19, 2024
a43b621
Merge branch 'main' into feat/onboarding-modal
gluneau Feb 1, 2024
e3b94c5
missing braket from the conflicts
gluneau Feb 1, 2024
8f48273
Merge branch 'main' into feat/onboarding-modal
ayumitk Feb 6, 2024
c963111
Merge branch 'main' into feat/onboarding-modal
ayumitk Feb 8, 2024
dff0289
update text and links
ayumitk Feb 8, 2024
ee068df
update text
ayumitk Feb 8, 2024
44cc8ef
show it on shibuya and shiden
ayumitk Feb 8, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add category images
ayumitk committed Jan 15, 2024
commit 5bee5bb4388396684e328acfc6d1f10789ce7efe
Binary file added src/staking-v3/assets/category_blue.webp
Binary file not shown.
Binary file added src/staking-v3/assets/category_green.webp
Binary file not shown.
Binary file added src/staking-v3/assets/category_pink.webp
Binary file not shown.
Binary file added src/staking-v3/assets/category_purple.webp
Binary file not shown.
Binary file added src/staking-v3/assets/category_sky.webp
Binary file not shown.
15 changes: 13 additions & 2 deletions src/staking-v3/components/Dapps.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<template>
<div v-if="filteredDapps.length > 0" class="wrapper--dapps">
<div class="title--category">{{ category }}</div>
<div class="container--category" :style="{ backgroundImage: `url(${bg_img[category]})` }">
<div class="title--category">{{ category }}</div>
</div>
<div class="container--dapps">
<swiper
class="swiper--dapps"
@@ -50,6 +52,7 @@ import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
import { CombinedDappInfo } from '../logic';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Url } from 'url';
export default defineComponent({
components: {
@@ -88,7 +91,15 @@ export default defineComponent({
return result;
});
return { filteredDapps, getDappTier, getDappPageUrl };
const bg_img = {
DeFi: require('/src/staking-v3/assets/category_pink.webp'),
NFT: require('/src/staking-v3/assets/category_purple.webp'),
Tooling: require('/src/staking-v3/assets/category_blue.webp'),
Utility: require('/src/staking-v3/assets/category_sky.webp'),
Others: require('/src/staking-v3/assets/category_green.webp'),
};
return { filteredDapps, bg_img, getDappTier, getDappPageUrl };
},
});
</script>
17 changes: 13 additions & 4 deletions src/staking-v3/components/styles/dapps.scss
Original file line number Diff line number Diff line change
@@ -85,20 +85,29 @@
}
}

.title--category {
.container--category {
background-size: cover;
background-color: $navy-1;
color: $gray-1;
border-radius: 16px;
padding: 24px;
font-size: 20px;
font-size: 24px;
font-weight: 700;
min-height: 180px;
min-width: 180px;
overflow: hidden;
display: flex;
@media (min-width: $xl) {
min-width: 280px;
}
}

.title--category {
width: 60%;
backdrop-filter: blur(20px);
padding: 24px;
background-color: rgba(255, 255, 255, 0.05);
color: white;
}

.body--dark {
.text--title {
color: $navy-1;