diff --git a/client/src/ui/organisms/article-actions/language-menu/index.scss b/client/src/ui/organisms/article-actions/language-menu/index.scss index e36fad565684..d5fcb7ef35a8 100644 --- a/client/src/ui/organisms/article-actions/language-menu/index.scss +++ b/client/src/ui/organisms/article-actions/language-menu/index.scss @@ -31,6 +31,12 @@ background-color: unset; } + .group { + align-items: center; + display: flex; + gap: 0.5em; + } + .switch { display: flex; } @@ -39,9 +45,17 @@ font-style: italic; font-variation-settings: "slnt" -10; margin-top: 0.5em; + } + + .icon { + margin-right: unset; + } + + a[href] .icon-question-mark { + background-color: var(--icon-secondary); - .icon { - margin-right: unset; + &:hover { + background-color: var(--text-link); } } } diff --git a/client/src/ui/organisms/article-actions/language-menu/index.tsx b/client/src/ui/organisms/article-actions/language-menu/index.tsx index 9cbf25a009b6..cc7b96e6f05b 100644 --- a/client/src/ui/organisms/article-actions/language-menu/index.tsx +++ b/client/src/ui/organisms/article-actions/language-menu/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/jsx-no-target-blank */ import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; @@ -17,6 +18,8 @@ import { } from "../../../../utils"; import { GleanThumbs } from "../../../atoms/thumbs"; import { Switch } from "../../../atoms/switch"; +import { Icon } from "../../../atoms/icon"; +import { Tooltip } from "../../../../observatory/tooltip"; // This needs to match what's set in 'libs/constants.js' on the server/builder! const PREFERRED_LOCALE_COOKIE_NAME = "preferredlocale"; @@ -154,15 +157,26 @@ function LocaleRedirectSetting() { } } + // eslint-disable react/jsx-no-target-blank return (
);