From d2d06cdbab10b272854126defa6819cbef336d9c Mon Sep 17 00:00:00 2001
From: Nicholas Cunningham <ndcunningham@gmail.com>
Date: Tue, 4 Jun 2024 10:23:42 -0600
Subject: [PATCH] chore(nx-dev): Replace duplicate references to discord icon

---
 nx-dev/nx-dev/pages/advent-of-code/index.tsx  | 25 +++++++---------
 nx-dev/ui-common/src/lib/discord-icon.tsx     | 29 +++++++++++--------
 nx-dev/ui-common/src/lib/footer.tsx           | 14 ++-------
 .../src/lib/headers/documentation-header.tsx  | 14 ++-------
 .../ui-community/src/lib/connect-with-us.tsx  | 16 ++++------
 nx-dev/ui-home/src/lib/newsletter.tsx         | 18 +++---------
 6 files changed, 40 insertions(+), 76 deletions(-)

diff --git a/nx-dev/nx-dev/pages/advent-of-code/index.tsx b/nx-dev/nx-dev/pages/advent-of-code/index.tsx
index 5a2e6904a2..77f4cd79f5 100644
--- a/nx-dev/nx-dev/pages/advent-of-code/index.tsx
+++ b/nx-dev/nx-dev/pages/advent-of-code/index.tsx
@@ -5,6 +5,7 @@ import {
 } from '@heroicons/react/24/outline';
 import {
   ButtonLink,
+  DiscordIcon,
   Footer,
   Header,
   SectionHeading,
@@ -50,7 +51,7 @@ export default function AdventOfCode(): JSX.Element {
           >
             <article
               id="advent-of-code"
-              className="mx-auto flex max-w-7xl flex-col space-y-12 py-12 px-4 sm:px-6 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-20 lg:py-16 lg:px-8"
+              className="mx-auto flex max-w-7xl flex-col space-y-12 px-4 py-12 sm:px-6 lg:flex-row lg:items-center lg:space-x-20 lg:space-y-0 lg:px-8 lg:py-16"
             >
               <header className="space-y-10 md:py-12 lg:w-5/12 xl:w-5/12">
                 <div>
@@ -66,7 +67,7 @@ export default function AdventOfCode(): JSX.Element {
                     together! We have a convenient TypeScript starter kit
                     available to help you get started right away.
                   </p>
-                  <div className="flex mt-8 gap-4">
+                  <div className="mt-8 flex gap-4">
                     <ButtonLink
                       href="https://github.com/nrwl/ts-aoc-starter#running-the-puzzles"
                       variant="primary"
@@ -84,9 +85,9 @@ export default function AdventOfCode(): JSX.Element {
                     >
                       <button
                         title="Use Nx to setup your Advent of Code workspace"
-                        className="group relative flex w-full items-center rounded-lg border border-slate-200 bg-white py-3 px-6 text-md font-semibold leading-6 transition hover:bg-slate-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 sm:w-auto"
+                        className="text-md group relative flex w-full items-center rounded-lg border border-slate-200 bg-white px-6 py-3 font-semibold leading-6 transition hover:bg-slate-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700"
                       >
-                        <span className="absolute top-1 right-1 flex opacity-0 transition-opacity group-hover:opacity-100">
+                        <span className="absolute right-1 top-1 flex opacity-0 transition-opacity group-hover:opacity-100">
                           {copied ? (
                             <ClipboardDocumentCheckIcon className="h-4 w-4" />
                           ) : (
@@ -108,7 +109,7 @@ export default function AdventOfCode(): JSX.Element {
                 <div className="video-responsive flex items-center justify-center">
                   <iframe
                     src={`https://www.youtube.com/embed/cOHIO5UXqMw`}
-                    className="aspect-video w-full rounded-lg shadow-lg mb-1"
+                    className="mb-1 aspect-video w-full rounded-lg shadow-lg"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowFullScreen
                     title="Nx Advent of Code"
@@ -122,7 +123,7 @@ export default function AdventOfCode(): JSX.Element {
             {/* <div className="max-w-screen-lg mx-auto"> */}
             <div className="mx-auto max-w-7xl">
               <article className="mx-auto px-4 sm:px-6 lg:items-center lg:px-8">
-                <main className="grid grid-cols-1 gap-5 md:grid-cols-3 pt-10 pb-24">
+                <main className="grid grid-cols-1 gap-5 pb-24 pt-10 md:grid-cols-3">
                   <div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-slate-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-slate-900 dark:hover:bg-slate-800">
                     <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                       <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-slate-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-slate-800" />
@@ -157,16 +158,10 @@ export default function AdventOfCode(): JSX.Element {
                     <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                       <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-indigo-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-indigo-900" />
                       <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#5865F2] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
-                      <svg
-                        fill="currentColor"
+                      <DiscordIcon
+                        showTitle={true}
                         className="relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
-                        role="img"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <title>Discord</title>
-                        <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-                      </svg>
+                      />
                     </div>
                     <h4 className="mb-2 text-lg font-bold">
                       Join us on Discord
diff --git a/nx-dev/ui-common/src/lib/discord-icon.tsx b/nx-dev/ui-common/src/lib/discord-icon.tsx
index b8b51c9b16..2460c594f2 100644
--- a/nx-dev/ui-common/src/lib/discord-icon.tsx
+++ b/nx-dev/ui-common/src/lib/discord-icon.tsx
@@ -1,14 +1,19 @@
 import { FC, SVGProps } from 'react';
 
-export const DiscordIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
-  <svg
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <title>Discord</title>
-    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-  </svg>
-);
+export const DiscordIcon: FC<
+  SVGProps<SVGSVGElement> & { showTitle?: boolean }
+> = (props) => {
+  const { showTitle, ...rest } = props;
+  return (
+    <svg
+      fill="currentColor"
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      {!!showTitle && <title>Discord</title>}
+      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+    </svg>
+  );
+};
diff --git a/nx-dev/ui-common/src/lib/footer.tsx b/nx-dev/ui-common/src/lib/footer.tsx
index 11e92f3191..a0ee08c115 100644
--- a/nx-dev/ui-common/src/lib/footer.tsx
+++ b/nx-dev/ui-common/src/lib/footer.tsx
@@ -1,6 +1,7 @@
 import { HeartIcon } from '@heroicons/react/24/solid';
 import { ThemeSwitcher } from '@nx/nx-dev/ui-theme';
 import Link from 'next/link';
+import { DiscordIcon } from './discord-icon';
 
 export function Footer(): JSX.Element {
   const navigation = {
@@ -65,18 +66,7 @@ export function Footer(): JSX.Element {
         name: 'Discord',
         label: 'Community channel',
         href: 'https://go.nx.dev/community',
-        icon: (props: any) => (
-          <svg
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}
-          >
-            {/*<title>Discord</title>*/}
-            <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-          </svg>
-        ),
+        icon: (props: any) => <DiscordIcon {...props} />,
       },
       {
         name: 'GitHub',
diff --git a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
index cc1a49a250..23d9e8b3fc 100644
--- a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
@@ -21,6 +21,7 @@ import {
 import { SectionsMenu } from './sections-menu';
 import { NxCloudIcon } from '../nx-cloud-icon';
 import { AnnouncementBanner } from '../announcement-banner';
+import { DiscordIcon } from '../discord-icon';
 
 function Menu({ tabs }: { tabs: any[] }): JSX.Element {
   return (
@@ -112,18 +113,7 @@ export function DocumentationHeader({
       name: 'Discord',
       label: 'Community channel',
       href: 'https://go.nx.dev/community',
-      icon: (props: any) => (
-        <svg
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-          {...props}
-        >
-          {/*<title>Discord</title>*/}
-          <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-        </svg>
-      ),
+      icon: (props: any) => <DiscordIcon {...props} />,
     },
     {
       name: 'X',
diff --git a/nx-dev/ui-community/src/lib/connect-with-us.tsx b/nx-dev/ui-community/src/lib/connect-with-us.tsx
index 628375cc47..f8e2b23dbb 100644
--- a/nx-dev/ui-community/src/lib/connect-with-us.tsx
+++ b/nx-dev/ui-community/src/lib/connect-with-us.tsx
@@ -1,12 +1,12 @@
 import { EnvelopeIcon } from '@heroicons/react/24/solid';
-import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { DiscordIcon, SectionHeading } from '@nx/nx-dev/ui-common';
 import Link from 'next/link';
 
 export function ConnectWithUs(): JSX.Element {
   return (
     <article
       id="community"
-      className="mx-auto flex max-w-7xl flex-col space-y-12 py-12 px-4 sm:px-6 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-20 lg:py-16 lg:px-8"
+      className="mx-auto flex max-w-7xl flex-col space-y-12 px-4 py-12 sm:px-6 lg:flex-row lg:items-center lg:space-x-20 lg:space-y-0 lg:px-8 lg:py-16"
     >
       <header className="space-y-10 md:py-12 lg:w-5/12 xl:w-5/12">
         <div>
@@ -34,16 +34,10 @@ export function ConnectWithUs(): JSX.Element {
               <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                 <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-indigo-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-indigo-900" />
                 <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#5865F2] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
-                <svg
-                  fill="currentColor"
+                <DiscordIcon
+                  showTitle={true}
                   className="relative inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>Discord</title>
-                  <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-                </svg>
+                />
               </div>
               <h4 className="mb-2 text-lg font-bold">Join us on Discord</h4>
               <a
diff --git a/nx-dev/ui-home/src/lib/newsletter.tsx b/nx-dev/ui-home/src/lib/newsletter.tsx
index dffbcaf7d2..a2121eaa1d 100644
--- a/nx-dev/ui-home/src/lib/newsletter.tsx
+++ b/nx-dev/ui-home/src/lib/newsletter.tsx
@@ -1,4 +1,4 @@
-import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { DiscordIcon, SectionHeading } from '@nx/nx-dev/ui-common';
 
 export function Newsletter(): JSX.Element {
   const communityLinks = [
@@ -23,17 +23,7 @@ export function Newsletter(): JSX.Element {
       name: 'Discord',
       label: 'Community channel',
       href: 'https://go.nx.dev/community',
-      icon: (props: any) => (
-        <svg
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-          {...props}
-        >
-          <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-        </svg>
-      ),
+      icon: (props: any) => <DiscordIcon {...props} />,
     },
     {
       name: 'Twitter',
@@ -71,7 +61,7 @@ export function Newsletter(): JSX.Element {
 
   return (
     <div className="bg-slate-50 pt-28 dark:bg-slate-800/40">
-      <div className="mx-auto max-w-7xl py-16 px-4 sm:px-6 lg:flex lg:items-center lg:py-24 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:flex lg:items-center lg:px-8 lg:py-24">
         <div className="lg:w-0 lg:flex-1">
           <SectionHeading as="h1" variant="title" id="stay-informed">
             Stay up to date
@@ -107,7 +97,7 @@ export function Newsletter(): JSX.Element {
             ))}
           </div>*/}
         </div>
-        <div className="mt-8 lg:mt-0 lg:ml-8">
+        <div className="mt-8 lg:ml-8 lg:mt-0">
           <div className="mt-4 space-x-12">
             {communityLinks.map((item) => (
               <a