From 44e751958697b8d109d00f4fc7e15d4d7eae7d56 Mon Sep 17 00:00:00 2001
From: Nikos Kontakis <wirednkod@gmail.com>
Date: Thu, 12 Sep 2024 16:49:53 +0300
Subject: [PATCH] Fix the card to expand seperatly (#111)

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
---
 .../DelegationByAmountConviction.tsx          |   2 +-
 src/components/LocksCard.tsx                  | 159 +++++++++---------
 src/components/MyDelegations.tsx              |  43 ++---
 src/components/ui/button.tsx                  |   6 +-
 src/header.tsx                                |   2 +-
 src/pages/Delegate/index.tsx                  |   4 +-
 src/pages/Home/index.tsx                      |   2 +-
 7 files changed, 108 insertions(+), 110 deletions(-)

diff --git a/src/components/DelegationByAmountConviction.tsx b/src/components/DelegationByAmountConviction.tsx
index 6f06ba5..9cb46ae 100644
--- a/src/components/DelegationByAmountConviction.tsx
+++ b/src/components/DelegationByAmountConviction.tsx
@@ -31,7 +31,7 @@ export const DelegationByAmountConviction = ({
     return (
       <div
         key={`${conviction}-${balance.toString()}`}
-        className="mb-2 ml-12 border-l-2 pl-2"
+        className="mb-2 ml-12 overflow-auto border-l-2 pl-2"
       >
         {trackIds.length === 1 ? (
           trackIds.map((trackId) => (
diff --git a/src/components/LocksCard.tsx b/src/components/LocksCard.tsx
index beb9b38..61338af 100644
--- a/src/components/LocksCard.tsx
+++ b/src/components/LocksCard.tsx
@@ -29,9 +29,8 @@ import { TrackDisplay } from './TrackDisplay'
 export const LocksCard = () => {
   const [currentBlock, setCurrentBlock] = useState(0)
   const [expectedBlockTime, setExpectedBlockTime] = useState(0)
-  const { api } = useNetwork()
+  const { api, assetInfo } = useNetwork()
   const { voteLocks: locks, delegationLocks } = useLocks()
-  const { assetInfo } = useNetwork()
   const [ongoingVoteLocks, setOngoingVoteLocks] = useState<VoteLock[]>([])
   const [freeLocks, setFreeLocks] = useState<Array<VoteLock | DelegationLock>>(
     [],
@@ -129,88 +128,82 @@ export const LocksCard = () => {
   }, [api, freeLocks, getUnlockTx, selectedAccount])
 
   return (
-    <div className="grid grid-cols-1 gap-2 md:grid-cols-3">
-      {freeLocks.length > 0 && (
-        <Card className="relative h-full border-2 p-2 px-4">
-          <div className="relative z-10">
-            <div className="flex gap-x-2">
-              <Title variant="h4">Unlockable</Title>
-              <Popover>
-                <PopoverTrigger>
-                  <Info className="h-3 w-3 text-gray-500" />
-                </PopoverTrigger>
-                <PopoverContent>
-                  <p className="max-w-[15rem]">
-                    Elapsed locks for votes casted on referenda, or tracks
-                    delegation. Since locks can overlap, unlocking doesn't
-                    necessarily mean the transferable balance will change.
-                  </p>
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="font-unbounded text-5xl font-bold">
-              {freeLocks.length}
-              <LockKeyholeOpen className="ml-1 inline-block h-8 w-8 rotate-[10deg] text-gray-200" />
-            </div>
-            {freeLocks.length > 0 && (
-              <>
-                <Button
-                  className="mb-2 mt-4 w-full"
-                  onClick={onUnlockClick}
-                  disabled={isUnlockingLoading}
-                >
-                  Unlock
-                </Button>
-                <ContentReveal hidden={false}>
-                  {freeLocks.map((lock) => {
-                    if (lock.type === LockType.Delegating) {
-                      const { amount, trackId } = lock
-                      return (
-                        <div key={trackId}>
-                          <ul>
-                            <li className="mb-2">
-                              <div className="capitalize">
-                                <TrackDisplay trackId={trackId} />
-                                <div>
-                                  <BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
-                                  {planckToUnit(
-                                    amount,
-                                    assetInfo.precision,
-                                  ).toLocaleString('en')}{' '}
-                                  {assetInfo.symbol}
-                                </div>
-                              </div>
-                            </li>
-                          </ul>
+    <div className="flex flex-col gap-2 md:grid md:grid-cols-3 md:flex-row">
+      <Card className="h-max border-2 p-2 px-4">
+        <div className="relative z-10">
+          <div className="flex gap-x-2">
+            <Title variant="h4">Unlockable</Title>
+            <Popover>
+              <PopoverTrigger>
+                <Info className="h-3 w-3 text-gray-500" />
+              </PopoverTrigger>
+              <PopoverContent>
+                <p className="max-w-[15rem]">Funds that are unlockable.</p>
+              </PopoverContent>
+            </Popover>
+          </div>
+          <div className="font-unbounded text-5xl font-bold">
+            {freeLocks.length}
+            <LockKeyholeOpen className="ml-1 inline-block h-8 w-8 rotate-[10deg] text-gray-200" />
+          </div>
+          {freeLocks.length > 0 && (
+            <Button
+              className="mb-2 mt-4 w-full"
+              onClick={onUnlockClick}
+              disabled={isUnlockingLoading}
+            >
+              Unlock
+            </Button>
+          )}
+          <ContentReveal hidden={freeLocks.length == 0}>
+            {freeLocks.map((lock) => {
+              if (lock.type === LockType.Delegating) {
+                const { amount, trackId } = lock
+                return (
+                  <div key={trackId}>
+                    <ul>
+                      <li className="mb-2">
+                        <div className="capitalize">
+                          <span className="capitalize">
+                            <TrackDisplay trackId={trackId} />
+                          </span>
+                          <div>
+                            <BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
+                            {planckToUnit(
+                              amount,
+                              assetInfo.precision,
+                            ).toLocaleString('en')}{' '}
+                            {assetInfo.symbol}
+                          </div>
                         </div>
-                      )
-                    }
+                      </li>
+                    </ul>
+                  </div>
+                )
+              }
 
-                    const { amount, refId } = lock
-                    return (
-                      <div key={refId}>
-                        <ul>
-                          <li className="mb-2">
-                            <Badge>#{refId}</Badge>
-                            <div>
-                              <BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
-                              {planckToUnit(
-                                amount,
-                                assetInfo.precision,
-                              ).toLocaleString('en')}{' '}
-                              {assetInfo.symbol}
-                            </div>
-                          </li>
-                        </ul>
+              const { amount, refId } = lock
+              return (
+                <div key={refId}>
+                  <ul>
+                    <li className="mb-2">
+                      <Badge>#{refId}</Badge>
+                      <div>
+                        <BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
+                        {planckToUnit(
+                          amount,
+                          assetInfo.precision,
+                        ).toLocaleString('en')}{' '}
+                        {assetInfo.symbol}
                       </div>
-                    )
-                  })}
-                </ContentReveal>
-              </>
-            )}
-          </div>
-        </Card>
-      )}
+                    </li>
+                  </ul>
+                </div>
+              )
+            })}
+          </ContentReveal>
+        </div>
+      </Card>
       {!locksLoaded ? (
         <>
           <Skeleton className="h-[116px] rounded-xl" />
@@ -218,7 +211,7 @@ export const LocksCard = () => {
         </>
       ) : (
         <>
-          <Card className="h-full border-2 p-2 px-4">
+          <Card className="h-max border-2 p-2 px-4">
             <div className="flex gap-x-2">
               <Title variant="h4">Unlocking</Title>
               <Popover>
@@ -297,7 +290,7 @@ export const LocksCard = () => {
               </>
             </ContentReveal>
           </Card>
-          <Card className="h-full border-2 p-2 px-4">
+          <Card className="h-max border-2 p-2 px-4">
             <div className="flex gap-x-2">
               <Title variant="h4">Votes</Title>
               <Popover>
diff --git a/src/components/MyDelegations.tsx b/src/components/MyDelegations.tsx
index 121d1aa..2e83f99 100644
--- a/src/components/MyDelegations.tsx
+++ b/src/components/MyDelegations.tsx
@@ -81,8 +81,8 @@ export const MyDelegations = () => {
 
   return (
     <>
-      <Title className="mb-4">My Delegations</Title>
-      <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+      <Title className="mt-4">My Delegations</Title>
+      <div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
         {delegationsByDelegateConvictionAmount === undefined ? (
           <Skeleton className="h-[116px] rounded-xl" />
         ) : noDelegations ? (
@@ -103,28 +103,33 @@ export const MyDelegations = () => {
 
               return (
                 <Card
-                  className="flex h-full flex-col border bg-card p-2 px-4"
+                  className="flex h-max flex-col justify-between border bg-card p-2 px-4"
                   key={delegateAddress}
                 >
                   <>
-                    {knownDelegate?.name ? (
-                      <div className="flex items-center gap-2">
-                        <img
-                          src={knownDelegate.image}
-                          className="mr-2 w-12 rounded-full"
-                        />
-                        <div className="py-2 text-xl font-semibold">
-                          {knownDelegate.name}
+                    <div className="flex flex-col justify-between">
+                      {knownDelegate?.name ? (
+                        <div className="flex items-center gap-2">
+                          <img
+                            src={knownDelegate.image}
+                            className="mr-2 w-12 rounded-full"
+                          />
+                          <div className="py-2 text-xl font-semibold">
+                            {knownDelegate.name}
+                          </div>
                         </div>
-                      </div>
-                    ) : (
-                      <AddressDisplay address={delegateAddress} size={'3rem'} />
-                    )}
-                    <DelegationByAmountConviction
-                      amountConvictionMap={amountConvictionMap}
-                    />
+                      ) : (
+                        <AddressDisplay
+                          address={delegateAddress}
+                          size={'3rem'}
+                        />
+                      )}
+                      <DelegationByAmountConviction
+                        amountConvictionMap={amountConvictionMap}
+                      />
+                    </div>
                     <Button
-                      className="mb-2 mt-4 w-full"
+                      className="w-a bottom-0 mb-2 mt-4"
                       variant={'outline'}
                       onClick={() => onUndelegate(delegateAddress)}
                       disabled={delegateLoading.includes(delegateAddress)}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index facfb31..792f54c 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
@@ -9,8 +10,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground bg-primary/90 hover:bg-primary',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
@@ -53,5 +53,5 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   },
 )
 Button.displayName = 'Button'
-// eslint-disable-next-line
+
 export { Button, buttonVariants }
diff --git a/src/header.tsx b/src/header.tsx
index e3a99ba..9343b7a 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -86,7 +86,7 @@ export const Header = () => {
                 </Link>
               ))}
             </nav>
-            <nav className="fixed bottom-48 flex flex-col gap-4">
+            <nav className="fixed bottom-8 flex flex-col gap-4">
               {isLight && (
                 <a
                   href="#"
diff --git a/src/pages/Delegate/index.tsx b/src/pages/Delegate/index.tsx
index 0a73491..cc20c20 100644
--- a/src/pages/Delegate/index.tsx
+++ b/src/pages/Delegate/index.tsx
@@ -133,7 +133,7 @@ export const Delegate = () => {
   }
 
   return (
-    <main className="mx-0 grid flex-1 items-start gap-4 gap-8 p-4 sm:mx-[5%] sm:px-6 sm:py-0 xl:mx-[20%]">
+    <>
       {!api && (
         <AlertNote
           title={msgs.api.title}
@@ -198,6 +198,6 @@ export const Delegate = () => {
       >
         Delegate with {voteAmount} {assetInfo.symbol} votes
       </Button>
-    </main>
+    </>
   )
 }
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 5d4df8f..9688b78 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -8,7 +8,7 @@ export const Home = () => {
   const { delegates } = useDelegates()
 
   return (
-    <main className="mx-0 grid flex-1 items-start gap-4 p-4 sm:mx-[5%] sm:px-6 sm:py-0 md:gap-8 xl:mx-[20%]">
+    <main className="mx-0 flex-1 items-start gap-4 p-4 sm:mx-[5%] sm:px-6 sm:py-0 md:gap-8">
       <LocksCard />
       <MyDelegations />
       <Title className="mt-4">Delegates</Title>