fix: BX-660 (#509)

rainbow-me · May 10, 2023 · 0fa7c1d · 0fa7c1d
1 parent 21eb11e
commit 0fa7c1d
Showing 1 changed file with 27 additions and 36 deletions.
diff --git a/src/entries/popup/components/IconAndCopyList.tsx/IconAndCopyList.tsx b/src/entries/popup/components/IconAndCopyList.tsx/IconAndCopyList.tsx
@@ -1,14 +1,6 @@
 import React from 'react';
 
-import {
-  Box,
-  Inline,
-  Row,
-  Rows,
-  Separator,
-  Symbol,
-  Text,
-} from '~/design-system';
+import { Box, Inline, Separator, Stack, Symbol, Text } from '~/design-system';
 import { SymbolProps } from '~/design-system/components/Symbol/Symbol';
 
 export interface IconAndCopyItem {
@@ -25,33 +17,32 @@ export function IconAndCopyList({
   iconAndCopyList: IconAndCopyItem[];
 }) {
   return (
-    <Rows alignHorizontal="center" alignVertical="top" space="20px">
-      {iconAndCopyList?.map(({ icon, copy }, i) => (
-        <>
-          <Row key={icon?.symbol}>
-            <Inline wrap={false} space="16px" alignVertical="center">
-              <Box display="flex" alignItems="center">
-                <Symbol
-                  symbol={icon.symbol}
-                  size={18}
-                  color={icon.color}
-                  weight="semibold"
-                />
-              </Box>
-              <Text size="14pt" weight="medium" color="label">
-                {copy}
-              </Text>
-            </Inline>
-          </Row>
-          {i < iconAndCopyList.length - 1 && (
-            <Row key={`${icon?.symbol}-sep`}>
-              <Box style={{ width: '148px' }}>
-                <Separator color="separatorTertiary" strokeWeight="1px" />
-              </Box>
-            </Row>
-          )}
-        </>
+    <Stack
+      alignHorizontal="center"
+      space="20px"
+      separator={
+        <Box style={{ width: '148px' }}>
+          <Separator color="separatorTertiary" strokeWeight="1px" />
+        </Box>
+      }
+    >
+      {iconAndCopyList?.map(({ icon, copy }) => (
+        <Box key={icon?.symbol}>
+          <Inline wrap={false} space="16px" alignVertical="center">
+            <Box display="flex" alignItems="center">
+              <Symbol
+                symbol={icon.symbol}
+                size={18}
+                color={icon.color}
+                weight="semibold"
+              />
+            </Box>
+            <Text size="14pt" weight="medium" color="label">
+              {copy}
+            </Text>
+          </Inline>
+        </Box>
       ))}
-    </Rows>
+    </Stack>
   );
 }