From c6398444d4ee9b046f9959693f4ba8cc91c06298 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Fri, 17 Nov 2023 13:44:51 +0000
Subject: [PATCH 1/3] Replaced all the css into tailwind css on OutboundLink
 component

---
 components/OutboundLink/OutboundLink.js              |  5 ++---
 components/OutboundLink/OutboundLink.module.css      | 12 ------------
 .../__snapshots__/OutboundLink.test.js.snap          |  4 ++--
 3 files changed, 4 insertions(+), 17 deletions(-)
 delete mode 100644 components/OutboundLink/OutboundLink.module.css

diff --git a/components/OutboundLink/OutboundLink.js b/components/OutboundLink/OutboundLink.js
index 2055664c3..41c9baf00 100644
--- a/components/OutboundLink/OutboundLink.js
+++ b/components/OutboundLink/OutboundLink.js
@@ -3,7 +3,6 @@ import { gtag } from 'common/utils/thirdParty/gtag';
 import ExternalLinkIcon from 'static/images/icons/FontAwesome/external-link-square-alt-solid.svg';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import classNames from 'node_modules/classnames/index';
-import styles from './OutboundLink.module.css';
 
 OutboundLink.propTypes = {
   // will report this label plus the URL from where it was clicked
@@ -37,7 +36,7 @@ function OutboundLink({
 
   return (
     <a
-      className={classNames(styles.OutboundLink, className)}
+      className={classNames('inline-flex items-start', className)}
       data-testid={testID}
       href={href}
       onClick={trackOutboundLinkClick}
@@ -48,7 +47,7 @@ function OutboundLink({
 
       <ScreenReaderOnly>Opens in new window</ScreenReaderOnly>
 
-      {hasIcon && <ExternalLinkIcon className={styles.externalLinkIcon} />}
+      {hasIcon && <ExternalLinkIcon className="fill-current relative my-0 mx-1 bottom-0 w-3" />}
     </a>
   );
 }
diff --git a/components/OutboundLink/OutboundLink.module.css b/components/OutboundLink/OutboundLink.module.css
deleted file mode 100644
index 5d0926b94..000000000
--- a/components/OutboundLink/OutboundLink.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.OutboundLink {
-  display: inline-flex;
-  align-items: flex-start;
-}
-
-.externalLinkIcon {
-  fill: currentcolor !important;
-  position: relative;
-  bottom: 0;
-  margin: 0 0.25rem;
-  width: 0.75em;
-}
diff --git a/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap b/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap
index bb7f1f783..6a340fe8a 100644
--- a/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap
+++ b/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`OutboundLink should render with required props 1`] = `
 <a
-  className="OutboundLink"
+  className="inline-flex items-start"
   href="https://tests.com"
   onClick={[Function]}
   rel="noopener noreferrer"
@@ -16,7 +16,7 @@ exports[`OutboundLink should render with required props 1`] = `
     Opens in new window
   </span>
   <svg
-    className="externalLinkIcon"
+    className="fill-current relative my-0 mx-1 bottom-0 w-3"
   />
 </a>
 `;

From 5017d0e94621c956275ab0260ee97e93a6431b7a Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Mon, 20 Nov 2023 14:50:31 +0000
Subject: [PATCH 2/3] Replaced all the css into tailwind css on OutboundLink
 component

---
 .../__tests__/__snapshots__/LinkButton.test.js.snap       | 2 +-
 .../__tests__/__snapshots__/FeaturedJobItem.test.js.snap  | 8 ++++----
 .../__tests__/__snapshots__/RegistrationForm.test.js.snap | 2 +-
 .../__tests__/__snapshots__/PartnerLogoLink.test.js.snap  | 2 +-
 .../__tests__/__snapshots__/JoinSection.test.js.snap      | 4 ++--
 .../__tests__/__snapshots__/SocialMediaItem.test.js.snap  | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/Buttons/LinkButton/__tests__/__snapshots__/LinkButton.test.js.snap b/components/Buttons/LinkButton/__tests__/__snapshots__/LinkButton.test.js.snap
index 99f0e0c8f..f4e9e1bf4 100644
--- a/components/Buttons/LinkButton/__tests__/__snapshots__/LinkButton.test.js.snap
+++ b/components/Buttons/LinkButton/__tests__/__snapshots__/LinkButton.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`LinkButton should render with many props assigned 1`] = `
 <a
-  className="OutboundLink Button test-class secondary fullWidth"
+  className="inline-flex items-start Button test-class secondary fullWidth"
   data-testid="Test"
   href="https://tests.com"
   onClick={[Function]}
diff --git a/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap b/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
index 556391206..1e6522d59 100644
--- a/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
+++ b/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
@@ -5,7 +5,7 @@ exports[`FeaturedJobItem should render with many props assigned 1`] = `
   className="py-4 px-0"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://jobs.lever.co/formidable/82919058-b73c-4a02-8589-87e2433f0a90"
     onClick={[Function]}
     rel="noopener noreferrer"
@@ -21,7 +21,7 @@ exports[`FeaturedJobItem should render with many props assigned 1`] = `
       Opens in new window
     </span>
     <svg
-      className="externalLinkIcon"
+      className="fill-current relative my-0 mx-1 bottom-0 w-3"
     />
   </a>
   <div
@@ -89,7 +89,7 @@ exports[`FeaturedJobItem should render with required props 1`] = `
   className="py-4 px-0"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://about.gitlab.com/jobs/apply/?gh_jid=4055708002"
     onClick={[Function]}
     rel="noopener noreferrer"
@@ -105,7 +105,7 @@ exports[`FeaturedJobItem should render with required props 1`] = `
       Opens in new window
     </span>
     <svg
-      className="externalLinkIcon"
+      className="fill-current relative my-0 mx-1 bottom-0 w-3"
     />
   </a>
   <div
diff --git a/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap b/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap
index 313d7fc58..b7f200abc 100644
--- a/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap
+++ b/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap
@@ -239,7 +239,7 @@ exports[`RegistrationForm should render with required props 1`] = `
         <span>
           I have read and agree to 
           <a
-            className="OutboundLink"
+            className="inline-flex items-start"
             href="https://github.com/OperationCode/operationcode_docs/blob/master/community/code_of_conduct.md"
             onClick={[Function]}
             rel="noopener noreferrer"
diff --git a/components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.js.snap b/components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.js.snap
index ddd813c45..e80cd8983 100644
--- a/components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.js.snap
+++ b/components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.js.snap
@@ -5,7 +5,7 @@ exports[`PartnerLogoLink should render with required props 1`] = `
   className="text-center w-36"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://user-images.githubusercontent.com"
     onClick={[Function]}
     rel="noopener noreferrer"
diff --git a/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap b/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
index 8b0339a05..fda9c373e 100644
--- a/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
+++ b/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
@@ -53,7 +53,7 @@ exports[`JoinSection should render 1`] = `
       Slack is a community based collaboration tool where all the magic happens!
     </p>
     <a
-      className="OutboundLink"
+      className="inline-flex items-start"
       href="https://get.slack.help/hc/en-us/categories/360000049043-Getting-Started"
       onClick={[Function]}
       rel="noopener noreferrer"
@@ -67,7 +67,7 @@ exports[`JoinSection should render 1`] = `
         Opens in new window
       </span>
       <svg
-        className="externalLinkIcon"
+        className="fill-current relative my-0 mx-1 bottom-0 w-3"
       />
     </a>
   </div>
diff --git a/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap b/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap
index af8bb8564..f0cc676b9 100644
--- a/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap
+++ b/components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap
@@ -5,7 +5,7 @@ exports[`SocialMediaItem should render with required props 1`] = `
   className="my-0 mx-2 opacity-80 hover:opacity-100"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://facebook.com"
     onClick={[Function]}
     rel="noopener noreferrer"

From 84e2c2829090db673fa868f65868462f865ef4bd Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Mon, 20 Nov 2023 16:34:48 +0000
Subject: [PATCH 3/3] Replaced all the css into tailwind css on OutboundLink
 component

---
 .../__tests__/__snapshots__/FeaturedJobItem.test.js.snap      | 4 ++--
 components/OutboundLink/OutboundLink.js                       | 2 +-
 .../__tests__/__snapshots__/OutboundLink.test.js.snap         | 2 +-
 .../__tests__/__snapshots__/JoinSection.test.js.snap          | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap b/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
index 1e6522d59..24dae9bc2 100644
--- a/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
+++ b/components/FeaturedJobItem/__tests__/__snapshots__/FeaturedJobItem.test.js.snap
@@ -21,7 +21,7 @@ exports[`FeaturedJobItem should render with many props assigned 1`] = `
       Opens in new window
     </span>
     <svg
-      className="fill-current relative my-0 mx-1 bottom-0 w-3"
+      className="!fill-current relative my-0 mx-1 bottom-0 w-3"
     />
   </a>
   <div
@@ -105,7 +105,7 @@ exports[`FeaturedJobItem should render with required props 1`] = `
       Opens in new window
     </span>
     <svg
-      className="fill-current relative my-0 mx-1 bottom-0 w-3"
+      className="!fill-current relative my-0 mx-1 bottom-0 w-3"
     />
   </a>
   <div
diff --git a/components/OutboundLink/OutboundLink.js b/components/OutboundLink/OutboundLink.js
index 41c9baf00..18fa8a9f9 100644
--- a/components/OutboundLink/OutboundLink.js
+++ b/components/OutboundLink/OutboundLink.js
@@ -47,7 +47,7 @@ function OutboundLink({
 
       <ScreenReaderOnly>Opens in new window</ScreenReaderOnly>
 
-      {hasIcon && <ExternalLinkIcon className="fill-current relative my-0 mx-1 bottom-0 w-3" />}
+      {hasIcon && <ExternalLinkIcon className="!fill-current relative my-0 mx-1 bottom-0 w-3" />}
     </a>
   );
 }
diff --git a/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap b/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap
index 6a340fe8a..a7c368e5b 100644
--- a/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap
+++ b/components/OutboundLink/__tests__/__snapshots__/OutboundLink.test.js.snap
@@ -16,7 +16,7 @@ exports[`OutboundLink should render with required props 1`] = `
     Opens in new window
   </span>
   <svg
-    className="fill-current relative my-0 mx-1 bottom-0 w-3"
+    className="!fill-current relative my-0 mx-1 bottom-0 w-3"
   />
 </a>
 `;
diff --git a/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap b/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
index fda9c373e..2451745a8 100644
--- a/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
+++ b/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
@@ -67,7 +67,7 @@ exports[`JoinSection should render 1`] = `
         Opens in new window
       </span>
       <svg
-        className="fill-current relative my-0 mx-1 bottom-0 w-3"
+        className="!fill-current relative my-0 mx-1 bottom-0 w-3"
       />
     </a>
   </div>