Refactor TopVoters component styling

discordplace · Mar 23, 2024 · 7e4c01f · 7e4c01f
1 parent dd6c247
commit 7e4c01f
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx b/client/app/(servers)/servers/[id]/components/Tabs/TopVoters.jsx
@@ -39,9 +39,9 @@ export default function TopVoters({ server }) {
               'flex items-center w-full gap-4 p-4 odd:bg-secondary even:bg-tertiary',
               index === 0 && 'rounded-t-xl',
               index === voters.length - 1 && 'rounded-b-xl',
-              voters.length > 3 && index === 0 && 'border-x-2 border-t-2 border-yellow-500 odd:bg-yellow-500/10',
-              voters.length > 3 && index === 1 && 'border-x-2 border-gray-500 odd:bg-gray-500/10',
-              voters.length > 3 && index === 2 && 'border-x-2 border-b-2 border-yellow-900 odd:bg-yellow-900/10'
+              voters.length > 3 && server.voters.indexOf(voter) === 0 && 'border-x-2 border-t-2 border-yellow-500 odd:bg-yellow-500/10',
+              voters.length > 3 && server.voters.indexOf(voter) === 1 && 'border-x-2 border-gray-500 odd:bg-gray-500/10',
+              voters.length > 3 && server.voters.indexOf(voter) === 2 && 'border-x-2 border-b-2 border-yellow-900 odd:bg-yellow-900/10'
             )}
           >
             <div className='relative'>
@@ -56,9 +56,9 @@ export default function TopVoters({ server }) {
               {[0, 1, 2].includes(server.voters.indexOf(voter)) && (
                 <div className={cn(
                   'absolute top-0 left-0 w-full h-full rounded-full border-2',
-                  index === 0 && 'border-yellow-500',
-                  index === 1 && 'border-gray-500',
-                  index === 2 && 'border-yellow-900'
+                  server.voters.indexOf(voter) === 0 && 'border-yellow-500',
+                  server.voters.indexOf(voter) === 1 && 'border-gray-500',
+                  server.voters.indexOf(voter) === 2 && 'border-yellow-900'
                 )} />
               )}
             </div>