diff --git a/packages/frontend/public/images/christmas-hat.svg b/packages/frontend/public/images/christmas-hat.svg new file mode 100644 index 000000000..65e08852c --- /dev/null +++ b/packages/frontend/public/images/christmas-hat.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/frontend/public/images/grain-texture.jpg b/packages/frontend/public/images/grain-texture.jpg deleted file mode 100644 index 939e74492..000000000 Binary files a/packages/frontend/public/images/grain-texture.jpg and /dev/null differ diff --git a/packages/frontend/public/images/grain-texture.png b/packages/frontend/public/images/grain-texture.png new file mode 100644 index 000000000..f87fd6ca4 Binary files /dev/null and b/packages/frontend/public/images/grain-texture.png differ diff --git a/packages/frontend/public/images/icons/block-present.svg b/packages/frontend/public/images/icons/block-present.svg new file mode 100644 index 000000000..a4ae33008 --- /dev/null +++ b/packages/frontend/public/images/icons/block-present.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js index 185dd4e55..d2e7db1de 100644 --- a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js +++ b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js @@ -125,7 +125,7 @@ function DataContract ({ identifier }) {
{dataContract?.data?.name || ''} {dataContract.data?.identifier - ? + ? : }
diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js index 449bd8622..19a094762 100644 --- a/packages/frontend/src/app/home/Home.js +++ b/packages/frontend/src/app/home/Home.js @@ -83,6 +83,7 @@ function Home () { documents={status.data?.documentsCount} identities={status.data?.identitiesCount} loading={status.loading} + event={'christmas'} /> diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index bb4e67f1d..7a3f986a4 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -123,7 +123,7 @@ function Identity ({ identifier }) { {identifier ?
- +
: } diff --git a/packages/frontend/src/components/blocks/BlocksTotal.js b/packages/frontend/src/components/blocks/BlocksTotal.js index 2d0db4e1b..4f57c62c6 100644 --- a/packages/frontend/src/components/blocks/BlocksTotal.js +++ b/packages/frontend/src/components/blocks/BlocksTotal.js @@ -25,6 +25,7 @@ export default function BlocksTotal () { return ( 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(username, saturation, lightness)), [username, saturation, lightness] ) - return ({username) + const ImageElement = {username + + const hatClasses = { + christmas: 'ImageGenerator__Hat--Christmas' + } + + return ( +
+ {hat &&
} + {ImageElement} +
+ ) } diff --git a/packages/frontend/src/components/layout/Background.js b/packages/frontend/src/components/layout/Background.js index 9f20c5a54..0aa2680fc 100644 --- a/packages/frontend/src/components/layout/Background.js +++ b/packages/frontend/src/components/layout/Background.js @@ -1,9 +1,10 @@ 'use client' import { usePathname } from 'next/navigation' +import Snow from './Snow' import './Background.scss' -function Background () { +function Background ({ snow }) { const pathname = usePathname() const showOnRoutes = [ '/', @@ -17,7 +18,10 @@ function Background () { const showDecoration = showOnRoutes.includes(pathname) return ( -
+ <> +
+ {snow && } + ) } diff --git a/packages/frontend/src/components/layout/Background.scss b/packages/frontend/src/components/layout/Background.scss index ebf9bbd67..494205b87 100644 --- a/packages/frontend/src/components/layout/Background.scss +++ b/packages/frontend/src/components/layout/Background.scss @@ -1,8 +1,9 @@ @import '../../styles/variables.scss'; .Background { - background-color: #0F1315; + background-color: #171E21; overflow: hidden; + pointer-events: none; z-index: -1; &, &:after { @@ -15,12 +16,11 @@ &::after { content: ''; - background-image: url('/images/grain-texture.jpg'); + background-image: url('/images/grain-texture.png'); background-position: left; background-repeat: repeat; opacity: .5; z-index: -1; - mix-blend-mode: soft-light; } &--Light { diff --git a/packages/frontend/src/components/layout/RootComponent.js b/packages/frontend/src/components/layout/RootComponent.js index 7348a4773..e0089e396 100644 --- a/packages/frontend/src/components/layout/RootComponent.js +++ b/packages/frontend/src/components/layout/RootComponent.js @@ -16,7 +16,7 @@ export default function RootComponent ({ children }) { return ( - + {children} diff --git a/packages/frontend/src/components/layout/Snow.js b/packages/frontend/src/components/layout/Snow.js new file mode 100644 index 000000000..111e33bc5 --- /dev/null +++ b/packages/frontend/src/components/layout/Snow.js @@ -0,0 +1,22 @@ +'use client' + +import './Snow.scss' + +function Snow () { + return ( +
+
+ {Array.from({ length: 50 }).map((_, i) => ( +
❄
+ ))} +
+
+ {Array.from({ length: 50 }).map((_, i) => ( +
❄
+ ))} +
+
+ ) +} + +export default Snow diff --git a/packages/frontend/src/components/layout/Snow.scss b/packages/frontend/src/components/layout/Snow.scss new file mode 100644 index 000000000..f7e2618c5 --- /dev/null +++ b/packages/frontend/src/components/layout/Snow.scss @@ -0,0 +1,80 @@ +.Snow { + &__BottomContainer, &__TopContainer { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + overflow: hidden; + } + + &__TopContainer { + z-index: 9999; + } + + &__BottomContainer { + z-index: -1; + opacity: .3; + } + + &__Snowflake { + position: absolute; + top: -10%; + font-size: 1em; + color: white; + opacity: 0.8; + animation: fall linear infinite, drift infinite ease-in-out; + + &:nth-child(odd) { + font-size: 1.5em; + opacity: 0.9; + } + + &:nth-child(even) { + font-size: 0.8em; + opacity: 0.7; + } + } + + &__TopContainer & { + &__Snowflake { + &:nth-child(1) { left: 5%; animation-duration: 10s, 4s; animation-delay: 0s, 1s; } + &:nth-child(2) { left: 30%; animation-duration: 12s, 6s; animation-delay: 1s, 0s; } + &:nth-child(3) { left: 50%; animation-duration: 8s, 5s; animation-delay: 2s, 2s; } + &:nth-child(4) { left: 70%; animation-duration: 14s, 7s; animation-delay: 3s, 1s; } + &:nth-child(5) { left: 95%; animation-duration: 10s, 4s; animation-delay: 4s, 3s; } + } + } + + &__BottomContainer & { + &__Snowflake { + &:nth-child(1) { left: 2%; animation-duration: 17s, 7s; animation-delay: 1s, 2.5s; } + &:nth-child(2) { left: 32%; animation-duration: 13s, 4s; animation-delay: 3s, 3s; } + &:nth-child(3) { left: 50%; animation-duration: 15s, 6s; animation-delay: 0s, 0s; } + &:nth-child(4) { left: 72%; animation-duration: 17s, 5s; animation-delay: 1s, 2s; } + &:nth-child(5) { left: 98%; animation-duration: 20s, 7s; animation-delay: 0s, 1s; } + } + } + + @keyframes fall { + 0% { + top: calc(-10px); + } + 100% { + top: calc(100% + 10px); + } + } + + @keyframes drift { + 0% { + margin-left: 0; + } + 50% { + margin-left: 40px; + } + 100% { + margin-left: 0; + } + } +} diff --git a/packages/frontend/src/components/total/TotalCards.js b/packages/frontend/src/components/total/TotalCards.js index cfda03461..dcbb04aac 100644 --- a/packages/frontend/src/components/total/TotalCards.js +++ b/packages/frontend/src/components/total/TotalCards.js @@ -3,7 +3,7 @@ import ValueBlock from './ValueBlock' import { Box } from '@chakra-ui/react' import './TotalCards.scss' -export default function TotalCards ({ cards, loading = false }) { +export default function TotalCards ({ cards, event = null, loading = false }) { return (
{cards.map((card, i) => ( @@ -14,6 +14,7 @@ export default function TotalCards ({ cards, loading = false }) { value={card.value} icon={card.icon} formats={card.format} + event={event} /> : } diff --git a/packages/frontend/src/components/total/TotalInfo.js b/packages/frontend/src/components/total/TotalInfo.js index 783c4f171..902b7c523 100644 --- a/packages/frontend/src/components/total/TotalInfo.js +++ b/packages/frontend/src/components/total/TotalInfo.js @@ -3,10 +3,22 @@ import './TotalInfoItem.scss' import { Container, Flex } from '@chakra-ui/react' import Link from 'next/link' -export default function TotalInfo ({ blocks, transactions, dataContracts, documents, identities, loading }) { +export default function TotalInfo ({ + blocks, + transactions, + dataContracts, + documents, + identities, + loading, + event = null +}) { + const eventClasses = { + christmas: 'TotalInfo--Christmas' + } + return ( { if (format === 'elipsed') return 'ValueBlock__Value--Elipsed' @@ -9,7 +12,7 @@ export default function ValueBlock ({ title, value, icon, formats = [], classNam }).join(' ') return ( -
+
{icon &&
} diff --git a/packages/frontend/src/components/total/ValueBlock.scss b/packages/frontend/src/components/total/ValueBlock.scss index 4a07a5426..85934980e 100644 --- a/packages/frontend/src/components/total/ValueBlock.scss +++ b/packages/frontend/src/components/total/ValueBlock.scss @@ -2,101 +2,113 @@ @import '../../styles/variables.scss'; .ValueBlock { - position: relative; - display: flex; - align-items: center; - padding-left: 44px; + position: relative; + display: flex; + align-items: center; + padding-left: 44px; + &::before { + content: ''; + display: block; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 28px; + height: 28px; + } + + &--Blocks { &::before { - content: ''; - display: block; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 28px; - height: 28px; + background: url('/images/icons/block.svg') no-repeat center; + background-size: contain; } + } - &--Blocks { - &::before { - background: url("/images/icons/transactions.svg") no-repeat center; - background-size: contain; - } + &--Transactions { + &::before { + background: url('/images/icons/transactions.svg') no-repeat center; + background-size: contain; } + } - &--Transactions { - &::before { - background: url('/images/icons/block.svg') no-repeat center; - background-size: contain; - } + &--Timer { + &::before { + background: url('/images/icons/timer.svg') no-repeat center; + background-size: contain; } + } - &--Timer { - &::before { - background: url('/images/icons/timer.svg') no-repeat center; - background-size: contain; - } + &--Epoch { + &::before { + background: url('/images/icons/timer.svg') no-repeat center; + background-size: contain; } + } - &--Epoch { - &::before { - background: url('/images/icons/timer.svg') no-repeat center; - background-size: contain; - } + &--Sandglass { + &::before { + background: url('/images/icons/sandglass.svg') no-repeat center; + background-size: contain; } + } - &--Sandglass { - &::before { - background: url('/images/icons/sandglass.svg') no-repeat center; - background-size: contain; - } + &--Nodes { + &::before { + background: url('/images/icons/nodes.svg') no-repeat center; + background-size: contain; } + } - &--Nodes { - &::before { - background: url('/images/icons/nodes.svg') no-repeat center; - background-size: contain; - } + &--Coins { + &::before { + background: url('/images/icons/coins.svg') no-repeat center; + background-size: contain; } + } - &--Coins { - &::before { - background: url('/images/icons/coins.svg') no-repeat center; - background-size: contain; - } + &--StarCheck { + &::before { + background: url('/images/icons/star-check.svg') no-repeat center; + background-size: contain; } + } - &--StarCheck { - &::before { - background: url('/images/icons/star-check.svg') no-repeat center; - background-size: contain; - } + &--Christmas.ValueBlock { + &--Blocks { + &::before { + background: url('/images/icons/block-present.svg') no-repeat center; + background-size: contain; + width: 30px; + height: 30px; + margin: -1px; + } } + } + + &__Title { + color: var(--chakra-colors-brand-deep); + font-size: 1rem; + margin-right: 10px; + white-space: nowrap; + } - &__Title { - color: var(--chakra-colors-brand-deep); - font-size: 1rem; - margin-right: 10px; - white-space: nowrap; + &__Value { + font-size: 1.125rem; + + &--Loading { + @include mixins.LoadingLine; + + opacity: .5; + border-radius: 5px; + animation-delay: 100ms; } - - &__Value { - font-size: 1.125rem; - - &--Loading { - @include mixins.LoadingLine; - - opacity: .5; - border-radius: 5px; - animation-delay: 100ms; - } - - &--Elipsed { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + + &--Elipsed { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + } } \ No newline at end of file diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.scss b/packages/frontend/src/components/transactions/TransactionsListItem.scss index 01b39b86f..7a84ffc7c 100644 --- a/packages/frontend/src/components/transactions/TransactionsListItem.scss +++ b/packages/frontend/src/components/transactions/TransactionsListItem.scss @@ -79,6 +79,7 @@ .Identifier, .TransactionsListItem__AliasContainer, .Identifier__Avatar, + img, a { display: block !important; } diff --git a/packages/frontend/src/components/validators/ValidatorCard.js b/packages/frontend/src/components/validators/ValidatorCard.js index c5600e227..73f3f1db4 100644 --- a/packages/frontend/src/components/validators/ValidatorCard.js +++ b/packages/frontend/src/components/validators/ValidatorCard.js @@ -15,7 +15,9 @@ export default function ValidatorCard ({ validator, rate, className }) { lightness={50} saturation={50} width={88} - height={88}/> + height={88} + hat={'christmas'} + /> : 'n/a' }
diff --git a/packages/frontend/src/styles/components/Table.scss b/packages/frontend/src/styles/components/Table.scss index 46454e2b0..d36a87be9 100644 --- a/packages/frontend/src/styles/components/Table.scss +++ b/packages/frontend/src/styles/components/Table.scss @@ -47,6 +47,8 @@ &__Avatar { margin-left: 8px; + width: 32px; + height: 32px; } &__SortDirection { diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index 34cfc3e66..4fc2fa975 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -1,5 +1,10 @@ @import './variables.scss'; +@mixin AvatarSize() { + height: 24px; + width: 24px; +} + @mixin DefListItem($clickable: true) { display: flex; width: 100%; @@ -41,9 +46,9 @@ } &__Avatar { + @include AvatarSize; + flex-shrink: 0; margin-right: 12px; - height: 28px; - width: 28px; } &__NotActiveText {