From a8754dcbdfc4fdc70dacb88769cdf66357bade8e Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Wed, 7 Jul 2021 13:37:12 +0200
Subject: [PATCH] fix layout for side panel

---
 components/ContributionModal.tsx | 4 ++--
 components/PoolCountdown.tsx     | 9 ++++++---
 hooks/usePool.tsx                | 5 +++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx
index d0fe906..6d70ba8 100644
--- a/components/ContributionModal.tsx
+++ b/components/ContributionModal.tsx
@@ -331,11 +331,11 @@ const ContributionModal = () => {
         </div>
         <div className="border-b border-bkg-4 py-4 text-center">
           <p className="text-fgd-3">Deposits Close</p>
-          <PoolCountdown date={endDeposits} />
+          <PoolCountdown date={endDeposits} className="justify-center pt-1" />
         </div>
         <div className="pt-4 text-center">
           <p className="text-fgd-3">Withdrawals Close</p>
-          <PoolCountdown date={endIdo} />
+          <PoolCountdown date={endIdo} className="justify-center pt-1" />
         </div>
         {/* <p>
           Start: {startIdo?.fromNow()} ({startIdo?.format()})
diff --git a/components/PoolCountdown.tsx b/components/PoolCountdown.tsx
index 6b30be3..08b6b28 100644
--- a/components/PoolCountdown.tsx
+++ b/components/PoolCountdown.tsx
@@ -3,9 +3,10 @@ import Countdown from 'react-countdown'
 import moment from 'moment'
 import { ClockIcon } from '@heroicons/react/outline'
 
-const PoolCountdown = (props: { date: moment.Moment }) => {
+const PoolCountdown = (props: { className?: string; date: moment.Moment }) => {
   const { endIdo, endDeposits } = usePool()
-  const renderCountdown = ({ hours, minutes, seconds, completed }) => {
+  const renderCountdown = ({ days, hours, minutes, seconds, completed }) => {
+    hours += days * 24
     const message =
       endDeposits?.isBefore() && endIdo?.isAfter()
         ? 'Deposits are closed'
@@ -14,7 +15,9 @@ const PoolCountdown = (props: { date: moment.Moment }) => {
       return <p className="text-secondary-2-light">{message}</p>
     } else {
       return (
-        <div className="font-bold text-fgd-1 text-base flex items-center">
+        <div
+          className={`${props.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"> */}
diff --git a/hooks/usePool.tsx b/hooks/usePool.tsx
index 4686c06..d63cc71 100644
--- a/hooks/usePool.tsx
+++ b/hooks/usePool.tsx
@@ -4,14 +4,15 @@ import useWalletStore from '../stores/useWalletStore'
 export default function usePool() {
   const pool = useWalletStore((s) => s.pool)
   const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
+
   const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined
   const endDeposits = pool
     ? moment.unix(pool.endDepositsTs.toNumber())
     : undefined
 
   // // override for testing
-  // endDeposits = moment().add(1, 'days')
-  // endIdo = moment().add(2, 'days')
+  // const endDeposits = moment().add(1, 'days')
+  // const endIdo = moment().add(2, 'days')
 
   return { pool, startIdo, endIdo, endDeposits }
 }