From a53969bd2544f07701c57574843b3a8fd99714c7 Mon Sep 17 00:00:00 2001
From: sharad-s <sharadshekar@gmail.com>
Date: Mon, 24 May 2021 15:20:32 -0500
Subject: [PATCH] req changes: styling

---
 src/components/pages/Home/Home.tsx              | 6 ++++--
 src/components/pages/Home/HomeFuseCard.tsx      | 2 +-
 src/components/pages/Stats/StatsFuseSection.tsx | 4 ++--
 src/components/shared/Header2/NewHeader.tsx     | 1 +
 src/hooks/useAssetsMap.ts                       | 4 ++--
 src/hooks/useFusePoolData.ts                    | 4 ++--
 src/index.css                                   | 1 -
 7 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/Home/Home.tsx b/src/components/pages/Home/Home.tsx
index 410e40a54..e3f5cae0a 100644
--- a/src/components/pages/Home/Home.tsx
+++ b/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>
diff --git a/src/components/pages/Home/HomeFuseCard.tsx b/src/components/pages/Home/HomeFuseCard.tsx
index 69bf0f516..0772def30 100644
--- a/src/components/pages/Home/HomeFuseCard.tsx
+++ b/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>
diff --git a/src/components/pages/Stats/StatsFuseSection.tsx b/src/components/pages/Stats/StatsFuseSection.tsx
index 7ba135962..0902d0610 100644
--- a/src/components/pages/Stats/StatsFuseSection.tsx
+++ b/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) => {
diff --git a/src/components/shared/Header2/NewHeader.tsx b/src/components/shared/Header2/NewHeader.tsx
index 441ba9606..3255d0ecb 100644
--- a/src/components/shared/Header2/NewHeader.tsx
+++ b/src/components/shared/Header2/NewHeader.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+
 import {
   Box,
   Heading,
diff --git a/src/hooks/useAssetsMap.ts b/src/hooks/useAssetsMap.ts
index e5837e0f5..01fdad828 100644
--- a/src/hooks/useAssetsMap.ts
+++ b/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);
diff --git a/src/hooks/useFusePoolData.ts b/src/hooks/useFusePoolData.ts
index 9b8e05c84..e4e550f8c 100644
--- a/src/hooks/useFusePoolData.ts
+++ b/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) {
diff --git a/src/index.css b/src/index.css
index e556df547..699f928fa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -207,7 +207,6 @@ img:not([src]) {
   .carousel-root {
     /* background-color: orange; */
     height: 100%;
-    padding: 20px;
   }
 }