Footer Section Revamp

flow-typed/npm/@fortawesome/free-brands-svg-icons_v5.x.x.js

@@ -8,4 +8,8 @@ declare module '@fortawesome/free-brands-svg-icons' {
 
   declare export var faGooglePlay: IconLookup;
   declare export var faAndroid: IconLookup;
+  declare export var faInstagram: IconLookup;
+  declare export var faTwitter: IconLookup;
+  declare export var faFacebook: IconLookup;
+  declare export var faLinkedin: IconLookup;
 }

flow-typed/npm/@fortawesome/free-solid-svg-icons_v6.x.x.js

@@ -11,4 +11,5 @@ declare module '@fortawesome/free-solid-svg-icons' {
   declare export var faHeadphones: IconLookup;
   declare export var faMusic: IconLookup;
   declare export var faUsers: IconLookup;
+  declare export var faChevronRight: IconLookup;
 }

package.json

@@ -26,12 +26,13 @@
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "6.0.0",
     "@fortawesome/react-fontawesome": "0.1.17",
-    "@metabrainz/design-system": "1.0.6",
+    "@metabrainz/design-system": "1.2.2",
     "@popperjs/core": "2.5.3",
     "@sentry/browser": "5.10.2",
     "@sentry/node": "5.10.2",
     "babel-loader": "9.1.0",
     "balanced-match": "0.2.0",
+    "bootstrap": "5.1.3",
     "canonical-json": "0.0.4",
     "cookie": "0.4.1",
     "core-js": "3.6.5",

root/components/home/About.js

@@ -7,14 +7,13 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
-import * as React from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-// eslint-disable-next-line import/no-unresolved
 import {faCheckCircle} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import * as React from 'react';
 
 const About = (): React.Element<'section'> => (
   <section className="p-4">
-    <div className="container">
+    <div className="container-fluid">
       <div className="row">
         <div className="col-lg-6 fs-4">
           <h3 className="fs-1 fw-bolder">

root/components/home/AppDownload.js

@@ -7,14 +7,14 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
-import * as React from 'react';
+import {faAndroid, faGooglePlay} from '@fortawesome/free-brands-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faGooglePlay, faAndroid} from '@fortawesome/free-brands-svg-icons';
+import * as React from 'react';
 
 const AppDownload = (): React.Element<'section'> => {
   return (
     <section className="download-section center">
-      <div className="container">
+      <div className="container-fluid">
         <div className="row">
           <h2 className="col-md-6">
             {l('Download our app')}

root/components/home/Explore.js

@@ -11,7 +11,7 @@ import * as React from 'react';
 
 const Explore = (): React.Element<'section'> => (
   <section className="bs" id="explore">
-    <div className="container pt-4 pb-4">
+    <div className="container-fluid pt-4 pb-4">
       <div className="text-center pt-4">
         <h2 className="mb-2 pb-2 text-uppercase fs-1 fw-bold">
           {l('Explore MusicBrainz')}

root/components/home/Facts.js

@@ -7,14 +7,18 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
-import * as React from 'react';
+import {
+  faCompactDisc,
+  faHeadphones,
+  faMusic,
+  faUsers,
+} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faMusic, faHeadphones, faCompactDisc, faUsers}
-  from '@fortawesome/free-solid-svg-icons';
+import * as React from 'react';
 
 const Facts = (): React.Element<'section'> => (
   <section className="p-4">
-    <div className="container">
+    <div className="container-fluid">
       <div className="row">
         <div className="col-lg-3 col-md-6">
           <div className="count-box p-4">

root/layout/components/BottomMenu.js

@@ -11,103 +11,6 @@ import * as React from 'react';
 
 import {SanitizedCatalystContext} from '../../context.mjs';
 import {VARTIST_GID} from '../../static/scripts/common/constants.js';
-import {capitalize} from '../../static/scripts/common/utility/strings.js';
-import {returnToCurrentPage} from '../../utility/returnUri.js';
-
-function languageName(
-  language: ?ServerLanguageT,
-  selected: boolean,
-) {
-  if (!language) {
-    return '';
-  }
-
-  const {
-    id,
-    native_language: nativeLanguage,
-    native_territory: nativeTerritory,
-  } = language;
-
-  let text = `[${id}]`;
-
-  if (nativeLanguage) {
-    text = capitalize(nativeLanguage);
-
-    if (nativeTerritory) {
-      text += ' (' + capitalize(nativeTerritory) + ')';
-    }
-  }
-
-  if (selected) {
-    text += ' \u25be';
-  }
-
-  return text;
-}
-
-type LanguageLinkPropsT = {
-  language: ServerLanguageT,
-};
-
-const LanguageLink = ({
-  language,
-}: LanguageLinkPropsT) => {
-  const $c = React.useContext(SanitizedCatalystContext);
-  return (
-    <a
-      href={
-        '/set-language/' + encodeURIComponent(language.name) +
-        '?' + returnToCurrentPage($c)
-      }
-    >
-      {languageName(language, false)}
-    </a>
-  );
-};
-
-type LanguageMenuProps = {
-  +currentBCP47Language: string,
-  +serverLanguages: $ReadOnlyArray<ServerLanguageT>,
-};
-
-const LanguageMenu = ({
-  currentBCP47Language,
-  serverLanguages,
-}: LanguageMenuProps) => {
-  const $c = React.useContext(SanitizedCatalystContext);
-  return (
-    <li className="language-selector" tabIndex="-1">
-      <span className="menu-header">
-        {languageName(
-          serverLanguages.find(x => x.name === currentBCP47Language),
-          true,
-        )}
-      </span>
-      <ul>
-        {serverLanguages.map(function (language, index) {
-          let inner: React$MixedElement =
-            <LanguageLink language={language} />;
-
-          if (language.name === currentBCP47Language) {
-            inner = <strong>{inner}</strong>;
-          }
-
-          return <li key={index}>{inner}</li>;
-        })}
-        <li>
-          <a href={'/set-language/unset?' + returnToCurrentPage($c)}>
-            {l('(reset language)')}
-          </a>
-        </li>
-        <li className="separator">
-          <a href="https://translations.metabrainz.org/projects/musicbrainz/">
-            {l('Help Translate')}
-          </a>
-        </li>
-      </ul>
-    </li>
-  );
-};
 
 const AboutMenu = () => (
   <li className="about" tabIndex="-1">
@@ -330,9 +233,8 @@ const DocumentationMenu = () => (
   </li>
 );
 
-const BottomMenu = (): React$Element<'div'> => {
+const BottomMenu = (): React.Element<'div'> => {
   const $c = React.useContext(SanitizedCatalystContext);
-  const serverLanguages = $c.stash.server_languages;
   return (
     <div className="bottom">
       <ul className="menu">
@@ -341,12 +243,6 @@ const BottomMenu = (): React$Element<'div'> => {
         <SearchMenu />
         {$c.user ? <EditingMenu /> : null}
         <DocumentationMenu />
-        {serverLanguages && serverLanguages.length > 1 ? (
-          <LanguageMenu
-            currentBCP47Language={$c.stash.current_language.replace('_', '-')}
-            serverLanguages={serverLanguages}
-          />
-        ) : null}
       </ul>
     </div>
   );