From e9827ca4e2d17e086e74259c9b266371028b2585 Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Wed, 7 Jul 2021 13:31:48 +0200
Subject: [PATCH] fix time display

---
 components/PoolCountdown.tsx | 18 ++++++++++--------
 components/PoolInfoCards.tsx |  6 +++---
 hooks/usePool.tsx            |  4 ++++
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/components/PoolCountdown.tsx b/components/PoolCountdown.tsx
index f0050b4..6b30be3 100644
--- a/components/PoolCountdown.tsx
+++ b/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">
-          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
+        <div className="font-bold text-fgd-1 text-base flex items-center">
+          <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 className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
+            {/* </span> */}:
+            {/* <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 className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
+            {/* </span> */}:
+            {/* <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>
       )
diff --git a/components/PoolInfoCards.tsx b/components/PoolInfoCards.tsx
index 9d98f46..f8a8acc 100644
--- a/components/PoolInfoCards.tsx
+++ b/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)}
diff --git a/hooks/usePool.tsx b/hooks/usePool.tsx
index 666f8fe..4686c06 100644
--- a/hooks/usePool.tsx
+++ b/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 }
 }