Update ImageGenerator size settings

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

Hide file tree

Showing 9 changed files with 35 additions and 16 deletions.
diff --git 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 }) {
                             <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>

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

diff --git a/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss b/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss
@@ -47,6 +47,8 @@
 
   &__Avatar {
     margin-right: 4px;
+    width: 16px;
+    height: 16px;
   }
 
   &__Separator {

diff --git a/packages/frontend/src/components/data/Identifier.scss b/packages/frontend/src/components/data/Identifier.scss
@@ -35,6 +35,7 @@
   }
 
   &__Avatar {
+    @include mixins.AvatarSize;
     flex-shrink: 0;
     margin-right: 10px;
   }

diff --git a/packages/frontend/src/components/imageGenerator/ImageGenerator.scss b/packages/frontend/src/components/imageGenerator/ImageGenerator.scss
@@ -5,10 +5,18 @@
     position: absolute;
     top: 0;
     left: 50%;
-    transform: translate(-45%, -35%);
+
+    &--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: 48%;
-    background: url('/images/christmas-hat.svg') center no-repeat;
-    background-size: contain;
+    height: 100%;
   }
 }
diff --git a/packages/frontend/src/components/imageGenerator/index.js b/packages/frontend/src/components/imageGenerator/index.js
@@ -3,22 +3,22 @@ import { minidenticon } from 'minidenticons'
 import { useMemo } from 'react'
 import './ImageGenerator.scss'
 
-export default function ImageGenerator ({ username, hat = null, 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]
   )
 
-  const ImageElement = <Image src={svgURI} alt={username || ''} {...props} />
+  const ImageElement = <Image src={svgURI} alt={username || ''} className={'ImageGenerator__Image'} {...props}/>
 
   const hatClasses = {
     christmas: 'ImageGenerator__Hat--Christmas'
   }
 
-  return hat
-    ? <div className={'ImageGenerator'}>
-        {hat && <div className={`ImageGenerator__Hat ${hatClasses?.[hat] || ''}`}></div>}
-        {ImageElement}
-      </div>
-    : ImageElement
+  return (
+    <div className={`ImageGenerator ${className || ''}`}>
+      {hat && <div className={`ImageGenerator__Hat ${hatClasses?.[hat] || ''}`}></div>}
+      {ImageElement}
+    </div>
+  )
 }
diff --git 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/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
@@ -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 {