chore(react): update links for generated react apps (#4213)

packages/next/src/schematics/application/lib/create-application-files.helpers.ts

@@ -19,37 +19,26 @@ export function createAppJsx(name: string) {
       <li className="col-span-2">
         <a
           className="resource flex"
-            href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
+          href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
         >
-            Nx video course
+          Scale React Development with Nx (Course)
         </a>
       </li>
       <li className="col-span-2">
         <a
           className="resource flex"
-          href="https://nx.dev/react/getting-started/what-is-nx"
+          href="https://nx.dev/latest/react/tutorial/01-create-application"
-        >
-          Nx video tutorial
-        </a>
-      </li>
-      <li className="col-span-2">
-        <a
-          className="resource flex"
-          href="https://nx.dev/react/tutorial/01-create-application"
         >
           Interactive tutorial
         </a>
       </li>
       <li className="col-span-2">
-        <a className="resource flex" href="https://connect.nrwl.io/">
+        <a className="resource flex" href="https://nx.app/">
-          <img
+          <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-            height="36"
+            <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-            alt="Nrwl Connect"
+            <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-            src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
+          </svg>
-          />
+          <span className="gutter-left">Nx Cloud</span>
-          <span  className="gutter-left">
-            Nrwl Connect
-          </span>
         </a>
       </li>
     </ul>

packages/react/src/schematics/application/files/css-module/src/app/__fileName__.module.__style__

@@ -13,7 +13,7 @@
   grid-column: span 2;
 }
 
-.app :global(.flex){
+.app :global(.flex) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -65,7 +65,7 @@
   text-decoration: none;
 }
 
-.app :global(.resource):hover {
+.app :global(.resource:hover) {
   background-color: rgba(68, 138, 255, 0.04);
 }
 

packages/react/src/schematics/application/files/css-module/src/app/__fileName__.tsx__tmpl__

@@ -40,23 +40,15 @@ export function App() {
         <li className="col-span-2">
           <a
             className="resource flex"
-            href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
+            href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
           >
-            Nx video course
+            Scale React Development with Nx (Course)
           </a>
         </li>
         <li className="col-span-2">
           <a
             className="resource flex"
-            href="https://nx.dev/react/getting-started/what-is-nx"
+            href="https://nx.dev/latest/react/tutorial/01-create-application"
-          >
-            Nx video tutorial
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://nx.dev/react/tutorial/01-create-application"
           >
             Interactive tutorial
           </a>

packages/react/src/schematics/application/files/global-css/src/app/__fileName__.__style__

@@ -5,48 +5,48 @@
   margin: 50px auto;
 }
 
-.app :global(.gutter-left) {
+.app .gutter-left {
   margin-left: 9px;
 }
 
-.app :global(.col-span-2) {
+.app .col-span-2 {
   grid-column: span 2;
 }
 
-.app :global(.flex) {
+.app .flex {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.app :global(header) {
+.app header {
   background-color: #143055;
   color: white;
   padding: 5px;
   border-radius: 3px;
 }
 
-.app :global(main) {
+.app main {
   padding: 0 36px;
 }
 
-.app :global(p) {
+.app p {
   text-align: center;
 }
 
-.app :global(h1) {
+.app h1 {
   text-align: center;
   margin-left: 18px;
   font-size: 24px;
 }
 
-.app :global(h2) {
+.app h2 {
   text-align: center;
   font-size: 20px;
   margin: 40px 0 10px 0;
 }
 
-.app :global(.resources) {
+.app .resources {
   text-align: center;
   list-style: none;
   padding: 0;
@@ -55,7 +55,7 @@
   grid-template-columns: 1fr 1fr;
 }
 
-.app :global(.resource) {
+.app .resource {
   color: #0094ba;
   height: 36px;
   background-color: rgba(0, 0, 0, 0);
@@ -65,18 +65,18 @@
   text-decoration: none;
 }
 
-.app :global(.resource:hover) {
+.app .resource:hover {
   background-color: rgba(68, 138, 255, 0.04);
 }
 
-.app :global(pre) {
+.app pre {
   padding: 9px;
   border-radius: 4px;
   background-color: black;
   color: #eee;
 }
 
-.app :global(details) {
+.app details {
   border-radius: 4px;
   color: #333;
   background-color: rgba(0, 0, 0, 0);
@@ -85,25 +85,25 @@
   margin-bottom: 9px;
 }
 
-.app :global(summary) {
+.app summary {
   outline: none;
   height: 36px;
   line-height: 36px;
 }
 
-.app :global(.github-star-container) {
+.app .github-star-container {
   margin-top: 12px;
   line-height: 20px;
 }
 
-.app :global(.github-star-container a) {
+.app .github-star-container a {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: #333;
 }
 
-.app :global(.github-star-badge) {
+.app .github-star-badge {
   color: #24292e;
   display: flex;
   align-items: center;
@@ -116,12 +116,12 @@
   font-weight: 600;
 }
 
-.app :global(.github-star-badge:hover) {
+.app .github-star-badge:hover {
   background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
   border-color: rgba(27, 31, 35, 0.35);
   background-position: -0.5em;
 }
-.app :global(.github-star-badge .material-icons) {
+.app .github-star-badge .material-icons {
   height: 16px;
   width: 16px;
   margin-right: 4px;

packages/react/src/schematics/application/files/global-css/src/app/__fileName__.tsx__tmpl__

@@ -40,23 +40,15 @@ export function App() {
         <li className="col-span-2">
           <a
             className="resource flex"
-            href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
+            href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
           >
-            Nx video course
+            Scale React Development with Nx (Course)
           </a>
         </li>
         <li className="col-span-2">
           <a
             className="resource flex"
-            href="https://nx.dev/react/getting-started/what-is-nx"
+            href="https://nx.dev/latest/react/tutorial/01-create-application"
-          >
-            Nx video tutorial
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://nx.dev/react/tutorial/01-create-application"
           >
             Interactive tutorial
           </a>

packages/react/src/schematics/application/files/styled-jsx/src/app/__fileName__.tsx__tmpl__

@@ -173,44 +173,24 @@ export function App() {
       <li className="col-span-2">
         <a
           className="resource flex"
-              href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
+          href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
         >
-              Nx video course
+          Scale React Development with Nx (Course)
         </a>
       </li>
       <li className="col-span-2">
         <a
           className="resource flex"
-              href="https://nx.dev/react/getting-started/what-is-nx"
+          href="https://nx.dev/latest/react/tutorial/01-create-application"
-            >
-              Nx video tutorial
-            </a>
-          </li>
-          <li className="col-span-2">
-            <a
-              className="resource flex"
-              href="https://nx.dev/react/tutorial/01-create-application"
         >
           Interactive tutorial
         </a>
       </li>
       <li className="col-span-2">
         <a className="resource flex" href="https://nx.app/">
-              <svg
+          <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-                width="36"
+            <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
-                height="36"
+            <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
-                viewBox="0 0 120 120"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
-                  fill="#0E2039"
-                />
-                <path
-                  d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
-                  fill="white"
-                />
           </svg>
           <span className="gutter-left">Nx Cloud</span>
         </a>

packages/react/src/schematics/application/files/styled-module/src/app/__fileName__.tsx__tmpl__

@@ -170,23 +170,15 @@ export function App() {
         <li className="col-span-2">
           <a
             className="resource flex"
-            href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
+            href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
           >
-            Nx video course
+            Scale React Development with Nx (Course)
           </a>
         </li>
         <li className="col-span-2">
           <a
             className="resource flex"
-            href="https://nx.dev/react/getting-started/what-is-nx"
+            href="https://nx.dev/latest/react/tutorial/01-create-application"
-          >
-            Nx video tutorial
-          </a>
-        </li>
-        <li className="col-span-2">
-          <a
-            className="resource flex"
-            href="https://nx.dev/react/tutorial/01-create-application"
           >
             Interactive tutorial
           </a>