feature #1417 Update the design of the language selector (javiereguiluz)

This PR was squashed before being merged into the main branch.

Discussion
----------

Update the design of the language selector

The current header design looks a bit crowded to me, with the links so close to each other:

<img width="1172" alt="" src="https://user-images.githubusercontent.com/73419/235969569-b4fa2803-a4c6-45c7-969f-c7f1373fc401.png">

This PR changes this by making the links a bit smaller and adding more space between them:

<img width="1193" alt="" src="https://user-images.githubusercontent.com/73419/235969669-dd4937fc-aa7d-4626-823d-50930c25c2f2.png">

-----

The other issue is the language selector. We're very lucky to have many translations contributed by the community. But that big number is what makes the current selector a bit hard to use (the list is very long). It also has other design issues:

<img width="204" alt="" src="https://user-images.githubusercontent.com/73419/235969918-020444c4-1c07-4b13-b0b7-9e0298a66964.png">

This PR proposes a completely different design. When you click on the link to select the language, you no longer see a dropdown menu. Instead, you see a full page modal window listing all available languages.

For example, if you are browsing the application in Ukrainian and click on the language selector, you'll see this:

<img width="1488" alt="" src="https://user-images.githubusercontent.com/73419/235970298-2e2bb0cf-b232-4a27-83e4-44959b7aecb2.png">

The new language selector was inspired by the one used in https://europa.eu pages. In addition to displaying all languages more clearly, we now respect the features of each language, like the RTL direction of Arabic.

Commits
-------

b2c68c9 Update the design of the language selector

Author: javiereguiluz

assets/app.js

@@ -1,6 +1,6 @@
 import './styles/app.scss';
 
-// loads the Bootstrap jQuery plugins
+// loads the Bootstrap plugins
 import 'bootstrap/js/dist/alert';
 import 'bootstrap/js/dist/collapse';
 import 'bootstrap/js/dist/dropdown';

assets/styles/app.scss

@@ -138,44 +138,107 @@ header {
       padding: 0 $navbar-toggler-padding-x;
     }
 
-    .nav-link {
-      padding: 0 2rem;
+    .nav-item {
+      font-size: 18px;
+      margin-left: 20px;
     }
+  }
+}
+
+#locale-selector-modal {
+  background: #2c3e50;
+
+  .modal-dialog {
+    @media (min-width: map-get($grid-breakpoints, 'md')) {
+      max-width: 800px;
+      width: 96%;
+    }
+  }
+
+  .modal-content {
+    border: 0;
+  }
+
+  .modal-header {
+    background: #2c3e50;
+    border-bottom: 0;
+    color: var(--white);
+
+    .close { color: var(--white); opacity: 1; }
+  }
+
+  .modal-body {
+    background: #2c3e50;
 
     .locales {
-      min-width: 190px;
-      max-height: 320px;
-      overflow-y: scroll;
-
-      .dropdown-item {
-        padding: 0.25rem 1rem;
-        margin-bottom: 0;
-
-        &.active a,
-        &.active small,
-        &:hover a,
-        &:hover small,
-        a:hover {
-          color: inherit;
+      list-style: none;
+      padding: 0;
+
+      @media (min-width: map-get($grid-breakpoints, 'md')) {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 10px 20px;
+      }
+
+      li {
+        border-radius: 4px;
+        margin-bottom: 10px;
+        position: relative;
+
+        @media (min-width: map-get($grid-breakpoints, 'md')) {
+          margin: 0;
+        }
+
+        &.rtl a {
+          direction: rtl;
         }
 
         a {
+          align-items: center;
+          background: #fff;
+          border-radius: 4px;
           color: $gray-900;
+          display: flex;
+          justify-content: space-between;
+          padding: 10px 20px;
 
           small {
             border-radius: 4px;
             border: 2px solid $gray-300;
-            color: $gray-700;
-            float: left;
-            font-size: 12px;
+            color: $gray-800;
+            font-size: 14px;
+            font-weight: bold;
             line-height: 1.1;
-            margin: 2px 10px 0 0;
+            margin-inline-start: 10px;
             min-width: 26px;
-            padding: 0 3px;
+            padding: 2px 6px;
             text-align: center;
             text-transform: uppercase;
           }
         }
+
+        &:hover a {
+          outline: 3px solid #18bc9c;
+          outline-offset: -5px;
+
+          small {
+            background: #18bc9c;
+            border-color: #18bc9c;
+            color: #fff;
+          }
+        }
+
+        &.active a, &:hover.active a {
+          background: #18bc9c;
+          color: #fff;
+          outline: none;
+
+          small {
+            background: transparent;
+            border-color: #fff;
+            color: #fff;
+          }
+        }
       }
     }
   }

public/build/106.218afa2e.js

@@ -2,37 +2,37 @@
   "entrypoints": {
     "app": {
       "js": [
-        "/build/runtime.c56be18b.js",
+        "/build/runtime.5feae901.js",
         "/build/41.64983f8e.js",
-        "/build/106.218afa2e.js",
-        "/build/app.375057e5.js"
+        "/build/42.5aced7b3.js",
+        "/build/app.8d5ecae9.js"
       ],
       "css": [
-        "/build/106.350bc330.css",
-        "/build/app.fcc22582.css"
+        "/build/42.76194c5a.css",
+        "/build/app.e7ad18f4.css"
       ]
     },
     "admin": {
       "js": [
-        "/build/runtime.c56be18b.js",
+        "/build/runtime.5feae901.js",
         "/build/41.64983f8e.js",
-        "/build/384.abf828b0.js",
-        "/build/admin.223fd8e3.js"
+        "/build/384.af623ff4.js",
+        "/build/admin.747eb0c9.js"
       ],
       "css": [
         "/build/admin.2b1a6c83.css"
       ]
     }
   },
   "integrity": {
-    "/build/runtime.c56be18b.js": "sha384-Cdl61iQY709LV5xk4fjbcXyComo/jpLrd2Q4lyCXTBFRFq4AqQsmJkF6DyKpj9tr",
+    "/build/runtime.5feae901.js": "sha384-Dj9HEwBUNZIrIUOJJ4vOrf8e+X7fhJTYGYb0F/RJLrIo5qMTyh/mBApfQI4FmH8F",
     "/build/41.64983f8e.js": "sha384-XfOM8D6kvkEmauUMaczMxByKTBpbb9/aDqt1hPMgWDJh1X2ZQu5rIyRn3Ipx+rmn",
-    "/build/106.218afa2e.js": "sha384-Ao8mwo0SVoI3p0GV1A2IewyXKTFVXgNmsWztk4C0hABtqxwfi7zvKxERcGbMAn36",
-    "/build/app.375057e5.js": "sha384-wNBy8CKY6y5YBMib8aqJIfIPy03USaz6nXmDKhXOexo1gvFb6rJjgppEn/qE/Q6y",
-    "/build/106.350bc330.css": "sha384-ieyomRvEoNUU0mGkbZBIUAu3gECtNAm7HWIop5bEhnLLnBAUmmh8vu5xzn/yKV+y",
-    "/build/app.fcc22582.css": "sha384-+inL6St/xReqNW5U//2eQ0FudoXwgTVG4lJL1rWHiDws2H6U16612IRGzoim7tYN",
-    "/build/384.abf828b0.js": "sha384-+TRIJU/iNpFojktRMbVDzok0yI2Sce0VAU058Q+i/zxOC0mZqeWJXqMiBevAGErV",
-    "/build/admin.223fd8e3.js": "sha384-AbTN7LsVgw9ZtWeN1zVDTzOa7oJfWP/yi2oAN25NXGc+Dd4RXoYDGL8a+peIUqfZ",
+    "/build/42.5aced7b3.js": "sha384-wqPte8ueaLTZwKszn5yK/iS5GuSBYNuwZtNs5G6BWGzGI17VoFv2lXNHwQbeTCWh",
+    "/build/app.8d5ecae9.js": "sha384-2UhLzumRcZ9rIylCmaGHxKCG1IFSEarrvMs4G6qEzE0Hl0lnrNc+e9jB8gZijjaf",
+    "/build/42.76194c5a.css": "sha384-PoA8WLGz/za3OOW7qjoDiv5f8mBVtREO35Z70PFH8PVIdu1+nWVUEetA6Q1o6DhV",
+    "/build/app.e7ad18f4.css": "sha384-AX8sd4a5GkOjaVooLq9t+zDI/fqugWjeU5OP+fHkycws0R/G5zaM8UZ4qx32gTNi",
+    "/build/384.af623ff4.js": "sha384-DTkf7hVvZ08YUepoH5wzP+thJm6maRzLe8KxUgIc2OajdJkoSDct0pJMEPYcEEeF",
+    "/build/admin.747eb0c9.js": "sha384-vDe3FhM5HnWbM4nEdbmSv8AB5n/PfPJv0y0Goloka7w6jppc6di5LpKD1A252aFg",
     "/build/admin.2b1a6c83.css": "sha384-ikQwASTRPK0sjWtW//EXsUjqkjNxc2Yndtt0m5a/I/qE+qEoikXP5ailZKDaqtN9"
   }
 }

public/build/384.abf828b0.js renamed to public/build/384.af623ff4.js

@@ -1,14 +1,15 @@
 {
-  "build/app.css": "/build/app.fcc22582.css",
-  "build/app.js": "/build/app.375057e5.js",
+  "build/app.css": "/build/app.e7ad18f4.css",
+  "build/app.js": "/build/app.8d5ecae9.js",
   "build/admin.css": "/build/admin.2b1a6c83.css",
-  "build/admin.js": "/build/admin.223fd8e3.js",
-  "build/runtime.js": "/build/runtime.c56be18b.js",
+  "build/admin.js": "/build/admin.747eb0c9.js",
+  "build/runtime.js": "/build/runtime.5feae901.js",
   "build/206.b003fa5f.js": "/build/206.b003fa5f.js",
   "build/41.64983f8e.js": "/build/41.64983f8e.js",
-  "build/106.350bc330.css": "/build/106.350bc330.css",
-  "build/106.218afa2e.js": "/build/106.218afa2e.js",
-  "build/384.abf828b0.js": "/build/384.abf828b0.js",
+  "build/42.76194c5a.css": "/build/42.76194c5a.css",
+  "build/42.5aced7b3.js": "/build/42.5aced7b3.js",
+  "build/630.ed629036.js": "/build/630.ed629036.js",
+  "build/384.af623ff4.js": "/build/384.af623ff4.js",
   "build/images/fa-solid-900.svg": "/build/images/fa-solid-900.7a8b4f13.svg",
   "build/images/fa-brands-400.svg": "/build/images/fa-brands-400.2f517e09.svg",
   "build/fonts/lato-normal-italic.woff": "/build/fonts/lato-normal-italic.62a9c838.woff",