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

fix: Fixing issues with TopNav and Highlight Card #294

Merged
merged 3 commits into from
Sep 5, 2022
Merged

fix: Fixing issues with TopNav and Highlight Card #294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c427f28
Updated padding of top nav to fix issue with right element not gettin…
chadstewart Sep 2, 2022
7913e6c
Replaces div with Card component in highlight card comopnent.
chadstewart Sep 2, 2022
43d2da4
Updated code in highlight card to be a cleaner implementation.
chadstewart Sep 2, 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-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
Open in desktop
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"}`}
0-vortex marked this conversation as resolved.
Show resolved Hide resolved
>
OpenSauced
</Text>
Expand Down
121 changes: 64 additions & 57 deletions components/molecules/HighlightCard/highlight-card.tsx
View file
Open in desktop
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
Open in desktop
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