feat(WEB-304): remaning UI from design system primitives

components/Current/Header/LanguageSwitcher/Mobile/index.tsx

@@ -27,30 +27,34 @@ export default function Mobile({
   }
 
   return (
-    <div>
-      <button
-        aria-pressed="false"
-        className={styles.languageSwitcher}
-        onClick={toggleOpen}
-      >
-        {languages[currentLanguage]}
-        <span className={`${styles.arrow} ${isOpen ? styles.open : ""}`}></span>
-        <span className={styles.hiddenAccessible}>Choose language</span>
-      </button>
-      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
-        {urlKeys.map((key) => {
-          const url = urls[key as Lang]?.url
-          if (url) {
-            return (
-              <li key={key} className={styles.li}>
-                <a href={url} className={styles.link}>
-                  {languages[key as Lang]}
-                </a>
-              </li>
-            )
-          }
-        })}
-      </ul>
-    </div>
+    <section className={styles.mobile}>
+      <div>
+        <button
+          aria-pressed="false"
+          className={styles.toggle}
+          onClick={toggleOpen}
+        >
+          {languages[currentLanguage]}{" "}
+          <span
+            className={`${styles.arrow} ${isOpen ? styles.open : ""}`}
+          ></span>
+          <span className={styles.hiddenAccessible}>Choose language</span>
+        </button>
+        <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
+          {urlKeys.map((key) => {
+            const url = urls[key as Lang]?.url
+            if (url) {
+              return (
+                <li key={key} className={styles.li}>
+                  <a href={url} className={styles.link}>
+                    {languages[key as Lang]}
+                  </a>
+                </li>
+              )
+            }
+          })}
+        </ul>
+      </div>
+    </section>
   )
 }

components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css

@@ -1,5 +1,9 @@
-.languageSwitcher {
+.mobile {
+  display: block;
   font-family: Helvetica, Arial, sans-serif;
+}
+
+.toggle {
   font-size: 14px;
   padding: 5px 0;
   display: block;
@@ -62,3 +66,9 @@
   color: #7f7369;
   text-decoration: none;
 }
+
+@media (min-width: 950px) {
+  .mobile {
+    display: none;
+  }
+}