fix(sdk): adjust styles for asset with large values

AztecProtocol · Feb 6, 2020 · a46e09d · a46e09d
1 parent a138da2
commit a46e09d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/packages/extension/src/ui/components/AnimatedBlocks/blocks.scss b/packages/extension/src/ui/components/AnimatedBlocks/blocks.scss
@@ -147,7 +147,7 @@ $profile-icon-size: map-get($avatar-sizes-map, 'm');
 .sealed-icon {
   $sealed-icon-size: map-get($avatar-sizes-map, 'l');
   position: absolute;
-  top: map-get($spacing-map, 'xxl');
+  bottom: $block-spacing;
   right: $block-padding-h;
   display: flex;
   align-items: center;

diff --git a/packages/extension/src/ui/components/AnimatedBlocks/index.jsx b/packages/extension/src/ui/components/AnimatedBlocks/index.jsx
@@ -94,24 +94,6 @@ class AnimatedBlocks extends PureComponent {
                     },
                 )}
             >
-                {!!sealedIcon && type === 'sealed' && (
-                    <div className={styles['sealed-icon']}>
-                        {sealedIcon === 'aztec' && (
-                            <AztecSvg
-                                theme="light"
-                                size="s"
-                            />
-                        )}
-                        {sealedIcon === 'link' && (
-                            <SVG
-                                glyph={linkGlyph}
-                                color="white"
-                                width={iconSizeMap.m}
-                                height={iconSizeMap.m}
-                            />
-                        )}
-                    </div>
-                )}
                 {blocks.map((block, i) => (
                     <div
                         key={+i}
@@ -127,6 +109,24 @@ class AnimatedBlocks extends PureComponent {
                             layer={0}
                             {...block}
                         />
+                        {!!sealedIcon && type === 'sealed' && i === 0 && (
+                            <div className={styles['sealed-icon']}>
+                                {sealedIcon === 'aztec' && (
+                                    <AztecSvg
+                                        theme="light"
+                                        size="s"
+                                    />
+                                )}
+                                {sealedIcon === 'link' && (
+                                    <SVG
+                                        glyph={linkGlyph}
+                                        color="white"
+                                        width={iconSizeMap.m}
+                                        height={iconSizeMap.m}
+                                    />
+                                )}
+                            </div>
+                        )}
                     </div>
                 ))}
             </div>

diff --git a/packages/extension/src/ui/components/ListItem/index.jsx b/packages/extension/src/ui/components/ListItem/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import {
     FlexBox,
     Block,
@@ -16,6 +17,7 @@ import {
     profileShape,
 } from '~/ui/config/propTypes';
 import ProfileIcon from '~/ui/components/ProfileIcon';
+import styles from './li.scss';
 
 const spacingMapping = {
     xxs: 's',
@@ -63,7 +65,7 @@ const ListItem = ({
                     size={size}
                 />
                 <Block
-                    className="flex-free-expand"
+                    className={classnames('flex-free-expand', styles.content)}
                     align="left"
                     left={spacingMapping[contentSpacingSize || size]}
                 >
@@ -85,7 +87,10 @@ const ListItem = ({
             nowrap
         >
             {profileNode}
-            <Block left="m">
+            <Block
+                className="flex-fixed"
+                left="m"
+            >
                 <Text
                     size={textSize || size}
                 >

diff --git a/packages/extension/src/ui/components/ListItem/li.scss b/packages/extension/src/ui/components/ListItem/li.scss
@@ -0,0 +1,3 @@
+.content {
+  word-break: break-all;
+}