feat: refactor historic styles

gnosisguild · May 7, 2024 · 62fa045 · 62fa045
1 parent fdd3e68
commit 62fa045
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/packages/client/src/pages/HistoricPoll/HistoricPoll.tsx b/packages/client/src/pages/HistoricPoll/HistoricPoll.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react'
 import PollCard from '@/components/Cards/PollCard'
-// import { PAST_POLLS } from '@/mocks/polls'
 import { PollResult } from '@/model/poll.model'
 import LoadingAnimation from '@/components/LoadingAnimation'
 import { useVoteManagementContext } from '@/context/voteManagement'
+import CircularTiles from '@/components/CircularTiles'
 
 const HistoricPoll: React.FC = () => {
   const { votingRound, pastPolls, getPastPolls } = useVoteManagementContext()
@@ -18,21 +18,25 @@ const HistoricPoll: React.FC = () => {
   }, [pastPolls, votingRound])
 
   return (
-    <div className='my-28 flex min-h-[630px] w-screen flex-col items-center justify-center space-y-12'>
-      <h1 className='text-h1 font-bold text-slate-600'>Historic polls</h1>
-      {!pastPolls.length && (
-        <div className='flex justify-center'>
-          <LoadingAnimation isLoading={true} />
-        </div>
-      )}
-      <div className='mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-8 overflow-y-auto p-4 md:grid-cols-3'>
-        {pastPolls.map(({ totalVotes, options, roundId, date }: PollResult) => (
-          <div className='flex items-center justify-center' key={roundId}>
-            <PollCard roundId={roundId} pollOptions={options} totalVotes={totalVotes} date={date} />
+    <div className='relative flex w-full flex-1 items-center justify-center px-6 py-12'>
+      <div className='absolute bottom-0 right-0 grid w-full grid-cols-2 gap-2 max-md:opacity-50 md:w-[70vh]'>
+        <CircularTiles count={4} />
+      </div>
+      <div className='relative mx-auto flex w-full flex-col items-center justify-center space-y-8'>
+        <h1 className='text-h1 font-bold text-slate-600'>Historic polls</h1>
+        {!pastPolls.length && (
+          <div className='flex justify-center'>
+            <LoadingAnimation isLoading={true} />
           </div>
-        ))}
+        )}
+        <div className='mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-8 overflow-y-auto p-4 md:grid-cols-3'>
+          {pastPolls.map(({ totalVotes, options, roundId, date }: PollResult) => (
+            <div className='flex items-center justify-center' key={roundId}>
+              <PollCard roundId={roundId} pollOptions={options} totalVotes={totalVotes} date={date} />
+            </div>
+          ))}
+        </div>
       </div>
-      {/* <button className='button-outlined button-max'>view all polls</button> */}
     </div>
   )
 }