From cb1c09f6a2f455b9a017730dab52b10b8d9be6cc Mon Sep 17 00:00:00 2001 From: Prachi Darshana Date: Fri, 23 Sep 2022 11:16:28 -0700 Subject: [PATCH 001/148] #3948 Footer redesign --- components/TheFooter.vue | 146 +++++++++++++++++++++++-- locales/en.json | 4 + styles/abstracts/_variables.scss | 45 ++++---- styles/components/_carousel.scss | 2 +- styles/layouts/_footer.scss | 177 +++++++++++++++++++++---------- styles/themes/_dark.scss | 16 ++- 6 files changed, 301 insertions(+), 89 deletions(-) diff --git a/components/TheFooter.vue b/components/TheFooter.vue index 2984112a1b..d5f15fba6d 100644 --- a/components/TheFooter.vue +++ b/components/TheFooter.vue @@ -1,15 +1,139 @@ - + diff --git a/locales/en.json b/locales/en.json index 8ff01cddbc..96b0d7d1c4 100644 --- a/locales/en.json +++ b/locales/en.json @@ -1011,5 +1011,9 @@ "toast": { "urlCopy": "URL copied to clipboard", "paymentLinkCopy": "Payment link copied to clipboard" + }, + "footer": { + "subscribe": "Get The Latest KodaDot Updates", + "join": "Join Our Community" } } diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss index 6a6fb368a2..ad8808d13f 100644 --- a/styles/abstracts/_variables.scss +++ b/styles/abstracts/_variables.scss @@ -1,72 +1,72 @@ -@import "initial-variables"; -@import "~bulma/sass/utilities/_all"; -@import "derived-variables"; +@import 'initial-variables'; +@import '~bulma/sass/utilities/_all'; +@import 'derived-variables'; // Setup $colors to use as bulma classes (e.g. 'is-twitter') $colors: mergeColorMaps( ( - "white": ( + 'white': ( $white, $black, ), - "black": ( + 'black': ( $black, $white, ), - "light": ( + 'light': ( $light, $light-invert, ), - "dark": ( + 'dark': ( $dark, $dark-invert, ), - "primary": ( + 'primary': ( $primary, $primary-invert, $primary-light, $primary-dark, ), - "link": ( + 'link': ( $link, $link-invert, $link-light, $link-dark, ), - "info": ( + 'info': ( $info, $info-invert, $info-light, $info-dark, ), - "success": ( + 'success': ( $success, $success-invert, $success-light, $success-dark, ), - "warning": ( + 'warning': ( $warning, $warning-invert, $warning-light, $warning-dark, ), - "danger": ( + 'danger': ( $danger, $danger-invert, $danger-light, $danger-dark, ), - "grey": ( + 'grey': ( $grey-darker, $white, ), - "orange": ( + 'orange': ( $orange, $orange-invert, $orange-light, $orange-dark, - ) + ), ), $custom-colors ); @@ -120,7 +120,7 @@ $tabs-boxed-link-focus-active-background-color: $primary; // $tabs-boxed-link-focus-border-color: lime; // $tabs-boxed-link-focus-active-border-bottom-color: lime; // $tabs-items-focused-outline: lime; -$tabs-border-bottom-color: #7D7A7A; +$tabs-border-bottom-color: #7d7a7a; $tabs-link-active-border-bottom-color: $primary; $tabs-link-active-color: $primary; $tabs-link-hover-color: lightpink; @@ -153,9 +153,9 @@ $lightpink: lightpink; $blacklight: #0909098c; $input-color: #181818; -$select-color: #E5E5E5; -$placeholder-color: #CCCCCC; -$search-background-color: #1A1718; +$select-color: #e5e5e5; +$placeholder-color: #cccccc; +$search-background-color: #1a1718; $select-border-color: #7d7d7d; $frosted-glass-background: rgba(12, 12, 12, 0.7); @@ -175,3 +175,8 @@ $k-red: #ff5757; $k-grey: #999999; $k-blue: #6188e7; $shade: #cccccc; + +$dark-accent: #1a1718; + +$primary-shadow: 4px 3px $black; +$primary-shadow-dark: 4px 3px $white; diff --git a/styles/components/_carousel.scss b/styles/components/_carousel.scss index 6b0e13d479..81bbef7524 100644 --- a/styles/components/_carousel.scss +++ b/styles/components/_carousel.scss @@ -188,7 +188,7 @@ .dark-mode { .carousel-agnostic { .carousel-item { - background-color: #1a1718; + background-color: $dark-accent; border: 1px solid white; &:hover { diff --git a/styles/layouts/_footer.scss b/styles/layouts/_footer.scss index 0cdae998d7..ffeb34b138 100644 --- a/styles/layouts/_footer.scss +++ b/styles/layouts/_footer.scss @@ -1,61 +1,126 @@ .footer { - &__wrapper { - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: column; - padding: 16px; - height: 135px; - - @include desktop { - flex-direction: row; - - opacity: 0.3; - &:hover { - opacity: 1; - } - } - } - - &__list { - display: flex; - align-items: center; - list-style: none; - flex-wrap: wrap; - justify-content: center; - } - - &__list-item { - position: relative; - padding: 0 8px; - - &:not(:last-child) { - &:after { - content: ''; - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 0; - width: 1px; - height: 12px; - background: #fff; - } - } - } - - .snackbar { - border: 2px solid $primary; - background-color: #202225; - box-shadow: $dropdown-content-shadow; - } - - #keyboardShortcutsModal { - height: 0; - } + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + padding: 16px; + height: 135px; + + @include desktop { + flex-direction: row; + + opacity: 0.3; + &:hover { + opacity: 1; + } + } + } + + &__list { + display: flex; + align-items: center; + list-style: none; + flex-wrap: wrap; + justify-content: center; + } + + &__list-item { + position: relative; + padding: 0 8px; + + &:not(:last-child) { + &:after { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + width: 1px; + height: 12px; + background: #fff; + } + } + } + + .snackbar { + border: 2px solid $primary; + background-color: #202225; + box-shadow: $dropdown-content-shadow; + } + + #keyboardShortcutsModal { + height: 0; + } +} + +.footer-container { + background-color: $k-blue; + color: $white; + padding: 3rem 1rem; + + &-heading { + font-size: 20px; + font-weight: 700; + } + &-subs { + } + &-info { + gap: 16px; + &-list { + &-item { + position: relative; + padding: 0 12px; + a { + color: $white !important; + &:hover { + color: $k-accentlight !important; + } + } + &:first-child { + padding-left: 0px; + } + &:not(:last-child) { + &:after { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -5px; + width: 6px; + height: 6px; + background: #fff; + } + } + } + } + } + &-socials { + gap: 8px; + &-list { + &-item { + height: 33px; + width: 33px; + background: $white; + border: 1px solid $black; + box-shadow: $primary-shadow; + .icon { + svg { + height: 16px; + } + } + &:hover { + a { + color: $k-accentlight !important; + } + } + } + } + } } .icons { - &__list-item { - padding: 0 2px; - } + &__list-item { + padding: 0 2px; + } } diff --git a/styles/themes/_dark.scss b/styles/themes/_dark.scss index dd8a023040..64aa49c791 100644 --- a/styles/themes/_dark.scss +++ b/styles/themes/_dark.scss @@ -27,7 +27,7 @@ html.dark-mode { .instance { &-accent, &-blue { - background-color: #1a1718; + background-color: $dark-accent; } } @@ -39,4 +39,18 @@ html.dark-mode { 0px -1px 0 #fff, 4px 4px #fff; } } + + .footer-container { + background-color: $dark-accent; + border-top: 1px solid $white; + &-socials { + &-list { + &-item { + background: $black; + border: 1px solid $white; + box-shadow: $primary-shadow-dark; + } + } + } + } } From abf8baae424f0aee6e4acb7784d207078a1dfddd Mon Sep 17 00:00:00 2001 From: Prachi Darshana Date: Fri, 23 Sep 2022 11:48:08 -0700 Subject: [PATCH 002/148] #3948 Footer button UI --- components/TheFooter.vue | 18 +++++++++++----- locales/en.json | 3 ++- styles/abstracts/_variables.scss | 4 ++-- styles/layouts/_footer.scss | 37 ++++++++++++++++++++++++++++++-- styles/themes/_dark.scss | 19 ++++++++++++++++ 5 files changed, 71 insertions(+), 10 deletions(-) diff --git a/components/TheFooter.vue b/components/TheFooter.vue index d5f15fba6d..29b5af22bb 100644 --- a/components/TheFooter.vue +++ b/components/TheFooter.vue @@ -3,11 +3,19 @@ class="footer-container is-flex is-align-items-center is-justify-content-space-around">
{{ $t('footer.subscribe') }} - +
+ + + {{ $t('footer.subscribeLabel') }} + +
KodaDot diff --git a/locales/en.json b/locales/en.json index 96b0d7d1c4..aafd3570a2 100644 --- a/locales/en.json +++ b/locales/en.json @@ -1014,6 +1014,7 @@ }, "footer": { "subscribe": "Get The Latest KodaDot Updates", - "join": "Join Our Community" + "join": "Join Our Community", + "subscribeLabel": "Subscribe" } } diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss index ad8808d13f..62d62686dc 100644 --- a/styles/abstracts/_variables.scss +++ b/styles/abstracts/_variables.scss @@ -178,5 +178,5 @@ $shade: #cccccc; $dark-accent: #1a1718; -$primary-shadow: 4px 3px $black; -$primary-shadow-dark: 4px 3px $white; +$primary-shadow: 4px 4px $black; +$primary-shadow-dark: 4px 4px $white; diff --git a/styles/layouts/_footer.scss b/styles/layouts/_footer.scss index ffeb34b138..9079ae5e65 100644 --- a/styles/layouts/_footer.scss +++ b/styles/layouts/_footer.scss @@ -63,23 +63,54 @@ font-size: 20px; font-weight: 700; } + &-subs { + &-items { + margin-top: 8px; + } + + &-btn { + text-transform: capitalize; + color: $black !important; + background-color: $k-accent !important; + border-radius: 0px; + border: 1px solid $black; + border-color: $black !important; + border-left: 0 !important; + box-shadow: $primary-shadow !important; + } + &-input { + box-shadow: $primary-shadow; + + .input { + border-radius: 0px; + border: 1px solid $black; + &:focus { + box-shadow: none; + } + } + } } + &-info { - gap: 16px; + gap: 18px; + &-list { &-item { position: relative; padding: 0 12px; + a { color: $white !important; &:hover { color: $k-accentlight !important; } } + &:first-child { padding-left: 0px; } + &:not(:last-child) { &:after { content: ''; @@ -95,8 +126,10 @@ } } } + &-socials { - gap: 8px; + gap: 10px; + &-list { &-item { height: 33px; diff --git a/styles/themes/_dark.scss b/styles/themes/_dark.scss index 64aa49c791..8b8aeb1978 100644 --- a/styles/themes/_dark.scss +++ b/styles/themes/_dark.scss @@ -43,6 +43,7 @@ html.dark-mode { .footer-container { background-color: $dark-accent; border-top: 1px solid $white; + &-socials { &-list { &-item { @@ -52,5 +53,23 @@ html.dark-mode { } } } + + &-subs { + &-btn { + color: $black!important; + background-color: $k-accent !important; + border-radius: 0px; + border: 1px solid $white; + border-color: $white !important; + box-shadow: $primary-shadow-dark !important; + } + &-input { + box-shadow: $primary-shadow-dark; + + .input { + border: 1px solid $white; + } + } + } } } From 0fc498cc0872466637ed162ee45ddd9fb3017d2c Mon Sep 17 00:00:00 2001 From: Prachi Darshana Date: Fri, 23 Sep 2022 11:57:23 -0700 Subject: [PATCH 003/148] #3948 Iframe for subs --- components/TheFooter.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/TheFooter.vue b/components/TheFooter.vue index 29b5af22bb..0fd72ba5f6 100644 --- a/components/TheFooter.vue +++ b/components/TheFooter.vue @@ -4,7 +4,7 @@
{{ $t('footer.subscribe') }}
- {{ $t('footer.subscribeLabel') }} - + --> +
From a3bdd69cfc838cabcc8589abdf4e943cb93946f7 Mon Sep 17 00:00:00 2001 From: Prachi Darshana Date: Wed, 28 Sep 2022 20:40:16 -0700 Subject: [PATCH 004/148] #3948 ui changes for footer --- components/TheFooter.vue | 6 +++--- styles/abstracts/_variables.scss | 32 ++++++++++++++++---------------- styles/layouts/_footer.scss | 30 ++++++++++++++++-------------- 3 files changed, 35 insertions(+), 33 deletions(-) diff --git a/components/TheFooter.vue b/components/TheFooter.vue index 0fd72ba5f6..810172a810 100644 --- a/components/TheFooter.vue +++ b/components/TheFooter.vue @@ -1,7 +1,7 @@ diff --git a/components/shared/ChainSelect.vue b/components/shared/ChainSelect.vue index b8c9d13562..72831e7519 100644 --- a/components/shared/ChainSelect.vue +++ b/components/shared/ChainSelect.vue @@ -1,10 +1,9 @@ - - diff --git a/components/carousel/CarouselIndex.vue b/components/carousel/CarouselIndex.vue index 5228d2fee6..33b1dd5561 100644 --- a/components/carousel/CarouselIndex.vue +++ b/components/carousel/CarouselIndex.vue @@ -1,60 +1,20 @@ diff --git a/components/carousel/CarouselTypeLatestSales.vue b/components/carousel/CarouselTypeLatestSales.vue index 0f1d7c6453..246362bd8f 100644 --- a/components/carousel/CarouselTypeLatestSales.vue +++ b/components/carousel/CarouselTypeLatestSales.vue @@ -9,14 +9,8 @@ diff --git a/components/carousel/CarouselTypeNewestList.vue b/components/carousel/CarouselTypeNewestList.vue index ed594542f8..77fe2e19a9 100644 --- a/components/carousel/CarouselTypeNewestList.vue +++ b/components/carousel/CarouselTypeNewestList.vue @@ -10,14 +10,8 @@ diff --git a/components/carousel/module-old/CarouselCardFooter.vue b/components/carousel/module-old/CarouselCardFooter.vue deleted file mode 100644 index 88b7259790..0000000000 --- a/components/carousel/module-old/CarouselCardFooter.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - diff --git a/components/carousel/module-old/CarouselCardInfo.vue b/components/carousel/module-old/CarouselCardInfo.vue deleted file mode 100644 index d716787594..0000000000 --- a/components/carousel/module-old/CarouselCardInfo.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - diff --git a/components/carousel/module-old/CarouselCardMedia.vue b/components/carousel/module-old/CarouselCardMedia.vue deleted file mode 100644 index d199d3dd80..0000000000 --- a/components/carousel/module-old/CarouselCardMedia.vue +++ /dev/null @@ -1,45 +0,0 @@ - - - - - diff --git a/components/carousel/module-old/CarouselList.vue b/components/carousel/module-old/CarouselList.vue deleted file mode 100644 index fc5584a2b3..0000000000 --- a/components/carousel/module-old/CarouselList.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - - - diff --git a/components/carousel/module/CarouselAgnostic.vue b/components/carousel/module/CarouselAgnostic.vue index 7e352c9d35..586944299b 100644 --- a/components/carousel/module/CarouselAgnostic.vue +++ b/components/carousel/module/CarouselAgnostic.vue @@ -79,8 +79,10 @@ const totalDots = computed(() => { return Math.round(props.nfts.length - perView) } } + + return 0 }) const dotHelper = computed(() => - slider.value ? [...Array(totalDots.value).keys()] : [] + slider.value && totalDots.value > 0 ? [...Array(totalDots.value).keys()] : [] ) diff --git a/components/carousel/utils/useCarousel.ts b/components/carousel/utils/useCarousel.ts index 58d877ce41..79ad7baa48 100644 --- a/components/carousel/utils/useCarousel.ts +++ b/components/carousel/utils/useCarousel.ts @@ -1,5 +1,4 @@ import type { CarouselNFT } from '@/components/base/types' -import type { LastEvent } from '@/utils/types/types' import type { RowSeries } from '@/components/series/types' import { convertLastEventFlatNft, formatNFT } from '@/utils/carousel' @@ -37,30 +36,6 @@ const nftEventVariables = { }, } -export const useCarouselNftEventsOld = ({ type }: Types) => { - const { data } = useGraphql({ - queryPrefix: 'subsquid', - queryName: 'lastNftListByEvent', - variables: nftEventVariables[type], - }) - const nfts = ref([]) - - const handleResult = async ({ data }: { data: { events: LastEvent[] } }) => { - const events = data.events.map(convertLastEventFlatNft) - nfts.value = await formatNFT(events) - } - - watch(data, () => { - if (data.value) { - handleResult({ data: data.value }) - } - }) - - return { - nfts, - } -} - const useChainEvents = (chain, type) => { const { data, loading } = useGraphql({ queryPrefix: 'subsquid', diff --git a/components/landing/LandingPageOld.vue b/components/landing/LandingPageOld.vue deleted file mode 100644 index 8f731ab70f..0000000000 --- a/components/landing/LandingPageOld.vue +++ /dev/null @@ -1,147 +0,0 @@ - - - - - diff --git a/components/shared/KodadotSocialLinks.vue b/components/shared/KodadotSocialLinks.vue deleted file mode 100644 index 9602059c52..0000000000 --- a/components/shared/KodadotSocialLinks.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - diff --git a/layouts/centered-half-layout.vue b/layouts/centered-half-layout.vue index c1a78927ab..ba8d0e7ddc 100644 --- a/layouts/centered-half-layout.vue +++ b/layouts/centered-half-layout.vue @@ -17,7 +17,7 @@
- +
diff --git a/layouts/default.vue b/layouts/default.vue index c3ac93f38c..9ea9af5f31 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -13,7 +13,7 @@ - + diff --git a/layouts/full-width-layout.vue b/layouts/full-width-layout.vue index 7c264f6695..508b4e99b3 100644 --- a/layouts/full-width-layout.vue +++ b/layouts/full-width-layout.vue @@ -9,14 +9,12 @@ error-subtitle="Please check your network connections" /> - - + diff --git a/pages/index.vue b/pages/index.vue index 1185c4d594..18b4133076 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,28 +1,18 @@ diff --git a/components/landing/ReTopCollectionsItem.vue b/components/landing/ReTopCollectionsItem.vue deleted file mode 100644 index c97d598b96..0000000000 --- a/components/landing/ReTopCollectionsItem.vue +++ /dev/null @@ -1,53 +0,0 @@ - - - diff --git a/components/landing/TopCollections.vue b/components/landing/TopCollections.vue index 5980e93b28..db2fb8794e 100644 --- a/components/landing/TopCollections.vue +++ b/components/landing/TopCollections.vue @@ -2,11 +2,15 @@
{{ $t('general.topCollectionsHeading') }}
-
+
+ + + {{ $t('helper.seeMore') }} > +
diff --git a/components/landing/TopCollectionsItem.vue b/components/landing/TopCollectionsItem.vue index 0080a66a2e..c97d598b96 100644 --- a/components/landing/TopCollectionsItem.vue +++ b/components/landing/TopCollectionsItem.vue @@ -1,7 +1,7 @@