refactor: Improve the <ComponentCard> CSS (#266)

open-sauced · Aug 25, 2022 · 9da4d62 · 9da4d62
1 parent 8f3c6a0
commit 9da4d62
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 103 deletions.
diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx
@@ -8,7 +8,7 @@ interface CardProps {
 
 const Card: React.FC<CardProps> = ({ className, children, heading }) => {
   return (
-    <article className={`${className ? className : ""} block ${heading ? "" : "p-6"} bg-white rounded-lg drop-shadow-md`}>
+    <article className={`${className ? className : ""} block ${heading ? "" : "p-3"} bg-white rounded-lg drop-shadow-md`}>
       {
         heading ?
           <>

diff --git a/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx b/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
@@ -32,9 +32,9 @@ const CardHorizontalBarChart = ({ languageList }: CardHorizontalBarChartProps):
   };
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-1 min-w-[120px]">
       {/* Progress Bar */}
-      <div className="flex items-center w-full rounded-full gap-1 overflow-hidden mt-7">
+      <div className="flex items-center w-full rounded-full gap-0.5 overflow-hidden">
         {sortedLangArray.map(({ languageName, percentageUsed }, index) =>
           <div
             key={index}

diff --git a/components/molecules/CardProfile/card-profile.tsx b/components/molecules/CardProfile/card-profile.tsx
@@ -14,20 +14,20 @@ interface CardProfileProps {
 
 const CardProfile = ({ githubAvatar, githubName, totalPRs, dateOfFirstPR }: CardProfileProps): JSX.Element => {
   return (
-    <div className="flex gap-2">
+    <div className="flex items-center gap-2">
       <Avatar
-        size="lg"
+        size={40}
         avatarURL={githubAvatar ? githubAvatar : undefined}
       />
       <div>
         <div>
           <Text className="!text-base !text-black font-medium">{githubName}</Text>
         </div>
-        <div className="flex justify-between gap-2">
-          <div className="gap-2 text-light-slate-11">
+        <div className="flex gap-2 font-medium text-sm">
+          <div className="flex items-center gap-1 text-light-slate-11">
             <Icon alt="Total Pull-Requests" IconImage={ForkIcon} /> {totalPRs}
           </div>
-          <div className="gap-2 text-light-slate-11">
+          <div className="flex items-center gap-1 text-light-slate-11">
             <Icon alt="Time from First Pull Request" IconImage={FirstPRIcon} /> {dateOfFirstPR}
           </div>
         </div>

diff --git a/components/molecules/CardRepoList/card-repo-list.tsx b/components/molecules/CardRepoList/card-repo-list.tsx
@@ -23,7 +23,7 @@ const CardRepoList = ({ repoList }: CardRepoListProps): JSX.Element => {
                 .filter((repo, arrCount) => arrCount < REPOLISTLIMIT)
                 .map(({repoName, repoIcon}, index) => 
                   <div key={index} className="flex gap-1 p-1 pr-2 border-[1px] border-light-slate-6 rounded-lg text-light-slate-12">
-                    <Icon IconImage={repoIcon} />
+                    <Icon IconImage={repoIcon} className="rounded-[4px] overflow-hidden" />
                     {repoName}
                   </div>
                 )

diff --git a/components/molecules/ContributorTable/contributor-table.tsx b/components/molecules/ContributorTable/contributor-table.tsx
@@ -22,82 +22,86 @@ const ContributorTable = ({ listOfPRs }: CardTableProps) => {
   return (
     listOfPRs.length > 0 ?
       <>
-        <div className="flex gap-2 items-center bg-light-slate-3 rounded-md px-2 py-1">
-          <div className="w-3/5">
-            <Text className="font-medium">
-              Latest PRs
-            </Text>
-          </div>
-          <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
-            <div className="flex justify-end w-[calc(10%-4px)]">
-              <FaRegDotCircle title="When Pull Request was issued" />
-            </div>
-          </IconContext.Provider>
-          <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
-            <div className="flex justify-end w-[calc(10%-4px)]">
-              <FaRegCheckCircle title="When Pull Request was merged" />
-            </div>
-          </IconContext.Provider>
-          <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14, strokeWidth: 0.3 } }}>
-            <div className="flex justify-end w-[calc(10%-4px)]">
-              <GoDiff title="Files changed in Pull Request" />
-            </div>
-          </IconContext.Provider>
-          <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14, strokeWidth: 0.5 } }}>
-            <div className="flex justify-end w-[calc(10%-4px)]">
-              <BsFileDiff title="Lines changed in Pull Request" />
+        <div className="flex flex-col">
+          <div className="flex gap-2 items-center bg-light-slate-3 rounded-md px-2 py-1">
+            <div className="w-3/5">
+              <Text className="font-medium">
+                Latest PRs
+              </Text>
             </div>
-          </IconContext.Provider>
-        </div>
-        {listOfPRs.map(({prName, prStatus, prIssuedTime, prClosedTime, noOfFilesChanged, noOfLinesChanged}, index) => 
-          <div key={index} className="flex gap-2 items-center px-2 py-1">
-            <div className="flex item-center gap-2 w-3/5">
-              {prStatus === "open" ? 
-                <IconContext.Provider value={{ color: "green", style: { width: 14, height: 14, marginTop: 2 } }}>
-                  <VscGitPullRequest title="Open Pull Request"/>
-                </IconContext.Provider>
+            <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
+              <div className="flex justify-end w-[calc(10%-4px)]">
+                <FaRegDotCircle title="When Pull Request was issued" />
+              </div>
+            </IconContext.Provider>
+            <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14 } }}>
+              <div className="flex justify-end w-[calc(10%-4px)]">
+                <FaRegCheckCircle title="When Pull Request was merged" />
+              </div>
+            </IconContext.Provider>
+            <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14, strokeWidth: 0.3 } }}>
+              <div className="flex justify-end w-[calc(10%-4px)]">
+                <GoDiff title="Files changed in Pull Request" />
+              </div>
+            </IconContext.Provider>
+            <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14, strokeWidth: 0.5 } }}>
+              <div className="flex justify-end w-[calc(10%-4px)]">
+                <BsFileDiff title="Lines changed in Pull Request" />
+              </div>
+            </IconContext.Provider>
+          </div>
+          <div className="flex flex-col gap-0.5">
+            {listOfPRs.map(({prName, prStatus, prIssuedTime, prClosedTime, noOfFilesChanged, noOfLinesChanged}, index) => 
+              <div key={index} className="flex gap-2 items-center px-2 py-1">
+                <div className="flex item-center gap-2 w-3/5">
+                  {prStatus === "open" ? 
+                    <IconContext.Provider value={{ color: "green", style: { width: 14, height: 14, marginTop: 2 } }}>
+                      <VscGitPullRequest title="Open Pull Request"/>
+                    </IconContext.Provider>
 
-                :
+                    :
 
-                prStatus === "closed" ? 
-                  <IconContext.Provider value={{ color: "red", style: { width: 14, height: 14, marginTop: 2 } }}>
-                    <VscGitPullRequestClosed title="Closed Pull Request" />
-                  </IconContext.Provider>
+                    prStatus === "closed" ? 
+                      <IconContext.Provider value={{ color: "red", style: { width: 14, height: 14, marginTop: 2 } }}>
+                        <VscGitPullRequestClosed title="Closed Pull Request" />
+                      </IconContext.Provider>
 
-                  :
+                      :
 
-                  prStatus === "merged" ? 
-                    <IconContext.Provider value={{ color: "purple", style: { width: 14, height: 14, marginTop: 2 } }}>
-                      <VscGitMerge title="Merged Pull Request" />
-                    </IconContext.Provider>
+                      prStatus === "merged" ? 
+                        <IconContext.Provider value={{ color: "purple", style: { width: 14, height: 14, marginTop: 2 } }}>
+                          <VscGitMerge title="Merged Pull Request" />
+                        </IconContext.Provider>
 
-                    :
+                        :
 
-                    <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14, marginTop: 2 } }}>
-                      <VscGitPullRequestDraft title="Draft Pull Request" />
-                    </IconContext.Provider>
-              }
-              <Text>
-                {prIssuedTime}
-              </Text>
-              <Text className="!text-light-slate-12 !font-medium">
-                {prName}
-              </Text>
-            </div>
-            <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
-              {prIssuedTime}
-            </div>
-            <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
-              {prClosedTime}
-            </div>
-            <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
-              {noOfFilesChanged}
-            </div>
-            <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
-              {noOfLinesChanged}
-            </div>
+                        <IconContext.Provider value={{ color: "gray", style: { width: 14, height: 14, marginTop: 2 } }}>
+                          <VscGitPullRequestDraft title="Draft Pull Request" />
+                        </IconContext.Provider>
+                  }
+                  <Text>
+                    {prIssuedTime}
+                  </Text>
+                  <Text className="!text-light-slate-12 !font-medium">
+                    {prName}
+                  </Text>
+                </div>
+                <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
+                  {prIssuedTime}
+                </div>
+                <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
+                  {prClosedTime}
+                </div>
+                <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
+                  {noOfFilesChanged}
+                </div>
+                <div className="flex justify-end w-[calc(10%-4px)] text-sm text-light-slate-11">
+                  {noOfLinesChanged}
+                </div>
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </>
 
       :

diff --git a/components/organisms/ContributorCard/contributor-card.tsx b/components/organisms/ContributorCard/contributor-card.tsx
@@ -36,23 +36,27 @@ const ContributorCard = ({ className, contributor }: ContributorCardProps) => {
 
   return (
     <Card className={className}>
-      <div className="flex flex-col gap-2">
-        <div className="flex w-full justify-between gap-2">
+      <div className="flex flex-col gap-3">
+        <div className="flex w-full justify-between items-center gap-2">
           <CardProfile {...profile} />
-          <div className="w-32">
+          <div>
             <CardHorizontalBarChart languageList={languageList} />
           </div>
         </div>
-        <CardLineChart lineChartOption={lineChart} />
+        <div className="h-[110px] overflow-hidden">
+          <CardLineChart lineChartOption={lineChart} />
+        </div>
         <CardRepoList repoList={repoList} />
         {showPRs ? (
-          <div className="p-4">
-            <ContributorTable listOfPRs={listOfPRs} />
-          </div>
+          <ContributorTable listOfPRs={listOfPRs} />
         ) : null}
-        <div className="flex w-full py-3 justify-center">
-          <Button onClick={() => setShowPRs((prevState) => !prevState)} type="link">
-            <Text className="!text-xs !text-light-slate-11 font-medium">
+        <div className="flex w-full justify-center">
+          <Button 
+            onClick={() => setShowPRs((prevState) => !prevState)} 
+            type="link"
+            className="!w-full"
+          >
+            <Text className="!text-sm !text-light-slate-11 font-medium">
               {showPRs ? "Hide" : "Show"} latest pull requests
             </Text>
           </Button>

diff --git a/lib/hooks/useContributorData.ts b/lib/hooks/useContributorData.ts
@@ -5,25 +5,26 @@ const useContributorData = () => {
     xAxis: {
       type: "category",
       boundaryGap: false,
-      axisLabel: {
-        fontSize: 14,
-        fontWeight: "bold",
-        color: "darkgray"
-      },
+      axisLabel: false,
       data: ["Jan 2022", "Mar 2022", "Jun 2022"]
     },
     yAxis: {
       type: "value",
       splitNumber: 1,
-      axisLabel: {
-        show: false
-      },
+      axisLabel: false,
       splitLine: {
         lineStyle: {
           type: "dashed"
         }
       }
     },
+    grid: {
+      height: 100,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0
+    },
     series: [
       {
         data: [820, 932, 901, 934, 1290, 1330, 1320],

diff --git a/stories/organisms/contributor-card.stories.tsx b/stories/organisms/contributor-card.stories.tsx
@@ -14,25 +14,26 @@ const lineChart  = {
   xAxis: {
     type: "category",
     boundaryGap: false,
-    axisLabel: {
-      fontSize: 14,
-      fontWeight: "bold",
-      color: "darkgray"
-    },
+    axisLabel: false,
     data: ["Jan 1, 2022", "Jan 15, 2022", "Feb 1, 2022"]
   },
   yAxis: {
     type: "value",
     splitNumber: 1,
-    axisLabel: {
-      show: false
-    },
+    axisLabel: false,
     splitLine: {
       lineStyle: {
         type: "dashed"
       }
     }
   },
+  grid: {
+    height: 100,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  },
   series: [
     {
       data: [820, 932, 901, 934, 1290, 1330, 1320],