styles

Rari-Capital · May 24, 2021 · 900893e · 900893e · github-actions · May 24, 2021
1 parent 826b369
commit 900893e
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 39 deletions.
diff --git a/src/components/pages/Home/Home.tsx b/src/components/pages/Home/Home.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
-import { Heading, Text, Link, SimpleGrid } from "@chakra-ui/react";
+import { Box, Heading, Text, Link, SimpleGrid } from "@chakra-ui/react";
 import { Column, Row } from "buttered-chakra";
 import { useIsSmallScreen } from "hooks/useIsSmallScreen";
 import NewHeader from "components/shared/Header2/NewHeader";
@@ -85,12 +85,25 @@ const Home = React.memo(() => {
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -40 }}
             >
-              <InputGroup width={{ base: "sm", sm: "sm", md: "md", lg: "2xl" }}>
+              <InputGroup
+                width={{ base: "sm", sm: "sm", md: "md", lg: "2xl" }}
+                h="55px"
+                // pl={2}
+              >
                 <InputLeftElement
                   pointerEvents="none"
-                  children={<SearchIcon color="gray.300" />}
+                  height="100%"
+                  children={<SearchIcon color="gray.300" boxSize={5} />}
+                  ml={1}
+                />
+
+                <Input
+                  border="3px solid red"
+                  borderColor="grey"
+                  height="100%"
+                  placeholder="Search by token, pool or product..."
+                  _placeholder={{ color: "grey.500", fontWeight: "bold" }}
                 />
-                <Input border="3px solid #80807F" placeholder="Search" />
               </InputGroup>
             </motion.div>
           </Column>
@@ -179,14 +192,13 @@ const Home = React.memo(() => {
               <Column
                 mainAxisAlignment="space-around"
                 crossAxisAlignment="flex-start"
-                // bg="pink"
                 height="100%"
-                flex="0 0"
+                flex="0 1"
                 flexBasis={{
-                  base: "0 0 25%",
-                  sm: "0 0 25%",
-                  md: "0 0 30%",
-                  lg: "0 0 40%",
+                  base: "25%",
+                  sm: "25%",
+                  md: "30%",
+                  lg: "40%",
                 }}
                 p={5}
               >
@@ -204,7 +216,7 @@ const Home = React.memo(() => {
                   crossAxisAlignment="flex-start"
                   captionFirst={false}
                 />
-                <Text fontSize="sm" fontWeight="bold">
+                <Text fontSize={isMobile ? "sm" : "md"} fontWeight="bold">
                   Discover infinite possibilities across the Rari Capital
                   Ecosystem
                 </Text>
@@ -213,15 +225,15 @@ const Home = React.memo(() => {
                 mainAxisAlignment="center"
                 crossAxisAlignment="center"
                 height="100%"
-                // flex="1 1"
-                flex={{
-                  base: "1 1 75%",
-                  sm: "1 1 75%",
-                  md: "1 1 70%",
-                  lg: "1 1 60%",
+                flex="1 1"
+                flexBasis={{
+                  base: "75%",
+                  sm: "75%",
+                  md: "70%",
+                  lg: "60%",
                 }}
                 width="1px" // weird hack to make the carousel fit. idk why it works
-                py={5}
+                py={{ base: 0, sm: 0, md: 0, lg: 5 }}
               >
                 <HomeCarousel />
               </Column>

diff --git a/src/components/pages/Home/HomeCarousel.tsx b/src/components/pages/Home/HomeCarousel.tsx
@@ -4,16 +4,8 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 import { Carousel } from "react-responsive-carousel";
 import { Column } from "buttered-chakra";
 import { useIsSmallScreen } from "hooks/useIsSmallScreen";
-import { FusePoolData } from "utils/fetchFusePoolData";
-import {
-  useFuseDataForAsset,
-  useFuseDataForAssets,
-} from "hooks/fuse/useFuseDataForAsset";
-import {
-  shortUsdFormatter,
-  smallStringUsdFormatter,
-  smallUsdFormatter,
-} from "utils/bigUtils";
+import { useFuseDataForAssets } from "hooks/fuse/useFuseDataForAsset";
+import { smallStringUsdFormatter, smallUsdFormatter } from "utils/bigUtils";
 
 const ASSETS = ["DAI", "ETH", "RGT"];
 
@@ -42,14 +34,14 @@ const HomeCarousel = () => {
       >
         {pools.map((pool, i) => {
           return (
-            <Box w="100%">
+            <Box w="100%" h="100%">
               <Heading
-                fontSize={{ base: "sm", sm: "md", md: "lg", lg: "lg" }}
-                textAlign="left"
+                fontSize={{ base: "md", sm: "lg", md: "lg", lg: "xl" }}
+                textAlign={isMobile ? "left" : "center"}
               >
                 The Rari Capital Ecosystem currently has{" "}
                 <InlineStyledText
-                  text={`${shortUsdFormatter(pool.totalSuppliedUSD)} ${
+                  text={`${smallStringUsdFormatter(pool.totalSuppliedUSD)} ${
                     ASSETS[i]
                   }`}
                 />{" "}

diff --git a/src/components/pages/Home/HomeVaultCard.tsx b/src/components/pages/Home/HomeVaultCard.tsx
@@ -31,7 +31,7 @@ const HomeVaultCard = ({
         _hover={{
           opacity: 1,
           transform: "translateY(-10px)",
-          boxShadow: ".5px 1px 4px grey;",
+          boxShadow: ".5px 1px 2px grey;",
         }}
         bg={opportunity.bgColor}
       >

diff --git a/src/components/pages/Home/OpportunityCard.tsx b/src/components/pages/Home/OpportunityCard.tsx
@@ -48,9 +48,9 @@ const OpportunityCard = ({
           height={"100%"}
           flex="0 0 70%"
         >
-          <Heading size="xs">{opportunity.title}</Heading>
+          <Heading size="sm">{opportunity.title}</Heading>
           <Skeleton isLoaded={!!subheading} height="10px" my={1}>
-            <Text fontSize="xs">{`${subheading}`}</Text>
+            <Text fontSize="xs" fontWeight="bold">{`${subheading}`}</Text>
           </Skeleton>
           <Text fontSize="xs" mt={2}>
             {opportunity.subtitle}

diff --git a/src/components/shared/Header2/HeaderSearchbar.tsx b/src/components/shared/Header2/HeaderSearchbar.tsx
@@ -15,8 +15,9 @@ const HeaderSearchbar = (props: any) => {
         <Input
           variant="filled"
           value={val}
-          placeholder="Search by token, pool or product..."
           onChange={({ target: { value } }) => setVal(value)}
+          placeholder="Search by token, pool or product..."
+          _placeholder={{ color: "grey.500", fontWeight: "bold" }}
         />
       </InputGroup>
     </Box>

diff --git a/src/index.css b/src/index.css
@@ -168,14 +168,15 @@ img:not([src]) {
 
 .carousel-root {
   width: 100%;
-  padding: 20px;
+  height: 100%;
+  /* padding: 20px; */
   /* background-color: pink; */
 }
 
 .carousel-slider {
   width: 100%;
   height: 100%;
-  padding: 20px;
+  /* padding: 20px; */
 }
 
 .slider-wrapper {
@@ -186,7 +187,7 @@ img:not([src]) {
 }
 
 .dot {
-  background-color: green;
+  /* background-color: green; */
 }
 
 /* Chakra UI sm breakpoint */