From 180314811684136393fe78d86ab2b477ed153d16 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 1 Dec 2020 16:46:56 +0800
Subject: [PATCH] Small fix to badges in other components

---
 www/components/Features/index.tsx          |  2 +-
 www/components/MadeForDevelopers/index.tsx |  2 +-
 www/components/Nav/FlyOut.tsx              |  2 +-
 www/components/Nav/index.tsx               |  2 +-
 www/components/badge.tsx                   | 10 ++++++++--
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/www/components/Features/index.tsx b/www/components/Features/index.tsx
index 5107663be08..7fd95533853 100644
--- a/www/components/Features/index.tsx
+++ b/www/components/Features/index.tsx
@@ -22,7 +22,7 @@ const Features = () => {
           </div>
           <dt className="flex flex-row xl:flex-col ml-4 text-lg leading-6 font-medium text-gray-900 dark:text-white">
             {name}
-            {label && <Badge>{label}</Badge>}
+            {label && <Badge className="mt-1">{label}</Badge>}
           </dt>
         </div>
         <div className="mt-5">
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index 7e0ce67701b..952030a6e45 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -42,7 +42,7 @@ const MadeForDevelopers = () => {
                   <div className="lg:mt-5">
                     <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex">
                       Local emulator
-                      <Badge>Q1 2021</Badge>
+                      <Badge className="ml-3">Q1 2021</Badge>
                     </dt>
                     <dd className="mt-3 text-base text-gray-500 mb-6 dark:text-dark-100">
                       Develop locally and push to production when you're ready
diff --git a/www/components/Nav/FlyOut.tsx b/www/components/Nav/FlyOut.tsx
index f671c920187..84d3a08d0f9 100644
--- a/www/components/Nav/FlyOut.tsx
+++ b/www/components/Nav/FlyOut.tsx
@@ -42,7 +42,7 @@ const FlyOut = () => {
         <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
           <div>
             <p className="text-base font-medium text-gray-900 dark:text-white">
-              {name} {label && <Badge>{label}</Badge>}
+              {name} {label && <Badge className="ml-3">{label}</Badge>}
             </p>
             <p className="mt-1 text-sm text-gray-500 dark:text-dark-100">
               {description}
diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 8c978acec7d..3f8724de9fb 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -47,7 +47,7 @@ const Nav = (props: Props) => {
         <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
           <div>
             <p className="text-base font-medium text-gray-900 dark:text-white">
-              {name} {label && <Badge>{label}</Badge>}
+              {name} {label && <Badge className="ml-3">{label}</Badge>}
             </p>
             <p className="mt-1 text-sm text-gray-500 dark:text-dark-100">{description}</p>
           </div>
diff --git a/www/components/badge.tsx b/www/components/badge.tsx
index 7b0922304bf..c188900dac2 100644
--- a/www/components/badge.tsx
+++ b/www/components/badge.tsx
@@ -1,6 +1,12 @@
-const Badge = (props: any) => {
+type Props = {
+  className?: string,
+  children: any
+}
+
+const Badge = (props: Props) => {
+  const { className, children } = props
   return (
-    <span className="ml-3 xl:ml-0 xl:mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 ${className}`}>
       <svg className="-ml-0.5 mr-1.5 h-2 w-2 text-indigo-400" fill="currentColor" viewBox="0 0 8 8">
         <circle cx="4" cy="4" r="3" />
       </svg>