fix layout for side panel

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()})

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"> */}

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 }
 }