update website footer links and tweak appearance (#5144)

Author: Simek

website/docusaurus.config.ts

@@ -23,7 +23,7 @@ const isProductionDeployment =
   (!!process.env.VERCEL && process.env.VERCEL_ENV === 'production');
 
 const lastVersion = versions[0];
-const copyright = `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc.`;
+const copyright = `Copyright © Meta Platforms, Inc.`;
 
 export type EditUrlButton = {
   label: string;
@@ -545,12 +545,8 @@ const config: Config = {
               to: 'community/overview',
             },
             {
-              label: 'Directory',
-              href: 'https://reactnative.directory/',
-            },
-            {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/react-native',
+              label: 'Code of Conduct',
+              href: 'https://github.com/react/react-native/blob/main/CODE_OF_CONDUCT.md',
             },
           ],
         },
@@ -579,9 +575,13 @@ const config: Config = {
           title: 'Explore More',
           items: [
             {
-              label: 'ReactJS',
+              label: 'React',
               href: 'https://react.dev/',
             },
+            {
+              label: 'Packages Directory',
+              href: 'https://reactnative.directory/',
+            },
             {
               label: 'Privacy Policy',
               href: 'https://opensource.fb.com/legal/privacy/',

website/src/css/customTheme.scss

@@ -1675,9 +1675,10 @@ button[class*="tocCollapsibleButton"] {
 
   .footer__title {
     color: #858a96;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     margin: 0 0 8px;
+    letter-spacing: 0.05rem;
     text-transform: uppercase;
   }
 
@@ -1696,14 +1697,20 @@ button[class*="tocCollapsibleButton"] {
   }
 
   .footer__logo {
-    height: 54px;
+    height: 50px;
     max-width: 100%;
+    margin-bottom: -12px;
+  }
+
+  .footer__copyright {
+    font-size: 11px;
   }
 
   svg[class^="iconExternalLink"] {
     color: var(--subtle);
-    right: -1px;
-    width: 9px;
+    bottom: -1px;
+    position: relative;
+    margin-left: 0.2rem;
   }
 }
 

website/src/theme/Icon/ExternalLink/index.tsx

@@ -1,25 +1,42 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+import React, {type ReactNode} from 'react';
+import {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/Icon/ExternalLink';
 
-import React from 'react';
 import styles from './styles.module.css';
 
-export default function IconExternalLink({width = 13.5, height = 13.5, style}) {
+export default function IconExternalLink({
+  width = 13.5,
+  height = 13.5,
+}: Props): ReactNode {
   return (
     <svg
       width={width}
       height={height}
-      style={style}
-      aria-hidden="true"
-      viewBox="0 0 24 24"
+      viewBox="0 0 256 256"
+      aria-label={translate({
+        id: 'theme.IconExternalLink.ariaLabel',
+        message: '(opens in new tab)',
+        description: 'The ARIA label for the external link icon',
+      })}
       className={styles.iconExternalLink}>
-      <path
-        fill="currentColor"
-        d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+      <line
+        x1="64"
+        y1="192"
+        x2="192"
+        y2="64"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <polyline
+        points="88 64 192 64 192 168"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
       />
     </svg>
   );

website/src/theme/Icon/ExternalLink/styles.module.css

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 .iconExternalLink {
   margin-left: 0.3rem;
 }