Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Improve the <ComponentCard> CSS #266

Merged
merged 14 commits into from
Aug 25, 2022
Merged

refactor: Improve the <ComponentCard> CSS #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1532e60
style: Reduce internal padding from `<Card>` component
eryc-cc Aug 25, 2022
a264c09
style: Set `<CardNHorizontalBarChart>` width in the component and upd…
eryc-cc Aug 25, 2022
1c2922a
style: Update `<ContributorCard>` gap and alignment
eryc-cc Aug 25, 2022
053d7fe
style: Remove margin-top and update gap on `<CardHorizontalBarChart>`
eryc-cc Aug 25, 2022
a9f747c
style: Set a custom width for the `<ContributorProfile>` Avatar
eryc-cc Aug 25, 2022
a56124c
style: Fix alignment, spacing, and font sizes in `<ContributorCardPro…
eryc-cc Aug 25, 2022
13b0861
refactor: Remove axisLabel from Contributor Card
eryc-cc Aug 25, 2022
6933cd5
refactor: Remove internal padding, and set fixed height in Contributo…
eryc-cc Aug 25, 2022
85310d2
style: Add fixed height to `<CardLineChart>` and remove padding from …
eryc-cc Aug 25, 2022
4d379ac
style: Remove padding from `<ContributorCard>` button
eryc-cc Aug 25, 2022
552ca8b
refactor: Re-structure `<ContributorTable>` within sectioned divs.
eryc-cc Aug 25, 2022
3b98e24
style: Round the repository image
eryc-cc Aug 25, 2022
ccef7b5
refactor: Fix issue where the lineChart was above the CardTable
eryc-cc Aug 25, 2022
1773f52
style: Add space
eryc-cc Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/atoms/Card/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?
<>
Expand Down
4 changes: 2 additions & 2 deletions components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
10 changes: 5 additions & 5 deletions components/molecules/CardProfile/card-profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/molecules/CardRepoList/card-repo-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
140 changes: 72 additions & 68 deletions components/molecules/ContributorTable/contributor-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>

:
Expand Down
24 changes: 14 additions & 10 deletions components/organisms/ContributorCard/contributor-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 9 additions & 8 deletions lib/hooks/useContributorData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
17 changes: 9 additions & 8 deletions stories/organisms/contributor-card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down