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;
+          }
+        }
       }
     }
   }