fix time display

components/PoolCountdown.tsx

@@ -1,6 +1,7 @@
 import usePool from '../hooks/usePool'
 import Countdown from 'react-countdown'
 import moment from 'moment'
+import { ClockIcon } from '@heroicons/react/outline'
 
 const PoolCountdown = (props: { date: moment.Moment }) => {
   const { endIdo, endDeposits } = usePool()
@@ -13,17 +14,18 @@ const PoolCountdown = (props: { date: moment.Moment }) => {
       return <p className="text-secondary-2-light">{message}</p>
     } else {
       return (
-        <div className="font-bold pt-2 text-fgd-1 text-base">
+        <div className="font-bold text-fgd-1 text-base flex items-center">
-          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
+          <ClockIcon className="w-5 h-5 mr-1" />
+          <span>
+            {/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
             {hours < 10 ? `0${hours}` : hours}
-          </span>
+            {/* </span> */}:
-          :
+            {/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
-          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
             {minutes < 10 ? `0${minutes}` : minutes}
-          </span>
+            {/* </span> */}:
-          :
+            {/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
-          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
             {seconds < 10 ? `0${seconds}` : seconds}
+            {/* </span> */}
           </span>
         </div>
       )

components/PoolInfoCards.tsx

@@ -30,7 +30,7 @@ const PoolInfoCards = () => {
 
       <Card title="Total $MNGO for sale">
         <div className="flex">
-          <img className="h-5 mr-2 w-auto" src="/logo.svg" alt="MNGO" />
+          <img className="h-5 mr-1 w-auto" src="/logo.svg" alt="MNGO" />
           <div className="font-bold text-fgd-1 text-base">
             {vaults.mangoBalance}
           </div>
@@ -44,7 +44,7 @@ const PoolInfoCards = () => {
             width="20"
             height="20"
             src="/icons/usdc.svg"
-            className={`mr-2`}
+            className={`mr-1`}
           />{' '}
           <div className="font-bold text-fgd-1 text-base">
             {vaults.usdcBalance}
@@ -59,7 +59,7 @@ const PoolInfoCards = () => {
             width="20"
             height="20"
             src="/icons/usdc.svg"
-            className={`mr-2`}
+            className={`mr-1`}
           />{' '}
           <div className="font-bold text-fgd-1 text-base">
             {vaults.estimatedPrice.substring(0, 9)}

hooks/usePool.tsx

@@ -9,5 +9,9 @@ export default function usePool() {
     ? moment.unix(pool.endDepositsTs.toNumber())
     : undefined
 
+  // // override for testing
+  // endDeposits = moment().add(1, 'days')
+  // endIdo = moment().add(2, 'days')
+
   return { pool, startIdo, endIdo, endDeposits }
 }