Implement christmas styles to block icon

pshenmic · Dec 13, 2024 · fb986c9 · fb986c9
1 parent c44284f
commit fb986c9
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 81 deletions.
diff --git a/packages/frontend/public/images/icons/block-present.svg b/packages/frontend/public/images/icons/block-present.svg
diff --git 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'}
       />
     </Container>
 

diff --git 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 (
     <TotalCards
+      event={'christmas'}
       cards={[
         {
           title: 'Epoch:',

diff --git 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 (
     <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'}/>
               }

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

diff --git a/packages/frontend/src/components/total/TotalInfoItem.scss b/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;

diff --git a/packages/frontend/src/components/total/ValueBlock.js b/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>
         }

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