fix: styling repo pages layout (#3398)

open-sauced · May 16, 2024 · 376de84 · 376de84
2 parents afae444 + a8854d5
commit 376de84
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 70 deletions.
diff --git a/components/Graphs/ContributorsChart.tsx b/components/Graphs/ContributorsChart.tsx
@@ -33,17 +33,17 @@ export default function ContributorsChart({
   const rangedAverage = useMemo(() => (rangedTotal / range).toPrecision(2), [rangedTotal, range]);
 
   return (
-    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center pt-8`}>
-      <section className="flex flex-col lg:flex-row w-full items-start lg:items-start gap-4 lg:justify-between px-4 lg:px-8">
+    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
+      <section className="flex flex-col lg:flex-row w-full items-start lg:items-start gap-4 lg:justify-between px-2">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
           <>
             <div className="flex gap-2 items-center w-fit">
               <FaUsers className="text-xl" />
-              <div className="flex gap-1">
+              <div className="flex gap-1 items-center">
                 <h3 className="text-sm font-semibold md:text-lg text-slate-800">Contributors</h3>
-                <p className="text-sm md:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
+                <p className="text-sm md:text-base w-fit pl-2 text-slate-500 font-medium">{range} days</p>
               </div>
             </div>
             <aside className="flex gap-8">
@@ -59,16 +59,22 @@ export default function ContributorsChart({
           </>
         )}
       </section>
-      <ResponsiveContainer width="100%" height="85%">
+      <ResponsiveContainer width="100%" height={370}>
         {isLoading ? (
           <SkeletonWrapper width={100} height={100} />
         ) : (
-          <BarChart data={dailyData} syncId={syncId}>
+          <BarChart data={dailyData} syncId={syncId} className="!-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
-            <YAxis interval={1} />
+            <YAxis
+              domain={["auto", "auto"]}
+              fontSize={14}
+              tick={{ fill: "#94a3b8" }}
+              axisLine={{ stroke: "#94a3b8" }}
+              tickLine={{ stroke: "#94a3b8" }}
+            />
             <Tooltip content={CustomTooltip} filterNull={false} />
             <CartesianGrid vertical={false} strokeDasharray="4" stroke="#E2E8F0" />
-            <Bar dataKey="contributor_count" fill="#1D48E6" />
+            <Bar dataKey="contributor_count" fill="#2563eb" />
           </BarChart>
         )}
       </ResponsiveContainer>
@@ -81,7 +87,7 @@ function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
     return (
       <figcaption className="flex flex-col gap-1 bg-white px-4 py-2 rounded-lg border">
         <section className="flex gap-2 items-center">
-          <FaUserAlt className="fill-[#1D48E6]" />
+          <FaUserAlt className="fill-[#2563eb]" />
           <p>Contributors: {payload[0]?.value}</p>
         </section>
 
@@ -94,7 +100,7 @@ function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
 function CustomTick({ x, y, payload }: { x: number; y: number; payload: { value: string } }) {
   return (
     <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8">
+      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8" fontSize={14}>
         {payload.value}
       </text>
     </g>

diff --git a/components/Graphs/ForksChart.tsx b/components/Graphs/ForksChart.tsx
@@ -43,19 +43,32 @@ export default function ForksChart({ stats, total, syncId, range = 30, isLoading
     switch (category) {
       case "daily":
         return (
-          <BarChart data={dailyData} syncId={syncId}>
+          <BarChart data={dailyData} syncId={syncId} className="!-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
-            <YAxis interval={1} />
+            <YAxis
+              interval={1}
+              domain={["auto", "auto"]}
+              fontSize={14}
+              tick={{ fill: "#94a3b8" }}
+              axisLine={{ stroke: "#94a3b8" }}
+              tickLine={{ stroke: "#94a3b8" }}
+            />
             <Tooltip content={CustomTooltip} filterNull={false} />
             <CartesianGrid vertical={false} strokeDasharray="4" stroke="#E2E8F0" />
             <Bar dataKey="forks_count" fill="#FF5100" />
           </BarChart>
         );
       case "history":
         return (
-          <LineChart data={historyData} syncId={syncId}>
+          <LineChart data={historyData} syncId={syncId} className="!-left-6">
             <XAxis dataKey="bucket" tick={false} />
-            <YAxis domain={["auto", "auto"]} />
+            <YAxis
+              domain={["auto", "auto"]}
+              fontSize={14}
+              tick={{ fill: "#94a3b8" }}
+              axisLine={{ stroke: "#94a3b8" }}
+              tickLine={{ stroke: "#94a3b8" }}
+            />
             <Tooltip content={CustomTooltip} filterNull={false} />
             <CartesianGrid vertical={false} strokeDasharray="4" stroke="#E2E8F0" />
             <Line dataKey="forks_count" stroke="#FF5100" />
@@ -65,8 +78,8 @@ export default function ForksChart({ stats, total, syncId, range = 30, isLoading
   };
 
   return (
-    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center pt-8`}>
-      <section className="flex flex-col lg:flex-row w-full items-start lg:items-center gap-4 lg:justify-between px-4">
+    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
+      <section className="flex flex-col lg:flex-row w-full items-start lg:items-center gap-4 lg:justify-between px-2">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
@@ -76,7 +89,7 @@ export default function ForksChart({ stats, total, syncId, range = 30, isLoading
                 <BiGitRepoForked className="text-xl" />
                 <div className="flex gap-1 items-center">
                   <h3 className="text-sm font-semibold md:text-lg text-slate-800">Forks</h3>
-                  <p className="text-sm md:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
+                  <p className="text-sm md:text-base w-fit pl-2 text-slate-500 font-medium">{range} days</p>
                 </div>
               </div>
               <aside className="flex gap-8">
@@ -130,7 +143,7 @@ function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
 function CustomTick({ x, y, payload }: { x: number; y: number; payload: { value: string } }) {
   return (
     <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8">
+      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8" fontSize={14}>
         {payload.value}
       </text>
     </g>

diff --git a/components/Graphs/IssuesChart.tsx b/components/Graphs/IssuesChart.tsx
@@ -46,29 +46,38 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
   );
 
   return (
-    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center pt-8`}>
-      <section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between px-4">
+    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
+      <section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between px-2">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
-          <div className="flex flex-col gap-4 lg:flex-row w-full justify-between">
+          <div className="flex flex-col gap-4 lg:flex-row w-full items-start justify-between">
             <div className="flex gap-1 items-center w-fit">
               <VscIssues className="text-xl" />
               <h3 className="text-sm font-semibold md:text-lg text-slate-800">Issues</h3>
-              <p className="text-sm md:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
+              <p className="text-sm md:text-base w-fit pl-2 text-slate-500 font-medium">{range} days</p>
             </div>
-            <aside className="flex gap-8">
+            <aside className="flex gap-6">
               <div>
-                <h3 className="text-xs lg:text-sm text-slate-500">Opened</h3>
+                <h3 className="text-xs lg:text-sm !font-medium text-slate-500">
+                  Opened
+                  <span className={`w-2 h-2 rounded-full bg-[#16a34a] mx-1 inline-block`}></span>
+                </h3>
                 <p className="font-semibold text-xl lg:text-3xl">{humanizeNumber(openedRangedTotal)}</p>
               </div>
               <div>
-                <h3 className="text-xs lg:text-sm text-slate-500">Closed</h3>
+                <h3 className="text-xs lg:text-sm !font-medium text-slate-500">
+                  Closed
+                  <span className={`w-2 h-2 rounded-full bg-[#9333ea] mx-1 inline-block`}></span>
+                </h3>
                 <p className="font-semibold text-xl lg:text-3xl">{humanizeNumber(closedRangedTotal)}</p>
               </div>
               <div>
-                <h3 className="text-xs lg:text-sm text-slate-500">Velocity</h3>
-                <p className="font-semibold text-xl lg:text-3xl">{humanizeNumber(velocity)}d</p>
+                <h3 className="text-xs lg:text-sm !font-medium text-slate-500">Velocity</h3>
+                <p className="font-semibold text-xl lg:text-3xl">
+                  {humanizeNumber(velocity)}
+                  <span className="text-xl text-slate-500 pl-0.5">d</span>
+                </p>
               </div>
             </aside>
           </div>
@@ -78,9 +87,15 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
         {isLoading ? (
           <SkeletonWrapper width={100} height={100} />
         ) : (
-          <LineChart data={dailyData} syncId={syncId}>
+          <LineChart data={dailyData} syncId={syncId} className="-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
-            <YAxis domain={["auto", "auto"]} />
+            <YAxis
+              domain={["auto", "auto"]}
+              fontSize={14}
+              tick={{ fill: "#94a3b8" }}
+              axisLine={{ stroke: "#94a3b8" }}
+              tickLine={{ stroke: "#94a3b8" }}
+            />
             <Tooltip content={CustomTooltip} filterNull={false} />
             <CartesianGrid vertical={false} strokeDasharray="4" stroke="#E2E8F0" />
             <Line dataKey="opened_issues" stroke="#16a34a" strokeWidth={2} />
@@ -95,15 +110,26 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
 function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
   if (active && payload) {
     return (
-      <figcaption className="flex flex-col gap-1 bg-white px-4 py-2 rounded-lg border">
-        <section className="flex gap-2 items-center">
-          <VscIssues className="fill-sauced-orange" />
+      <figcaption className="flex flex-col gap-1 text-sm bg-white px-4 py-3 rounded-lg border w-fit">
+        <section className="flex gap-2 font-medium text-slate-500 items-center text-xs w-fit">
+          <VscIssues className="fill-slate-500" />
           <p>Issues</p>
+          <p>{payload[0]?.payload.bucket}</p>
+        </section>
+        <section className="flex justify-between">
+          <p className="flex gap-2 items-center text-slate-500">
+            <span className={`w-2 h-2 rounded-full bg-[#16a34a] inline-block`}></span>
+            Opened:
+          </p>
+          <p className="font-medium">{payload[0]?.value}</p>
+        </section>
+        <section className="flex justify-between">
+          <p className="flex gap-2 items-center text-slate-500">
+            <span className={`w-2 h-2 rounded-full bg-[#9333ea] inline-block`}></span>
+            Closed:
+          </p>
+          <p className="font-medium">{payload[1]?.value}</p>
         </section>
-        <p>Opened: {payload[0]?.value}</p>
-        <p>Closed: {payload[1]?.value}</p>
-
-        <p className="text-light-slate-9 text-sm">{payload[0]?.payload.bucket}</p>
       </figcaption>
     );
   }
@@ -112,7 +138,7 @@ function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
 function CustomTick({ x, y, payload }: { x: number; y: number; payload: { value: string } }) {
   return (
     <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8">
+      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8" fontSize={14}>
         {payload.value}
       </text>
     </g>

diff --git a/components/Graphs/PRChart.tsx b/components/Graphs/PRChart.tsx
@@ -46,29 +46,38 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
   );
 
   return (
-    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center pt-8`}>
-      <section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between px-4">
+    <Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
+      <section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between">
         {isLoading ? (
           <SkeletonWrapper width={100} height={24} />
         ) : (
-          <div className="flex flex-col gap-4 lg:flex-row w-full justify-between">
+          <div className="flex flex-col gap-4 lg:flex-row w-full items-start justify-between px-2">
             <div className="flex gap-1 items-center w-fit">
               <BiGitPullRequest className="text-xl" />
               <h3 className="text-sm font-semibold md:text-lg text-slate-800">Pull Requests</h3>
               <p className="text-sm md:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
             </div>
             <aside className="flex gap-8">
               <div>
-                <h3 className="text-xs lg:text-sm text-slate-500">Opened</h3>
+                <h3 className="text-xs lg:text-sm !font-medium text-slate-500">
+                  Opened
+                  <span className={`w-2 h-2 rounded-full bg-[#16a34a] mx-1 inline-block`}></span>
+                </h3>
                 <p className="font-semibold text-xl lg:text-3xl">{humanizeNumber(openedRangedTotal)}</p>
               </div>
               <div>
-                <h3 className="text-xs lg:text-sm text-slate-500">Closed</h3>
+                <h3 className="text-xs lg:text-sm !font-medium text-slate-500">
+                  Merged
+                  <span className={`w-2 h-2 rounded-full bg-[#9333ea] mx-1 inline-block`}></span>
+                </h3>
                 <p className="font-semibold text-xl lg:text-3xl">{humanizeNumber(closedRangedTotal)}</p>
               </div>
               <div>
-                <h3 className="text-xs lg:text-sm text-slate-500">Velocity</h3>
-                <p className="font-semibold text-xl lg:text-3xl">{humanizeNumber(velocity)}d</p>
+                <h3 className="text-xs lg:text-sm !font-medium text-slate-500">Velocity</h3>
+                <p className="font-semibold text-xl lg:text-3xl">
+                  {humanizeNumber(velocity)}
+                  <span className="text-lg text-slate-600">d</span>
+                </p>
               </div>
             </aside>
           </div>
@@ -78,9 +87,15 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
         {isLoading ? (
           <SkeletonWrapper width={100} height={100} />
         ) : (
-          <LineChart data={dailyData} syncId={syncId}>
+          <LineChart data={dailyData} syncId={syncId} className="-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
-            <YAxis domain={["auto", "auto"]} />
+            <YAxis
+              domain={["auto", "auto"]}
+              fontSize={14}
+              tick={{ fill: "#94a3b8" }}
+              axisLine={{ stroke: "#94a3b8" }}
+              tickLine={{ stroke: "#94a3b8" }}
+            />
             <Tooltip content={CustomTooltip} filterNull={false} />
             <CartesianGrid vertical={false} strokeDasharray="4" stroke="#E2E8F0" />
             <Line dataKey="active_prs" stroke="#16a34a" strokeWidth={2} />
@@ -95,15 +110,26 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
 function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
   if (active && payload) {
     return (
-      <figcaption className="flex flex-col gap-1 bg-white px-4 py-2 rounded-lg border">
-        <section className="flex gap-2 items-center">
-          <BiGitPullRequest className="fill-sauced-orange" />
+      <figcaption className="flex flex-col gap-1 text-sm bg-white px-4 py-3 rounded-lg border w-fit">
+        <section className="flex gap-2 font-medium text-slate-500 items-center text-xs w-fit">
+          <BiGitPullRequest className="fill-slate-500" />
           <p>Pull Requests</p>
+          <p>{payload[0]?.payload.bucket}</p>
+        </section>
+        <section className="flex justify-between">
+          <p className="flex gap-2 items-center px-1 text-slate-500">
+            <span className={`w-2 h-2 rounded-full bg-[#16a34a] inline-block`}></span>
+            Opened:
+          </p>
+          <p className="font-medium pl-2">{payload[0]?.value}</p>
+        </section>
+        <section className="flex justify-between">
+          <p className="flex gap-2 items-center px-1 text-slate-500">
+            <span className={`w-2 h-2 rounded-full bg-[#9333ea] inline-block`}></span>
+            Merged:
+          </p>
+          <p className="font-medium pl-2">{payload[1]?.value}</p>
         </section>
-        <p>Opened: {payload[0]?.value}</p>
-        <p>Closed: {payload[1]?.value}</p>
-
-        <p className="text-light-slate-9 text-sm">{payload[0]?.payload.bucket}</p>
       </figcaption>
     );
   }
@@ -112,7 +138,7 @@ function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
 function CustomTick({ x, y, payload }: { x: number; y: number; payload: { value: string } }) {
   return (
     <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8">
+      <text x={0} y={0} dy={20} textAnchor="middle" fill="#94a3b8" fontSize={14}>
         {payload.value}
       </text>
     </g>