req changes: styling

src/components/pages/Home/Home.tsx

@@ -101,18 +101,20 @@ const Home = React.memo(() => {
                   <InputLeftElement
                     pointerEvents="none"
                     height="100%"
+                    color="grey"
                     children={<SearchIcon color="gray.300" boxSize={5} />}
                     ml={1}
                   />
 
                   <Input
-                    border="3px solid red"
+                    border="3px solid"
                     borderColor="grey"
                     height="100%"
                     placeholder="Search by token, pool or product..."
-                    _placeholder={{ color: "grey.500", fontWeight: "bold" }}
+                    _placeholder={{ color: "grey", fontWeight: "bold" }}
                     onChange={({ target: { value } }) => setVal(value)}
                     value={val}
+                    color="grey"
                   />
                 </InputGroup>
               </form>

src/components/pages/Home/HomeFuseCard.tsx

@@ -92,7 +92,7 @@ const HomeFuseCard = ({ pool }: { pool: FusePoolData | undefined }) => {
             })}
           </AvatarGroup>
 
-          <Heading size="sm">{title ?? pool?.name}</Heading>
+          <Heading size="sm" mt={2}>{title ?? pool?.name}</Heading>
           <Text size="xs" color="gray.500" fontWeight="bold">
             {subtitle ?? assetsSubtitle}
           </Text>

src/components/pages/Stats/StatsFuseSection.tsx

@@ -17,7 +17,7 @@ import { motion } from "framer-motion";
 import { useFusePools } from "hooks/fuse/useFusePools";
 import { useFusePoolsData } from "hooks/useFusePoolData";
 import { useBorrowLimits } from "hooks/useBorrowLimit";
-import { useAssetsMapWithTokenData } from "hooks/useAssetsMap";
+import { useAssetsArrayWithTokenData } from "hooks/useAssetsMap";
 
 import { FusePoolData, USDPricedFuseAsset } from "utils/fetchFusePoolData";
 import { TokenData } from "hooks/useTokenData";
@@ -49,7 +49,7 @@ const Fuse = () => {
   const maxBorrows = useBorrowLimits(assetsArray);
 
   const { tokensDataMap }: { tokensDataMap: TokensDataHash } =
-    useAssetsMapWithTokenData(assetsArray);
+    useAssetsArrayWithTokenData(assetsArray);
 
   const totalBorrowBalanceUSD =
     fusePoolsData?.reduce((a, b) => {

src/components/shared/Header2/NewHeader.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+
 import {
   Box,
   Heading,

src/hooks/useAssetsMap.ts

@@ -29,8 +29,8 @@ type AssetsMapWithTokenDataReturn = {
   tokensDataMap: TokensDataHash; // hashmap of unique assets and their token data
 };
 
-// This returns a Hashmap
-export const useAssetsMapWithTokenData = (
+// This returns a Hashmap and the original array with tokenData inserted
+export const useAssetsArrayWithTokenData = (
   assetsArray: USDPricedFuseAsset[][] | null
 ): AssetsMapWithTokenDataReturn => {
   const assetsMap: AssetHash | null = useAssetsMap(assetsArray);

src/hooks/useFusePoolData.ts

@@ -8,7 +8,7 @@ import {
   USDPricedFuseAsset,
   USDPricedFuseAssetWithTokenData,
 } from "../utils/fetchFusePoolData";
-import { useAssetsMapWithTokenData } from "./useAssetsMap";
+import { useAssetsArrayWithTokenData } from "./useAssetsMap";
 
 export const useFusePoolData = (
   poolId: string | undefined
@@ -68,7 +68,7 @@ export const useFusePoolsData = (poolIds: number[]): FusePoolData[] | null => {
     assetsArrayWithTokenData,
   }: {
     assetsArrayWithTokenData: USDPricedFuseAssetWithTokenData[][] | null;
-  } = useAssetsMapWithTokenData(assetsArray);
+  } = useAssetsArrayWithTokenData(assetsArray);
 
   return useMemo(() => {
     if (assetsArrayWithTokenData && fusePoolsData) {

src/index.css

@@ -207,7 +207,6 @@ img:not([src]) {
   .carousel-root {
     /* background-color: orange; */
     height: 100%;
-    padding: 20px;
   }
 }