fix: Fix the Monthly Active Accounts table style (#86)

onbloc · Aug 23, 2023 · 37c7789 · 37c7789
1 parent 81f0e52
commit 37c7789
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/src/components/ui/text/amount-text.tsx b/src/components/ui/text/amount-text.tsx
@@ -40,19 +40,21 @@ export const AmountText = ({
 
   return (
     <Wrapper className={className}>
-      {num && (
-        <>
-          <Text className="text-wrapper" type={maxSize} color={color} display="contents">
-            {num[0]}
-          </Text>
-          <Text type={minSize} color={color} display="contents" className="decimals">
-            {decimalValue(num)}
-          </Text>
-          <Text type={maxSize} color={color} display="contents">
-            {denom}
-          </Text>
-        </>
-      )}
+      <div className="amount-wrapper">
+        {num && (
+          <>
+            <Text className="text-wrapper" type={maxSize} color={color} display="contents">
+              {num[0]}
+            </Text>
+            <Text type={minSize} color={color} display="contents" className="decimals">
+              {decimalValue(num)}
+            </Text>
+            <Text type={maxSize} color={color} display="contents">
+              {denom}
+            </Text>
+          </>
+        )}
+      </div>
     </Wrapper>
   );
 };

diff --git a/src/components/view/main-active-list/main-active-list.tsx b/src/components/view/main-active-list/main-active-list.tsx
@@ -8,6 +8,7 @@ import ActiveBoards from './active-boards';
 import Text from '@/components/ui/text';
 import {AmountText} from '@/components/ui/text/amount-text';
 import {TextProps} from '@/components/ui/text/text';
+import {PaletteKeyType} from '@/styles';
 
 interface StyledTextProps extends TextProps {
   width?: string;
@@ -101,10 +102,22 @@ export const StyledText = styled(Text)<StyledTextProps>`
   ${textStyle};
 `;
 
-export const StyledAmountText = styled(AmountText)<{width?: string}>`
+export const StyledAmountText = styled(AmountText)<{width?: string; color?: PaletteKeyType}>`
   min-width: ${({width}) => width};
   max-width: ${({width}) => width};
-  ${textStyle};
+  ${textStyle}
+
+  & .amount-wrapper {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: ${({theme, color}) => theme.colors[color ?? 'reverse']};
+    & * {
+      display: inline;
+      white-space: nowrap;
+    }
+  }
 `;
 
 export const FitContentA = styled.a`