From c427f288caf477cb4153026748ced7cf091dd041 Mon Sep 17 00:00:00 2001
From: chadstewart <chadrhonanstewart@gmail.com>
Date: Fri, 2 Sep 2022 16:21:54 -0500
Subject: [PATCH 1/3] Updated padding of top nav to fix issue with right
 element not getting padding.

---
 components/molecules/HeaderLogo/header-logo.tsx | 4 ++--
 components/organisms/TopNav/top-nav.tsx         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/molecules/HeaderLogo/header-logo.tsx b/components/molecules/HeaderLogo/header-logo.tsx
index 5c72d9d2d2..2f21ef094e 100644
--- a/components/molecules/HeaderLogo/header-logo.tsx
+++ b/components/molecules/HeaderLogo/header-logo.tsx
@@ -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"
@@ -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>
diff --git a/components/organisms/TopNav/top-nav.tsx b/components/organisms/TopNav/top-nav.tsx
index 4f144cc7dc..2e437edca9 100644
--- a/components/organisms/TopNav/top-nav.tsx
+++ b/components/organisms/TopNav/top-nav.tsx
@@ -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>

From 7913e6c62463954935801d176899d84f01c3cdf5 Mon Sep 17 00:00:00 2001
From: chadstewart <chadrhonanstewart@gmail.com>
Date: Fri, 2 Sep 2022 16:29:05 -0500
Subject: [PATCH 2/3] Replaces div with Card component in highlight card
 comopnent.

---
 components/atoms/Card/card.tsx                |   2 +-
 .../HighlightCard/highlight-card.tsx          | 101 +++++++++---------
 2 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx
index 43f349c92c..0816fb75bd 100644
--- 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-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 ?
           <>
diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx
index c7096070d2..21b464cef0 100644
--- a/components/molecules/HighlightCard/highlight-card.tsx
+++ b/components/molecules/HighlightCard/highlight-card.tsx
@@ -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;
@@ -45,63 +46,65 @@ const HighlightCard: React.FC<HighlightCardProps> = ({ className, label, icon, m
   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 === "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" }
+              </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>
   );
 };

From 43d2da44464266807528fa453f59c32fa664f9ff Mon Sep 17 00:00:00 2001
From: chadstewart <chadrhonanstewart@gmail.com>
Date: Fri, 2 Sep 2022 18:08:49 -0500
Subject: [PATCH 3/3] Updated code in highlight card to be a cleaner
 implementation.

---
 .../HighlightCard/highlight-card.tsx          | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx
index 21b464cef0..54040d0599 100644
--- a/components/molecules/HighlightCard/highlight-card.tsx
+++ b/components/molecules/HighlightCard/highlight-card.tsx
@@ -24,21 +24,25 @@ 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"
   }
 };
 
@@ -53,11 +57,11 @@ const HighlightCard: React.FC<HighlightCardProps> = ({ className, label, icon, m
             {/* 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`}>
+              <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 === "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"} />
+                  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">