removed search bar for better vertical spacing during demo & added cu…

…s… (#64) …tom breakpoint to product deatil page to support sidebar backpack wallet
glamsystems · Apr 6, 2024 · 5543a3b · 5543a3b
1 parent d1da0e5
commit 5543a3b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/web/src/app/products/product-page.tsx b/web/src/app/products/product-page.tsx
@@ -73,12 +73,15 @@ export default function ProductPage() {
 
   const { account } = useGlamProgramAccount({ fundKey });
   const data = account.data;
-  const { aum, totalShares } = getAum(data?.treasury?.toString() || "", data?.shareClasses[0] || fundKey) || { aum: 0, totalShares: 0 };
+  const { aum, totalShares } = getAum(
+    data?.treasury?.toString() || "",
+    data?.shareClasses[0] || fundKey
+  ) || { aum: 0, totalShares: 0 };
   // const totalShares = getTotalShares(data?.shareClasses[0] || fundKey) || 0;
   if (account.isLoading) {
     return ""; //spinner
   }
-  
+
   const fundModel = new FundModel(fundKey, data);
   const imageURL =
     data?.shareClasses[0].toBase58() || "1111111111111111111111111111111111";
@@ -152,7 +155,7 @@ export default function ProductPage() {
 
   return (
     <div>
-      <div className="flex flex-col mx-[50px] md:mx-[80px] xl:mx-[180px]">
+      <div className="flex flex-col mx-[50px] md:mx-[80px] min-[1330px]:mx-[42px] min-[1350px]:mx-[180px]">
         <div className="flex gap-[8px] mt-[80px] mb-[10px]">
           <p
             style={{
@@ -227,11 +230,12 @@ export default function ProductPage() {
                         <p className="text-xl text-black">
                           {formatPercent(fund.dailyNavChange)}
                         </p>
-                        {fund.dailyNavChange && (fund.dailyNavChange > 0 ? (
-                          <IconArrowUpRight size={24} color="#48BF84" />
-                        ) : (
-                          <IconArrowDownRight size={24} color="#FF5F5F" />
-                        ))}
+                        {fund.dailyNavChange &&
+                          (fund.dailyNavChange > 0 ? (
+                            <IconArrowUpRight size={24} color="#48BF84" />
+                          ) : (
+                            <IconArrowDownRight size={24} color="#FF5F5F" />
+                          ))}
                       </div>
                     </div>
                   </Tile>

diff --git a/web/src/app/products/products-overview.tsx b/web/src/app/products/products-overview.tsx
@@ -17,24 +17,23 @@ import { formatDateFromTimestamp } from "../utils/format-number";
 import { useGlamProgram } from "../glam/glam-data-access";
 import { useNavigate } from "react-router-dom";
 
-const capitalize = (s: string) => (
-  s.charAt(0).toUpperCase() + s.slice(1)
-);
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 
 /* Sort funds by inception data (last created first)
    and by symbol if funds have the same inception date */
 const sortFunds = (a: any, b: any) => {
   if (a.inception == b.inception) {
-    return (a.symbol <= b.symbol) ? -1 : 1;
+    return a.symbol <= b.symbol ? -1 : 1;
   }
-  return (a.inception < b.inception) ? 1 : -1;
-}
+  return a.inception < b.inception ? 1 : -1;
+};
 
 export default function ProductsOverview() {
   const { accounts } = useGlamProgram();
   const navigate = useNavigate();
 
-  let rows = (accounts.data || []).map((account) => {
+  let rows = (accounts.data || [])
+    .map((account) => {
       const fund = account.account;
       const imageKey =
         fund.shareClasses[0].toBase58() || "1111111111111111111111111111111111";
@@ -48,14 +47,17 @@ export default function ProductsOverview() {
         fees_management: fund.shareClassesMetadata[0].feeManagement / 10_000.0,
         fees_performance:
           fund.shareClassesMetadata[0].feePerformance / 10_000.0,
-        inception: new Date(Date.parse(
-          fund.shareClassesMetadata[0].launchDate
-        )),
+        inception: new Date(
+          Date.parse(fund.shareClassesMetadata[0].launchDate)
+        ),
         status: capitalize(fund.shareClassesMetadata[0].lifecycle),
         shareClassAsset: fund.shareClassesMetadata[0].shareClassAsset,
-        policyDistribution: capitalize(fund.shareClassesMetadata[0].policyDistribution),
+        policyDistribution: capitalize(
+          fund.shareClassesMetadata[0].policyDistribution
+        )
       };
-  }).sort(sortFunds);
+    })
+    .sort(sortFunds);
 
   const headers = [
     {
@@ -124,11 +126,11 @@ export default function ProductsOverview() {
           getToolbarProps
         }) => (
           <TableContainer className="w-[80vw]">
-            <TableToolbar {...getToolbarProps()}>
+            {/* <TableToolbar {...getToolbarProps()}>
               <TableToolbarContent>
                 <TableToolbarSearch onChange={() => console.log("change")} />
               </TableToolbarContent>
-            </TableToolbar>
+            </TableToolbar>*/}
             <Table {...getTableProps()}>
               <TableHead>
                 <TableRow>