Skip to content

Commit

Permalink
fix: Fixing issues with TopNav and Highlight Card (#294)
Browse files Browse the repository at this point in the history 
Fixes #287
Fixes #291
  • Loading branch information
@chadstewart
chadstewart committed Sep 5, 2022
1 parent 4ad7a56 commit 218f30d
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 61 deletions.
2 changes: 1 addition & 1 deletion components/atoms/Card/card.tsx
View file
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-3"} bg-white rounded-lg drop-shadow-md`}>
<article className={`${className ? className : ""} block ${heading ? "" : "p-3"} bg-white border rounded-lg drop-shadow-md`}>
{
heading ?
<>
Expand Down
4 changes: 2 additions & 2 deletions components/molecules/HeaderLogo/header-logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface HeaderLogoProps {
const HeaderLogo: React.FC<HeaderLogoProps> = ({ loginScreen, withBg = false }) => {

return (
<div className="flex items-center p-2">
<div className="flex items-center py-2 gap-2">
<Image
className="rounded"
alt="Open Sauced Logo"
Expand All @@ -21,7 +21,7 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({ loginScreen, withBg = false })
src={withBg ? openSaucedImgWithBg : openSaucedImg}
/>
<Text
className={`font-semibold px-2 text-base hidden xs:block ${loginScreen ? "!text-black" : "!text-white"}`}
className={`font-semibold text-base hidden xs:block ${loginScreen ? "!text-black" : "!text-white"}`}
>
OpenSauced
</Text>
Expand Down
121 changes: 64 additions & 57 deletions components/molecules/HighlightCard/highlight-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import labelIcon from "../../../public/icons/icon-label--blue.svg";
import thumbsIcon from "../../../public/icons/icon-thumbs-down--yellow.svg";
import metricArrow from "../../../public/icons/metric-arrow.svg";
import Link from "next/link";
import Card from "components/atoms/Card/card";

interface HighlightCardProps {
className?: string;
Expand All @@ -23,85 +24,91 @@ interface HighlightCardProps {
// Replace these icons, or make them dynamic.
// Maybe create an Icon component.
const icons = {
participation: {
"participation": {
src: repoIcon.src,
label: "Participation"
label: "Participation",
color: "bg-blue-100"
},
acceptedPR: {
"accepted-pr": {
src: prIcon.src,
label: "Accepted PRs"
label: "Accepted PRs",
color: "bg-green-100"
},
unlabeledPR: {
"unlabeled-pr": {
src: labelIcon.src,
label: "Unlabeled PRs"
label: "Unlabeled PRs",
color: "bg-cyan-100"
},
spam: {
"spam": {
src: thumbsIcon.src,
label: "Spam"
label: "Spam",
color: "bg-orange-100"
}
};

const HighlightCard: React.FC<HighlightCardProps> = ({ className, label, icon, metricIncreases, increased, numChanged, percentage, percentageLabel, url }) => {
return (
<Link href={url ? url : "#"}>

<div className={`${className ? className : ""} flex flex-col bg-white border border-slate-300 rounded-lg w-full sm:max-w-[calc(50%-(1rem/2))] h-auto p-2 ${url ? "cursor-pointer " : ""}`}>
{/* Top Information */}
<div className="flex justify-between w-full p-1">
{/* Label */}
<div className="flex items-center gap-2">
{/* Label: Icon */}
<div className={`w-8 h-8 flex justify-center items-center ${icon === "participation" ? "bg-blue-100" : icon === "accepted-pr" ? "bg-green-100" : icon === "unlabeled-pr" ? "bg-cyan-100" : icon === "spam" ? "bg-orange-100" : "bg-slate-100"} rounded-full`}>
<Image
width={16} height={16}
alt={icon === "participation" ? icons.participation.label : icon === "accepted-pr" ? icons.acceptedPR.label : icon === "unlabeled-pr" ? icons.unlabeledPR.label : icon === "spam" ? icons.spam.label : "Icon"}
src={icon === "participation" ? icons.participation.src : icon === "accepted-pr" ? icons.acceptedPR.src : icon === "unlabeled-pr" ? icons.unlabeledPR.src : icon === "spam" ? icons.spam.src : "Icon"} />
</div>
{/* Label: Text */}
<div className="text-sm text-slate-600 font-medium leading-none">
{ label ? label : "Label" }
<Card className={`${className ? className : ""} flex flex-col w-full sm:max-w-[calc(50%-(1rem/2))] h-auto ${url ? "cursor-pointer " : ""}`}>
<>
{/* Top Information */}
<div className="flex justify-between w-full p-1">
{/* Label */}
<div className="flex items-center gap-2">
{/* Label: Icon */}
<div className={`w-8 h-8 flex justify-center items-center ${icon ? icons[icon].color : "bg-slate-100"} rounded-full`}>
<Image
width={16} height={16}
alt={icon ? icons[icon].label : "Icon"}
src={icon ? icons[icon].src : "Icon"} />
</div>
{/* Label: Text */}
<div className="text-sm text-slate-600 font-medium leading-none">
{ label ? label : "Label" }
</div>
</div>
</div>

{/* Last Updated Information */}
<div className="flex items-center gap-1">
{/* Last Updated: Number */}
<div className="text-sm text-slate-600 font-medium leading-none">
{ numChanged ? numChanged : 0 }
{/* Last Updated Information */}
<div className="flex items-center gap-1">
{/* Last Updated: Number */}
<div className="text-sm text-slate-600 font-medium leading-none">
{ numChanged ? numChanged : 0 }
</div>
{/* Last Updated: Icon */}
<Image
width={14} height={14}
alt={(increased ? "Increased " : "Decreased ") + label + " by" + numChanged}
src={metricArrow.src}
className={`${increased ? "" : "rotate-180"}`} />
</div>
{/* Last Updated: Icon */}
<Image
width={14} height={14}
alt={(increased ? "Increased " : "Decreased ") + label + " by" + numChanged}
src={metricArrow.src}
className={`${increased ? "" : "rotate-180"}`} />
</div>
</div>

{/* Main Information */}
<div className="flex flex-col w-full px-6 pb-5 mt-2">
{/* Main Number */}
<div className="flex flex-col items-center">
{/* Percentage */}
<div className="text-4xl font-normal">
{ percentage ? percentage : 0 }%
</div>

{/* Label */}
<div className="text-base font-medium text-slate-600 mt-0.5">
{ percentageLabel ? percentageLabel : "Label"}
{/* Main Information */}
<div className="flex flex-col w-full px-6 pb-5 mt-2">
{/* Main Number */}
<div className="flex flex-col items-center">
{/* Percentage */}
<div className="text-4xl font-normal">
{ percentage ? percentage : 0 }%
</div>

{/* Label */}
<div className="text-base font-medium text-slate-600 mt-0.5">
{ percentageLabel ? percentageLabel : "Label"}
</div>
</div>
</div>

{/* Progress Bar */}
<div className={`flex items-center w-full rounded-full mt-7 ${(percentage && (percentage > 0 || percentage < 99)) ? "gap-2" : ""}`}>
<div className={`${metricIncreases ? (percentage && percentage > 70 ? "bg-green-500" : percentage && percentage > 30 ? "bg-yellow-500" : "bg-red-500") : (percentage && percentage > 70 ? "bg-red-500" : percentage && percentage > 30 ? "bg-yellow-500" : "bg-green-500")} h-3 rounded-full transition-all duration-500 ease-in-out`}
style={{width: (percentage ? percentage : 0) + "%"}}></div>

<div className="bg-gray-200 w-auto flex-auto h-3 rounded-full transition-all duration-500 ease-in-out"></div>
{/* Progress Bar */}
<div className={`flex items-center w-full rounded-full mt-7 ${(percentage && (percentage > 0 || percentage < 99)) ? "gap-2" : ""}`}>
<div className={`${metricIncreases ? (percentage && percentage > 70 ? "bg-green-500" : percentage && percentage > 30 ? "bg-yellow-500" : "bg-red-500") : (percentage && percentage > 70 ? "bg-red-500" : percentage && percentage > 30 ? "bg-yellow-500" : "bg-green-500")} h-3 rounded-full transition-all duration-500 ease-in-out`}
style={{width: (percentage ? percentage : 0) + "%"}}></div>

<div className="bg-gray-200 w-auto flex-auto h-3 rounded-full transition-all duration-500 ease-in-out"></div>
</div>
</div>
</div>
</div>
</>
</Card>
</Link>
);
};
Expand Down
2 changes: 1 addition & 1 deletion components/organisms/TopNav/top-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import HeaderLogo from "../../molecules/HeaderLogo/header-logo";
const TopNav: React.FC = () => {

return (
<header className="top-nav-container flex justify-between items-center pr-1 md:px-16 py-0.5 bg-zinc-900 border-b">
<header className="top-nav-container flex justify-between items-center px-2 md:px-16 py-0.5 bg-zinc-900 border-b">
<HeaderLogo withBg={false} />
<AuthSection />
</header>
Expand Down

0 comments on commit 218f30d

Please sign in to comment.