fix: table UI issue in marketplace screen

TERITORI · Apr 18, 2024 · 49fe5dc · 49fe5dc
1 parent ba84265
commit 49fe5dc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/components/table/TableRow.tsx b/packages/components/table/TableRow.tsx
@@ -6,6 +6,8 @@ import { fontSemibold12 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 
+import { useIsMobile } from "@/hooks/useIsMobile";
+
 export type TableRowHeading = { label: string; flex: number };
 
 interface TableRowProps {
@@ -14,6 +16,8 @@ interface TableRowProps {
 }
 
 export const TableRow: React.FC<TableRowProps> = ({ headings, labelStyle }) => {
+  const isMobile = useIsMobile();
+
   return (
     <View style={styles.row}>
       {headings.map(({ label, flex }, index) => (
@@ -24,7 +28,11 @@ export const TableRow: React.FC<TableRowProps> = ({ headings, labelStyle }) => {
             {
               flex,
               paddingRight:
-                headings.length - 1 === index ? 0 : layout.spacing_x1,
+                headings.length - 1 === index
+                  ? isMobile
+                    ? 0
+                    : layout.spacing_x1
+                  : 0,
             },
             labelStyle,
           ]}
@@ -47,7 +55,7 @@ const styles = StyleSheet.create({
     width: "100%",
     backgroundColor: codGrayColor,
     minHeight: layout.contentSpacing,
-    paddingHorizontal: layout.spacing_x2_5,
+    paddingHorizontal: layout.spacing_x1_25,
     borderTopLeftRadius: layout.borderRadius,
     borderTopRightRadius: layout.borderRadius,
   },

diff --git a/packages/screens/Marketplace/MarketplaceScreen.tsx b/packages/screens/Marketplace/MarketplaceScreen.tsx
@@ -60,23 +60,23 @@ import { arrayIncludes } from "@/utils/typescript";
 const TABLE_COLUMNS = {
   rank: {
     label: "Rank",
-    flex: 0.5,
+    flex: 0.6,
   },
   collectionNameData: {
     label: "Collection",
-    flex: 2.5,
+    flex: 2.4,
   },
   tradeVolume: {
     label: "",
-    flex: 1.8,
+    flex: 1.9,
   },
   tradeVolumeDiff: {
     label: "",
     flex: 1,
   },
   sales: {
     label: "",
-    flex: 1,
+    flex: 1.1,
   },
   floorPrice: {
     label: "Floor Price",
@@ -88,11 +88,11 @@ const TABLE_COLUMNS = {
   },
   supply: {
     label: "Supply",
-    flex: 1,
+    flex: 1.2,
   },
   mintVolume: {
     label: "",
-    flex: 1.8,
+    flex: 1.5,
   },
 };
 
@@ -394,9 +394,7 @@ const CollectionRow: React.FC<{
         params: { id: collection.id },
       }}
     >
-      <InnerCell style={{ flex: TABLE_COLUMNS.rank.flex }}>
-        {rowData.rank}
-      </InnerCell>
+      <InnerCell style={{ flex: 0.4 }}>{rowData.rank}</InnerCell>
 
       <View
         style={{
@@ -413,7 +411,10 @@ const CollectionRow: React.FC<{
           style={{ marginRight: isMobile ? 8 : layout.spacing_x1_5 }}
         />
         <BrandText
-          style={isMobile ? fontSemibold11 : fontSemibold13}
+          style={[
+            isMobile ? fontSemibold11 : fontSemibold13,
+            { width: isMobile ? 80 : "auto" },
+          ]}
           numberOfLines={1}
         >
           {rowData.collectionNameData.collectionName}