Merge pull request #643 from reactjs/sync-19aa5b48

Sync with reactjs.org @ 19aa5b4

Author: carburo

beta/public/images/team/mengdi-chen.jpg

@@ -44,7 +44,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
           <Box className="bg-gray-300 dark:bg-gray-90" width="15px" />
         </div>
         <div className="flex text-sm px-4">
-          <div className="border-b-2 border-gray-300 dark:border-gray-90">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90 dark:text-gray-30 text-gray-50">
             Console
           </div>
           <div className="px-4 py-2 flex">

beta/src/components/MDX/ConsoleBlock.tsx

@@ -14,7 +14,7 @@ The React Core team members work full time on the core component APIs, the engin
 
 Current members of the React team are listed in alphabetical order below.
 
-<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Meta">
+<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Vercel">
     Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
 </TeamMember>
 
@@ -38,10 +38,14 @@ Current members of the React team are listed in alphabetical order below.
     Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
 </TeamMember>
 
-<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Engineer at Meta">
+<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Independent Engineer">
     Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
 </TeamMember>
 
+<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Engineer at Meta">
+    While working on his Digital Arts degree Mengdi was conceited about his front-end skills because his CSS worked perfectly even on IE6. But soon React opened a new door of programming for him, and he has been dreaming of joining the React team ever since. Outside of work, he is usually busy chasing his two kids around or collecting strange recipes.
+</TeamMember>
+
 <TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
     Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
 </TeamMember>

beta/src/content/community/team.md

@@ -469,7 +469,7 @@ export default function TodoList() {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -520,7 +520,7 @@ export default function TodoList() {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -575,7 +575,7 @@ export function getImageUrl(person) {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>

beta/src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -65,7 +65,7 @@ function Tooltip() {
 
 * Effects **only run on the client.** They don't run during server rendering.
 
-* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this can make your app very slow. When possible, prefer [`useEffect`.](/reference/reac/useEffect)
+* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this can make your app very slow. When possible, prefer [`useEffect`.](/reference/react/useEffect)
 
 ---
 

beta/src/content/reference/react/useLayoutEffect.md

@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 Mientras que un componente transforma _props_ en interfaz de usuario, un componente de orden superior transforma un componente en otro.
 
-Los *HOCs* son comunes en bibliotecas de terceros usadas en React, tales como [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) en *Redux* y [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer) en *Relay*.
+Los *HOCs* son comunes en bibliotecas de terceros usadas en React, tales como [`connect`](https://react-redux.js.org/api/connect) en *Redux* y [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer) en *Relay*.
 
 En este documento discutiremos por qué los componentes de orden superior son útiles y como escribir tus propios *HOCs*.