Merge pull request #361 from pshenmic/feat/background

Implement Christmas elements

packages/frontend/src/app/dataContract/[identifier]/DataContract.js

@@ -125,7 +125,7 @@ function DataContract ({ identifier }) {
                             <div className={'TableHeader__Content'}>
                                 {dataContract?.data?.name || ''}
                                 {dataContract.data?.identifier
-                                  ? <ImageGenerator className={'TableHeader__Avatar'} username={dataContract.data?.identifier} lightness={50} saturation={50} width={32} height={32}/>
+                                  ? <ImageGenerator className={'TableHeader__Avatar'} hat={'christmas'} username={dataContract.data?.identifier} lightness={50} saturation={50} width={32} height={32}/>
                                   : <Box w={'32px'} h={'32px'} />
                                 }
                             </div>

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'}
       />
     </Container>
 

packages/frontend/src/app/identity/[identifier]/Identity.js

@@ -123,7 +123,7 @@ function Identity ({ identifier }) {
                                     <Th className={'TableHeader TableHeader--Name'}>
                                         {identifier
                                           ? <div className={'TableHeader__Content'}>
-                                                <ImageGenerator className={'TableHeader__Avatar'} username={identifier} lightness={50} saturation={50} width={32} height={32}/>
+                                                <ImageGenerator className={'TableHeader__Avatar'} hat={'christmas'} username={identifier} lightness={50} saturation={50} width={32} height={32}/>
                                             </div>
                                           : <Box w={'32px'} h={'32px'} />
                                         }

packages/frontend/src/components/blocks/BlocksTotal.js

@@ -25,6 +25,7 @@ export default function BlocksTotal () {
 
   return (
     <TotalCards
+      event={'christmas'}
       cards={[
         {
           title: 'Epoch:',

packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss

@@ -47,6 +47,8 @@
 
   &__Avatar {
     margin-right: 4px;
+    width: 16px;
+    height: 16px;
   }
 
   &__Separator {

packages/frontend/src/components/data/Identifier.scss

@@ -35,6 +35,7 @@
   }
 
   &__Avatar {
+    @include mixins.AvatarSize;
     flex-shrink: 0;
     margin-right: 10px;
   }

packages/frontend/src/components/imageGenerator/ImageGenerator.scss

@@ -0,0 +1,22 @@
+.ImageGenerator {
+  position: relative;
+
+  &__Hat {
+    position: absolute;
+    top: 0;
+    left: 50%;
+
+    &--Christmas {
+      background: url('/images/christmas-hat.svg') center no-repeat;
+      background-size: contain;
+      transform: translate(-45%, -35%);
+      width: 100%;
+      height: 48%;
+    }
+  }
+
+  &__Image {
+    width: 100%;
+    height: 100%;
+  }
+}

packages/frontend/src/components/imageGenerator/index.js

@@ -1,12 +1,24 @@
 import Image from 'next/image'
 import { minidenticon } from 'minidenticons'
 import { useMemo } from 'react'
+import './ImageGenerator.scss'
 
-export default function ImageGenerator ({ username, saturation, lightness, ...props }) {
+export default function ImageGenerator ({ username, className, hat = null, saturation, lightness, ...props }) {
   const svgURI = useMemo(
     () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(username, saturation, lightness)),
     [username, saturation, lightness]
   )
 
-  return (<Image src={svgURI} alt={username || ''} {...props} />)
+  const ImageElement = <Image src={svgURI} alt={username || ''} className={'ImageGenerator__Image'} {...props}/>
+
+  const hatClasses = {
+    christmas: 'ImageGenerator__Hat--Christmas'
+  }
+
+  return (
+    <div className={`ImageGenerator ${className || ''}`}>
+      {hat && <div className={`ImageGenerator__Hat ${hatClasses?.[hat] || ''}`}></div>}
+      {ImageElement}
+    </div>
+  )
 }

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 (
-    <div className={`Background ${showDecoration ? 'Background--Light' : ''}`}></div>
+    <>
+      <div className={`Background ${showDecoration ? 'Background--Light' : ''}`}></div>
+      {snow && <Snow/>}
+    </>
   )
 }
 

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 {

packages/frontend/src/components/layout/RootComponent.js

@@ -16,7 +16,7 @@ export default function RootComponent ({ children }) {
 
   return (
     <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
-      <Background/>
+      <Background snow={true}/>
       <BreadcrumbsProvider>
         <Navbar/>
         {children}

packages/frontend/src/components/layout/Snow.js

@@ -0,0 +1,22 @@
+'use client'
+
+import './Snow.scss'
+
+function Snow () {
+  return (
+    <div className={'Snow'}>
+      <div className={'Snow__TopContainer'}>
+        {Array.from({ length: 50 }).map((_, i) => (
+          <div key={i} className={'Snow__Snowflake'}>&#10052;</div>
+        ))}
+      </div>
+      <div className={'Snow__BottomContainer'}>
+        {Array.from({ length: 50 }).map((_, i) => (
+          <div key={i} className={'Snow__Snowflake'}>&#10052;</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Snow

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;
+    }
+  }
+}

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 (
     <div className={'TotalCards'}>
         {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}
                   />
                 : <Box h={'27px'}/>
               }

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 (
     <Container
-      className={'TotalInfo'}
+      className={`TotalInfo ${event ? eventClasses?.[event] : ''}`}
       maxW={'none'}
       borderColor={'gray.800'}
       p={0}

packages/frontend/src/components/total/TotalInfoItem.scss

@@ -75,7 +75,19 @@
       background-size: contain;
     }
   }
-
+
+  .TotalInfo--Christmas & {
+    &--Blocks {
+      &::before {
+        background: url('/images/icons/block-present.svg') no-repeat center;
+        background-size: contain;
+        height: 48px;
+        width: 48px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
   &__Title {
     color: $color-brand-normal;
     font-size: 0.875rem;

packages/frontend/src/components/total/ValueBlock.js

@@ -1,15 +1,18 @@
 import './ValueBlock.scss'
 
-export default function ValueBlock ({ title, value, icon, formats = [], className }) {
+export default function ValueBlock ({ title, value, icon, formats = [], event = null, className }) {
   const iconClass = `ValueBlock--${icon}`
+  const eventClasses = {
+    christmas: 'ValueBlock--Christmas'
+  }
 
   const formatClass = formats.map(format => {
     if (format === 'elipsed') return 'ValueBlock__Value--Elipsed'
     return ''
   }).join(' ')
 
   return (
-    <div className={`ValueBlock ${iconClass} ${className}`}>
+    <div className={`ValueBlock ${iconClass || ''} ${className || ''} ${event ? eventClasses?.[event] : ''}`}>
         {icon &&
             <div className={'ValueBlock__Icon'}></div>
         }