Merge pull request #1 from roi1410/MaakafLeaderBoardUI

make ajustmets to lederboardAllTimes and change fonts
Maakaf · May 18, 2024 · c359196 · c359196
2 parents 5c31370 + 59060c4
commit c359196
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 27 deletions.
diff --git a/app/[locale]/leaderboard/page.tsx b/app/[locale]/leaderboard/page.tsx
@@ -1,3 +1,5 @@
+
+
 import { Metadata } from 'next';
 import { use } from 'react';
 import { getData } from './getData';
@@ -6,7 +8,6 @@ import useTextDirection from '@/hooks/useTextDirection';
 import Monthly from '@/components/Leaderboard/Monthly';
 import Weekly from '@/components/Leaderboard/Weekly';
 import LeaderBoardChart from '@/components/Leaderboard/LeaderBoardChart';
-
 export const metadata: Metadata = {
   title: 'לוח מובילים - Leaderboard',
   description:
@@ -29,13 +30,14 @@ export const metadata: Metadata = {
 };
 
 const LeaderboardPage: React.FC = () => {
-  const leaderboard = use(getData());
+
   const t = useTranslations('LeaderBoard');
   const direction = useTextDirection();
 
   return (
-    <section className="grid grid-row-2 grid-cols-1 gap-10   content-center h-full p-10  md:grid-cols-6 md:grid-row-2  ">
-      <div className=" row-start-1 col-start-1    flex flex-col   md:col-start-1 col-end-3">
+    <section className="grid grid-row-2 grid-cols-1 gap-10   content-center h-full p-10  md:grid-cols-6 md:grid-row-2   ">
+      <div className=" row-start-1 col-start-1    flex flex-col gap-10   md:col-start-1 col-end-3 ">
+        <div>
         <h3
           className={`p-5  w-full ${
             direction === 'rtl' ? 'text-right' : 'text-left'
@@ -44,6 +46,9 @@ const LeaderboardPage: React.FC = () => {
           {t('MonthlyTitle')}{' '}
         </h3>
         <Monthly />
+
+        </div>
+        <div>
         <h3
           className={`p-5  w-full ${
             direction === 'rtl' ? 'text-right' : 'text-left'
@@ -52,6 +57,9 @@ const LeaderboardPage: React.FC = () => {
           {t('WeeklyTitle')}{' '}
         </h3>
         <Weekly />
+
+        </div>
+
       </div>
       <div className="max-h-[90vh] bg-lightAccBg dark:bg-darkBg min-w-[80vw] md:min-w-[50vw] flex flex-col shadow-2xl shadow-discordLight rounded-sm  row-start-2 col-start-1 md:col-start-4 md:col-end-7 md:row-start-1 md:min-h-[100vh] md:p-4 md:relative left-10    ">
         <h3
@@ -79,4 +87,4 @@ TODO:
 TODO:
 TODO:
 */
-//add UI translate
+
diff --git a/components/Leaderboard/LeaderBoardChart.tsx b/components/Leaderboard/LeaderBoardChart.tsx
@@ -10,15 +10,13 @@ export default function LeaderBoardChart() {
   return (
     <div
       dir={direction}
-      className="   bg-lightAccBg overflow-y-auto  h-2/3 w-2/3 flex flex-col  gap-6  self-center ring-8 rounded-sm  dark:bg-darkAccBg dark:ring-offset-darkAccBg p-2  "
-    >
+      className="overflow-y-scroll h-2/3 w-5/6 flex flex-col  gap-6  self-center p-2 font-inter text-base  text-darkText dark:text-lightText ">
       {leaderBoardData.props.leaderboard.members.reverse().map((contributor, place) => {
         const pathDevelp = contributor;
-
         return (
           <div
             key={pathDevelp.node_id}
-            className="w-full flex flex-col md:flex-row ring-4 h-fit p-2 rounded-md md:gap-6  "
+            className="w-full flex flex-col md:flex-row ring-4 h-fit p-2 rounded-md md:gap-6 dark:bg-darkAccBg "
           >
             <div className="flex gap-3 ">
               <span>#{place + 1}</span>
@@ -29,29 +27,30 @@ export default function LeaderBoardChart() {
               />
               <div className="flex flex-col">
                 <a
-                  className="truncate text-xs self-center font-bold underline decoration-blue-400  cursor-pointer w-20"
+                  className="truncate text-xs self-start font-bold underline decoration-blue-400  cursor-pointer w-20"
                   target="_blank"
                   href={`https://github.com/${pathDevelp.name}`}
                 >
                   {pathDevelp.name}
                 </a>
-                <span className="text-gray-500 text-xs self-end justify-start max-md:hidden">
-                  commits: {pathDevelp.stats.commits}
-                </span>
-                <span className="text-gray-500 text-xs self-end justify-start max-md:hidden">
+
+                <span className="text-gray-500 text-xs  justify-start ">
                   score: {pathDevelp.score}
                 </span>
+
+                <div className='flex flex-col md:flex-row md:gap-4 '>
+                  <span className="text-gray-500 text-xs  justify-start min-md:hidden ">
+                    commits: {pathDevelp.stats.commits}
+                  </span>
+                  <span className="text-green-500 text-xs">
+                    {pathDevelp.stats.additions}++
+                  </span>
+                  <span className="text-red-500 text-xs">
+                    {pathDevelp.stats.deletions}--
+                  </span>
+                </div>
               </div>
             </div>
-            <span className="text-gray-500 text-xs md:hidden">
-               commits: {pathDevelp.stats.commits}
-            </span>
-            <span className="text-green-500 text-xs">
-              {pathDevelp.stats.additions}++
-            </span>
-            <span className="text-red-500 text-xs">
-              {pathDevelp.stats.deletions}--
-            </span>
           </div>
         );
       })}

diff --git a/components/Leaderboard/Monthly.tsx b/components/Leaderboard/Monthly.tsx
@@ -1,8 +1,10 @@
+
 import { getData } from '@/app/[locale]/leaderboard/getData';
 import useTextDirection from '@/hooks/useTextDirection';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 import { use } from 'react';
+
 export default function Monthly() {
   const leaderBoardData = use(getData());
 
@@ -17,9 +19,9 @@ export default function Monthly() {
   return (
     <div
       dir={direction}
-      className="bg-lightAccBg min-h-[50dvh] ring-8 rounded-sm shadow-2xl dark:bg-darkAccBg dark:ring-offset-darkAccBg p-5 hover:shadow-discordLight "
+      className="bg-lightAccBg min-h-[50dvh] ring-8 rounded-sm shadow-2xl dark:bg-darkAccBg dark:ring-offset-darkAccBg p-5 hover:shadow-discordLight   "
     >
-      <div className="flex justify-between">
+      <div className="flex justify-between font-inter text-base  text-darkText dark:text-lightText">
         <div className="flex flex-col gap-3 md:gap-6 ">
           <span>{t("name")}:
             <a

diff --git a/components/Leaderboard/Weekly.tsx b/components/Leaderboard/Weekly.tsx
@@ -12,7 +12,7 @@ export default function Weekly() {
 
   return (
     <div
-      className="bg-lightAccBg max-h-[40dvh] ring-8 rounded-sm  dark:bg-darkAccBg dark:ring-offset-darkAccBg p-5 shadow-2xl hover:shadow-discordLight "
+      className="bg-lightAccBg max-h-[40dvh] ring-8 rounded-sm  dark:bg-darkAccBg dark:ring-offset-darkAccBg p-5 shadow-2xl hover:shadow-discordLight font-inter text-base  text-darkText dark:text-lightText "
       dir={direction}
     >
       <div className="flex justify-between">

diff --git a/public/locales/en.json b/public/locales/en.json
@@ -136,7 +136,7 @@
     "MonthlyTitle": "Monthly Score",
     "WeeklyTitle": "Weekly Score",
     "AllTimesTitle": "All Times Score",
-    "card":{"name":"Name","Addition":"Addition","deletions":"Deletions","score":"score","Projects":"Projects","commits":"commits"}
+    "card":{"name":"Name","Addition":"Addition","deletions":"Deletions","score":"Score","Projects":"Projects","commits":"Commits"}
   },
   "Components": {
     "home": {