fix(grid): cleaned finalize grid

bitbeckers · Mar 30, 2023 · fabc297 · fabc297
1 parent af6f5be
commit fabc297
Showing 1 changed file with 18 additions and 20 deletions.
diff --git a/app/components/FUX/FinalizeForm/index.tsx b/app/components/FUX/FinalizeForm/index.tsx
@@ -14,6 +14,7 @@ import {
   Text,
   Stat,
   StatNumber,
+  Flex,
 } from "@chakra-ui/react";
 import { BigNumberish, ethers } from "ethers";
 import _, { groupBy, mapValues, meanBy } from "lodash";
@@ -116,34 +117,36 @@ const FinalizeForm: React.FC<{
   const finalizeForm =
     contributors && contributors?.length > 0 ? (
       <>
-        <Grid gap={2} templateColumns="repeat(12, 1fr)">
-          <GridItem colSpan={5}>
+        <Grid gap={2} templateColumns="repeat(16, 1fr)">
+          <GridItem colSpan={8}>
             <Text>Contributor</Text>
           </GridItem>
-          <GridItem colSpan={2}>
+          <GridItem colSpan={3}>
             <Text>Committed</Text>
           </GridItem>
           <GridItem colSpan={2}>
             <Text>vFUX</Text>
           </GridItem>
-          <GridItem colSpan={1}>
-            <Text>Coordinator</Text>
-          </GridItem>
-          <GridItem colSpan={2}>
+          <GridItem colSpan={3}>
             <Text>Funds</Text>
           </GridItem>
           {contributors.map((contributor, index) => {
             const address = contributor.contributor.id as `0x${string}`;
             return (
               <Fragment key={index}>
-                <GridItem colSpan={5}>
-                  <User
-                    address={address as `0x${string}`}
-                    direction="horizontal"
-                    displayAvatar={true}
-                  />
+                <GridItem colSpan={8}>
+                  <Flex align={"center"}>
+                    <User
+                      address={address as `0x${string}`}
+                      direction="horizontal"
+                      displayAvatar={true}
+                    />
+                    {coordinator?.toLowerCase() === address.toLowerCase() ? (
+                      <StarIcon ml={"1em"} />
+                    ) : undefined}
+                  </Flex>
                 </GridItem>
-                <GridItem colSpan={2}>
+                <GridItem colSpan={3}>
                   <Stat>
                     <StatNumber>{`${contributor.commitment || 0}%`}</StatNumber>
                   </Stat>
@@ -155,15 +158,10 @@ const FinalizeForm: React.FC<{
                     </StatNumber>
                   </Stat>
                 </GridItem>
-                <GridItem colSpan={1}>
-                  {coordinator?.toLowerCase() === address.toLowerCase() ? (
-                    <StarIcon mr={"1em"} />
-                  ) : undefined}
-                </GridItem>
                 <GridItem
                   bg="#301A3A"
                   display={"inline-grid"}
-                  colSpan={2}
+                  colSpan={3}
                   justifyContent="end"
                   alignContent="center"
                 >