From 2894eb0fddedbef71e456c3db22c22713a45c396 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Tue, 15 Nov 2022 18:02:37 -0500
Subject: [PATCH] chore: small ui update

Update icon background color & section border & Update header text & badge rounded corners
---
 apps/www/pages/careers/index.tsx | 438 +++++++++++++++----------------
 1 file changed, 219 insertions(+), 219 deletions(-)

diff --git a/apps/www/pages/careers/index.tsx b/apps/www/pages/careers/index.tsx
index e7b6338d87e..fcf73326588 100644
--- a/apps/www/pages/careers/index.tsx
+++ b/apps/www/pages/careers/index.tsx
@@ -78,12 +78,11 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
         <div className="text-scale-1200">
           <div className="container relative mx-auto px-6 py-10 lg:pt-12 lg:px-16 xl:px-20 text-center space-y-4">
             <span className="text-sm text-brand-900 md:text-base">Careers</span>
-            <h1 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-3xl lg:mx-auto">
-              Help us build the best developer platform in the world
+            <h1 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-2xl xl:max-w-3xl lg:mx-auto">
+              We’re on a mission to build the best developer platform
             </h1>
             <p className="text-sm md:text-base text-scale-1000 max-w-sm sm:max-w-md md:max-w-lg mx-auto">
-              Explore remote opportunities and join our mission to become the world's most
-              productive developer platform.
+              Explore remote possibilities and join our team to help us achieve it.
             </p>
             <Button
               as="a"
@@ -114,229 +113,230 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
             </div>
           </SectionContainer>
 
-          <div className="h-[2px] bg-gradient-to-r from-scale-100 via-scale-700 to-scale-100"></div>
-          <div className="bg-scale-100 overflow-clip">
-            <SectionContainer className="!py-0 !pb-16 lg:!pt-16">
-              <div className="lg:flex lg:h-[500px]">
-                <div className="relative aspect-square -top-[110px] -left-[200px] w-[575px] sm:-top-[150px] sm:-left-[300px] sm:w-[850px] lg:-top-[225px] lg:-left-[330px] lg:w-[800px] lg:h-[800px] xl:-left-[200px] xl:-top-[210px] xl:w-[1000px]">
-                  <Globe />
-                </div>
-                <div className="relative -top-[75px] lg:top-0 lg:-left-[325px] xl:-top-[45px] xl:-left-[150px] 2xl:-left-[50px] lg:min-w-[400px] lg:h-fit xl:mt-10">
-                  <h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] lg:max-w-xs">
-                    We work together, wherever we are
-                  </h1>
-                  <p className="text-scale-1100 mt-4 text-xs sm:text-sm lg:text-base md:w-5/6 lg:w-full">
-                    Working in a globally distributed team is rewarding but has its challenges. We
-                    are across many different timezones, so we use tools like Notion, Slack, and
-                    Discord to stay connected to our team, and our community.
-                  </p>
-                  <div className="max-w-[300px] sm:max-w-md lg:max-w-md mt-20">
-                    <div className="border-t-2 border-brand-900 w-4/12"></div>
-                    <h1 className="text-2xl sm:text-3xl lg:text-4xl pt-2">
-                      We deeply believe in the efficacy of collaborative open source
+          <div className="py-[1.25px] bg-gradient-to-r from-scale-100 via-scale-700 to-scale-100">
+            <div className="bg-scale-100 overflow-clip">
+              <SectionContainer className="!py-0 !pb-16 lg:!pt-16">
+                <div className="lg:flex lg:h-[500px]">
+                  <div className="relative aspect-square -top-[110px] -left-[200px] w-[575px] sm:-top-[150px] sm:-left-[300px] sm:w-[850px] lg:-top-[225px] lg:-left-[330px] lg:w-[800px] lg:h-[800px] xl:-left-[200px] xl:-top-[210px] xl:w-[1000px]">
+                    <Globe />
+                  </div>
+                  <div className="relative -top-[75px] lg:top-0 lg:-left-[325px] xl:-top-[45px] xl:-left-[150px] 2xl:-left-[50px] lg:min-w-[400px] lg:h-fit xl:mt-10">
+                    <h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] lg:max-w-xs">
+                      We work together, wherever we are
                     </h1>
-                  </div>
-                </div>
-              </div>
-            </SectionContainer>
-
-            <SectionContainer>
-              <div className="md:flex md:gap-6">
-                <div className="md:w-1/2">
-                  <div>
-                    <h1 className="text-2xl sm:text-3xl xl:text-4xl">What is Supabase</h1>
-                    <p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-2 sm:max-w-md xl:max-w-lg">
-                      Supabase is an open source Firebase alternative, built by developers for
-                      developers. Supabase adds auth, realtime, storage, restful APIs, and edge
-                      functions to Postgres without a single line of code. Supabase was born-remote.
-                      Having a globally distributed, open source company is our secret weapon to
-                      hiring top-tier talent.
+                    <p className="text-scale-1100 mt-4 text-xs sm:text-sm lg:text-base md:w-5/6 lg:w-full">
+                      Working in a globally distributed team is rewarding but has its challenges. We
+                      are across many different timezones, so we use tools like Notion, Slack, and
+                      Discord to stay connected to our team, and our community.
                     </p>
-                  </div>
-                  <div className="md:w-full rounded-md mt-10 md:mt-36 lg:mt-40">
-                    <div className="relative w-full aspect-[148/125]">
-                      <Image
-                        src="/images/career/1.jpg"
-                        alt="team photo"
-                        layout="fill"
-                        objectFit="cover"
-                        className="rounded-md"
-                      />
-                    </div>
-                  </div>
-                  <div className="grid justify-items-end">
-                    <div className="w-5/6 rounded-md mt-6">
-                      <div className="relative w-full aspect-[29/22]">
-                        <Image
-                          src="/images/career/2.jpg"
-                          alt="team photo"
-                          layout="fill"
-                          objectFit="cover"
-                          className="rounded-md"
-                        />
-                      </div>
+                    <div className="max-w-[300px] sm:max-w-md lg:max-w-md mt-20">
+                      <div className="border-t-2 border-brand-900 w-4/12"></div>
+                      <h1 className="text-2xl sm:text-3xl lg:text-4xl pt-2">
+                        We deeply believe in the efficacy of collaborative open source
+                      </h1>
                     </div>
                   </div>
                 </div>
-                <div className="mt-6 md:mt-0 md:w-1/2">
-                  <div className="w-full rounded-md">
-                    <div className="relative w-full aspect-[137/110]">
-                      <Image
-                        src="/images/career/3.jpg"
-                        alt="team photo"
-                        layout="fill"
-                        objectFit="cover"
-                        className="rounded-md"
-                      />
-                    </div>
-                  </div>
-                  <div className="flex gap-6 mt-6">
-                    <div className="w-full rounded-md">
-                      <div className="relative w-full aspect-[142/189]">
-                        <Image
-                          src="/images/career/4.jpg"
-                          alt="team photo"
-                          layout="fill"
-                          objectFit="cover"
-                          className="rounded-md"
-                        />
-                      </div>
-                    </div>
-                    <div className="w-full rounded-md">
-                      <div className="relative w-full aspect-[142/189]">
-                        <Image
-                          src="/images/career/5.jpg"
-                          alt="team photo"
-                          layout="fill"
-                          objectFit="cover"
-                          className="rounded-md"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="w-5/6 rounded-md mt-6">
-                    <div className="relative w-full aspect-[41/43]">
-                      <Image
-                        src="/images/career/6.jpg"
-                        alt="team photo"
-                        layout="fill"
-                        objectFit="cover"
-                        className="rounded-md"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </SectionContainer>
+              </SectionContainer>
 
-            <SectionContainer>
-              <h1 className="text-2xl sm:text-3xl xl:text-4xl">Human powered</h1>
-              <p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-3 sm:w-3/5 lg:max-w-sm">
-                As a completely remote and asynchronous team, we focus on these five traits to keep
-                our team effective:
-              </p>
-              <div className="sm:flex items-start justify-between pt-10 space-y-6 sm:space-y-0 md:space-x-4">
-                {career.humanPowered.map(
-                  (human: { icon: string; title: string; text: string }, i: number) => {
+              <SectionContainer>
+                <div className="md:flex md:gap-6">
+                  <div className="md:w-1/2">
+                    <div>
+                      <h1 className="text-2xl sm:text-3xl xl:text-4xl">What is Supabase</h1>
+                      <p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-2 sm:max-w-md xl:max-w-lg">
+                        Supabase is an open source Firebase alternative, built by developers for
+                        developers. Supabase adds auth, realtime, storage, restful APIs, and edge
+                        functions to Postgres without a single line of code. Supabase was
+                        born-remote. Having a globally distributed, open source company is our
+                        secret weapon to hiring top-tier talent.
+                      </p>
+                    </div>
+                    <div className="md:w-full rounded-md mt-10 md:mt-36 lg:mt-40">
+                      <div className="relative w-full aspect-[148/125]">
+                        <Image
+                          src="/images/career/1.jpg"
+                          alt="team photo"
+                          layout="fill"
+                          objectFit="cover"
+                          className="rounded-md"
+                        />
+                      </div>
+                    </div>
+                    <div className="grid justify-items-end">
+                      <div className="w-5/6 rounded-md mt-6">
+                        <div className="relative w-full aspect-[29/22]">
+                          <Image
+                            src="/images/career/2.jpg"
+                            alt="team photo"
+                            layout="fill"
+                            objectFit="cover"
+                            className="rounded-md"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-6 md:mt-0 md:w-1/2">
+                    <div className="w-full rounded-md">
+                      <div className="relative w-full aspect-[137/110]">
+                        <Image
+                          src="/images/career/3.jpg"
+                          alt="team photo"
+                          layout="fill"
+                          objectFit="cover"
+                          className="rounded-md"
+                        />
+                      </div>
+                    </div>
+                    <div className="flex gap-6 mt-6">
+                      <div className="w-full rounded-md">
+                        <div className="relative w-full aspect-[142/189]">
+                          <Image
+                            src="/images/career/4.jpg"
+                            alt="team photo"
+                            layout="fill"
+                            objectFit="cover"
+                            className="rounded-md"
+                          />
+                        </div>
+                      </div>
+                      <div className="w-full rounded-md">
+                        <div className="relative w-full aspect-[142/189]">
+                          <Image
+                            src="/images/career/5.jpg"
+                            alt="team photo"
+                            layout="fill"
+                            objectFit="cover"
+                            className="rounded-md"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div className="w-5/6 rounded-md mt-6">
+                      <div className="relative w-full aspect-[41/43]">
+                        <Image
+                          src="/images/career/6.jpg"
+                          alt="team photo"
+                          layout="fill"
+                          objectFit="cover"
+                          className="rounded-md"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </SectionContainer>
+
+              <SectionContainer>
+                <h1 className="text-2xl sm:text-3xl xl:text-4xl">Human powered</h1>
+                <p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-3 sm:w-3/5 lg:max-w-sm">
+                  As a completely remote and asynchronous team, we focus on these five traits to
+                  keep our team effective:
+                </p>
+                <div className="sm:flex items-start justify-between pt-10 space-y-6 sm:space-y-0 md:space-x-4">
+                  {career.humanPowered.map(
+                    (human: { icon: string; title: string; text: string }, i: number) => {
+                      return (
+                        <div
+                          key={i}
+                          className="flex sm:block items-center space-x-6 sm:space-x-0 sm:space-y-4 md:w-full"
+                        >
+                          <div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center">
+                            <div className="relative w-[80%] h-[80%] mx-auto">
+                              <Image
+                                src={`/images/career/icons/${human.icon}${
+                                  isDarkMode ? '-dark' : '-light'
+                                }.svg`}
+                                alt={`${human.icon} icon`}
+                                layout="fill"
+                                objectFit="cover"
+                              />
+                            </div>
+                          </div>
+                          <div className="sm:max-w-[120px] md:max-w-[150px] lg:max-w-[230px]">
+                            <h2 className="text-sm md:text-md xl:text-lg md:pt-4 lg:pt-0">
+                              {human.title}
+                            </h2>
+                            <p className="text-scale-1100 text-xs lg:text-sm">{human.text}</p>
+                          </div>
+                        </div>
+                      )
+                    }
+                  )}
+                </div>
+              </SectionContainer>
+
+              <SectionContainer className="!pb-0">
+                <div className="w-14 h-14 bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center mx-auto mb-6">
+                  <div className="relative w-[80%] h-[80%] mx-auto">
+                    <Image
+                      src={`/images/career/icons/open_source${isDarkMode ? '-dark' : '-light'}.svg`}
+                      alt="open source icon"
+                      layout="fill"
+                      objectFit="cover"
+                    />
+                  </div>
+                </div>
+                <div className="text-center">
+                  <h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] xl:max-w-none mx-auto">
+                    1,000 + Contributors building Supabase
+                  </h1>
+                  <p className="text-scale-1100 text-xs sm:text-sm lg:text-base sm:max-w-lg lg:max-w-2xl mx-auto pt-3">
+                    We're building a community of communities, bringing together developers from
+                    many different backgrounds, as well as new developers looking to get involved
+                    with open source. We love celebrating everyone who contributes their time to the
+                    Supabase mission.
+                  </p>
+                </div>
+                <div className="w-[1080px] h-[370px] mx-auto sm:mt-10 md:mt-16 lg:mt-28 2xl:mt-60">
+                  {contributors.map((contributor: any, i: number) => {
                     return (
                       <div
+                        className={`${
+                          Styles[`contributors-${i}`]
+                        } absolute w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 rounded-full border-[1.5px] border-scale-600 z-10`}
                         key={i}
-                        className="flex sm:block items-center space-x-6 sm:space-x-0 sm:space-y-4 md:w-full"
                       >
-                        <div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center">
-                          <div className="relative w-[80%] h-[80%] mx-auto">
-                            <Image
-                              src={`/images/career/icons/${human.icon}${
-                                isDarkMode ? '-dark' : '-light'
-                              }.svg`}
-                              alt={`${human.icon} icon`}
-                              layout="fill"
-                              objectFit="cover"
-                            />
-                          </div>
-                        </div>
-                        <div className="sm:max-w-[120px] md:max-w-[150px] lg:max-w-[230px]">
-                          <h2 className="text-sm md:text-md xl:text-lg md:pt-4 lg:pt-0">
-                            {human.title}
-                          </h2>
-                          <p className="text-scale-1100 text-xs lg:text-sm">{human.text}</p>
-                        </div>
+                        <Link href={contributor.html_url}>
+                          <a target="_blank">
+                            <div className="relative w-full h-full">
+                              <Image
+                                src={contributor.avatar_url}
+                                alt={`${contributor.login} github avatar`}
+                                className="rounded-full"
+                                layout="fill"
+                                objectFit="cover"
+                              />
+                            </div>
+                          </a>
+                        </Link>
                       </div>
                     )
-                  }
-                )}
-              </div>
-            </SectionContainer>
-
-            <SectionContainer className="!pb-0">
-              <div className="w-14 h-14 bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center mx-auto mb-6">
-                <div className="relative w-[80%] h-[80%] mx-auto">
-                  <Image
-                    src={`/images/career/icons/open_source${isDarkMode ? '-dark' : '-light'}.svg`}
-                    alt="open source icon"
-                    layout="fill"
-                    objectFit="cover"
-                  />
+                  })}
+                  <div
+                    className={`${Styles['contributors-bg-circle']} w-[100%] lg:w-[80%] left-[0%] lg:left-[10%] -bottom-[30%] xs:-bottom-[36%] sm:-bottom-[52%] md:-bottom-[64%] lg:-bottom-[80%] xl:-bottom-[100%]`}
+                  >
+                    <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
+                  </div>
+                  <div
+                    className={`${Styles['contributors-bg-circle']} w-[80%] lg:w-[60%] left-[10%] lg:left-[20%] -bottom-[25%] xs:-bottom-[30%] sm:-bottom-[44%] md:-bottom-[54%] lg:-bottom-[60%] xl:-bottom-[75%]`}
+                  >
+                    <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
+                  </div>
+                  <div
+                    className={`${Styles['contributors-bg-circle']} w-[60%] lg:w-[40%] left-[20%] lg:left-[30%] -bottom-[20%] xs:-bottom-[25%] sm:-bottom-[38%] md:-bottom-[44%] lg:-bottom-[40%] xl:-bottom-[50%]`}
+                  >
+                    <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
+                  </div>
+                  <div
+                    className={`${Styles['contributors-bg-circle']} w-[40%] lg:w-[20%] left-[30%] lg:left-[40%] -bottom-[15%] xs:-bottom-[19%] sm:-bottom-[30%] md:-bottom-[34%] lg:-bottom-[20%] xl:-bottom-[25%]`}
+                  >
+                    <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
+                  </div>
                 </div>
-              </div>
-              <div className="text-center">
-                <h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] xl:max-w-none mx-auto">
-                  1,000 + Contributors building Supabase
-                </h1>
-                <p className="text-scale-1100 text-xs sm:text-sm lg:text-base sm:max-w-lg lg:max-w-2xl mx-auto pt-3">
-                  We're building a community of communities, bringing together developers from many
-                  different backgrounds, as well as new developers looking to get involved with open
-                  source. We love celebrating everyone who contributes their time to the Supabase
-                  mission.
-                </p>
-              </div>
-              <div className="w-[1080px] h-[370px] mx-auto sm:mt-10 md:mt-16 lg:mt-28 2xl:mt-60">
-                {contributors.map((contributor: any, i: number) => {
-                  return (
-                    <div
-                      className={`${
-                        Styles[`contributors-${i}`]
-                      } absolute w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 rounded-full border-[1.5px] border-scale-600 z-10`}
-                      key={i}
-                    >
-                      <Link href={contributor.html_url}>
-                        <a target="_blank">
-                          <div className="relative w-full h-full">
-                            <Image
-                              src={contributor.avatar_url}
-                              alt={`${contributor.login} github avatar`}
-                              className="rounded-full"
-                              layout="fill"
-                              objectFit="cover"
-                            />
-                          </div>
-                        </a>
-                      </Link>
-                    </div>
-                  )
-                })}
-                <div
-                  className={`${Styles['contributors-bg-circle']} w-[100%] lg:w-[80%] left-[0%] lg:left-[10%] -bottom-[30%] xs:-bottom-[36%] sm:-bottom-[52%] md:-bottom-[64%] lg:-bottom-[80%] xl:-bottom-[100%]`}
-                >
-                  <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
-                </div>
-                <div
-                  className={`${Styles['contributors-bg-circle']} w-[80%] lg:w-[60%] left-[10%] lg:left-[20%] -bottom-[25%] xs:-bottom-[30%] sm:-bottom-[44%] md:-bottom-[54%] lg:-bottom-[60%] xl:-bottom-[75%]`}
-                >
-                  <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
-                </div>
-                <div
-                  className={`${Styles['contributors-bg-circle']} w-[60%] lg:w-[40%] left-[20%] lg:left-[30%] -bottom-[20%] xs:-bottom-[25%] sm:-bottom-[38%] md:-bottom-[44%] lg:-bottom-[40%] xl:-bottom-[50%]`}
-                >
-                  <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
-                </div>
-                <div
-                  className={`${Styles['contributors-bg-circle']} w-[40%] lg:w-[20%] left-[30%] lg:left-[40%] -bottom-[15%] xs:-bottom-[19%] sm:-bottom-[30%] md:-bottom-[34%] lg:-bottom-[20%] xl:-bottom-[25%]`}
-                >
-                  <div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
-                </div>
-              </div>
-            </SectionContainer>
+              </SectionContainer>
+            </div>
           </div>
 
           <SectionContainer>
@@ -354,7 +354,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                         className="h-full bg-scale-300 border-scale-400 border-[1px] p-6 rounded-lg flex items-start space-x-6 w-full"
                         key={i}
                       >
-                        <div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 aspect-square bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center">
+                        <div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 aspect-square bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center">
                           <div className="relative w-[80%] h-[80%] mx-auto">
                             <Image
                               src={`/images/career/icons/${benefits.icon}${
@@ -381,7 +381,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
           </SectionContainer>
 
           <SectionContainer>
-            <div className="w-14 h-14 bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center mx-auto mb-6">
+            <div className="w-14 h-14 bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center mx-auto mb-6">
               <div className="relative w-[80%] h-[80%] mx-auto">
                 <Image
                   src={`/images/career/icons/jobs${isDarkMode ? '-dark' : '-light'}.svg`}
@@ -408,7 +408,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                     className="flex lg:block items-start space-x-6 lg:space-x-0 lg:w-full"
                   >
                     <div className="lg:flex items-center">
-                      <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-800 text-md text-center w-[44px] px-2 py-1.5 rounded-md">
+                      <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-md text-center w-[44px] px-2 py-1.5 rounded-md">
                         {i + 1}
                       </h3>
                       <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-800 lg:pr-6"></div>
@@ -424,7 +424,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                   </div>
                 )
               })}
-              <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-800 text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
+              <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
                 <IconCheck />
               </h3>
             </div>
@@ -454,7 +454,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                             </h2>
                             <div className="flex items-center justify-between justify-[normal] pt-2 sm:pt-0 sm:w-full">
                               <div className="flex items-center space-x-4">
-                                <Badge className="rounded-md flex items-center lg:text-sm">
+                                <Badge className="rounded-full flex items-center lg:text-sm">
                                   <div className="relative w-3 h-3 mx-auto">
                                     <Image
                                       src="/images/career/icons/globe-dark.svg"