Merge pull request #1009 from basedosdados/staging

Staging
basedosdados · Nov 1, 2024 · 8469f2e · 8469f2e
2 parents 7bde301 + 1154d97
commit 8469f2e
Show file tree

Hide file tree

Showing 14 changed files with 180 additions and 110 deletions.
diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js
@@ -10,8 +10,8 @@ import {
   HStack,
   Skeleton
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
 import { useTranslation } from 'next-i18next';
+import { useEffect, useState } from "react";
 import Checkbox from "../atoms/Checkbox";
 import { ControlledInput, ControlledInputSimple } from "./ControlledInput";
 import SectionText from "./SectionText";
@@ -27,7 +27,6 @@ export function BaseFilterAccordion({
   alwaysOpen = false,
   isHovering = true
 }) {
-  const { t } = useTranslation('common');
 
   return (
     <Accordion allowToggle width="100%">
@@ -88,7 +87,7 @@ export function CheckboxFilterAccordion({
   canSearch = false,
   isLoading
 }) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('search');
   const [options , setOptions] = useState([])
   const [search, setSearch] = useState("");
   const [inputFocus, setInputFocus] = useState(false)
@@ -134,7 +133,7 @@ export function CheckboxFilterAccordion({
                 onChange={setSearch}
                 inputFocus={inputFocus}
                 changeInputFocus={setInputFocus}
-                placeholder={t('search')}
+                placeholder={t('search_placeholder')}
                 fill="#464A51"
                 icon={
                   <SearchIcon
@@ -215,7 +214,7 @@ export function RangeFilterAccordion({
   maxValue = null,
   minValue = null,
 }) {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('search');
   const [min, setMin] = useState();
   const [max, setMax] = useState();
   const [error, setError] = useState(false);
@@ -224,7 +223,7 @@ export function RangeFilterAccordion({
     setError(null);
 
     if (min > max) return;
-    if ((!min && min < 0) || (!max && max < 0)) return setError("Antigo demais!");
+    if ((!min && min < 0) || (!max && max < 0)) return setError(t('too_old'));
     if (!min && !max) return;
 
     onChange({ min, max });

diff --git a/next/components/atoms/LanguageSelector.js b/next/components/atoms/LanguageSelector.js
@@ -1,72 +1,115 @@
-import { Menu, MenuButton, MenuList, MenuItem, Tooltip } from "@chakra-ui/react";
+import { Menu, MenuButton, MenuList, MenuItem, Box, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useTranslation } from "next-i18next";
-import { useState } from "react";
-import LanguageIcon from "../../public/img/icons/languageIcon";
+import GlobeIcon from "../../public/img/icons/globeIcon";
+import { ChevronDownIcon } from "@chakra-ui/icons";
 
-export default function LanguageSelector() {
+export default function LanguageSelector({ theme = "light" }) {
   const { locale } = useRouter();
   const router = useRouter();
-  const [showTooltip, setShowTooltip] = useState(false);
+
+  const styles = {
+    light: {
+      colors: {
+        text: "#464A51",
+        icon: "#464A51"
+      },
+      text: {
+        fontSize: "12px",
+        lineHeight: "18px",
+        ml: "6px",
+        mr: "4px",
+        fontFamily: "Roboto"
+      },
+      icon: {
+        width: "16px",
+        height: "16px"
+      },
+      chevron: {
+        w: 3,
+        h: 3
+      }
+    },
+    dark: {
+      colors: {
+        text: "#FFFFFF",
+        icon: "#FFFFFF"
+      },
+      text: {
+        fontSize: "16px",
+        fontWeight: "300",
+        lineHeight: "20px",
+        ml: "8px",
+        mr: "4px",
+        fontFamily: "Ubuntu"
+      },
+      icon: {
+        width: "20px",
+        height: "20px"
+      },
+      chevron: {
+        w: 4,
+        h: 4
+      }
+    }
+  };
 
   const changeLanguage = (locale) => {
     router.push(router.pathname, router.asPath, { locale });
   };
 
-  const getTooltipText = () => {
+  const getCurrentLanguage = () => {
     switch(locale) {
       case 'pt':
-        return 'Língua';
+        return 'Português';
       case 'en':
-        return 'Language';
+        return 'English';
       case 'es':
-        return 'Idioma';
+        return 'Español';
       default:
-        return 'Language';
+        return 'Português';
     }
   };
 
   return (
-    <Menu
-      onOpen={() => setShowTooltip(false)}
-    >
+    <Menu>
       {({ isOpen }) => (
         <>
-          <Tooltip 
-            backgroundColor="#FFF"
-            borderRadius="8px"
-            letterSpacing="0.1px"
-            lineHeight="18px"
-            fontWeight="400"
-            fontSize="12px"
-            fontFamily="Roboto"
-            marginTop="-4px"
-            color="#252A32"
-            padding="8px 12px"
-            boxShadow="0 2px 16px rgba(0, 0, 0, 0.16)"
-            placement="top-start"
-            label={getTooltipText()}
-            isOpen={showTooltip && !isOpen}
-            onClose={() => setShowTooltip(false)}
+          <MenuButton
+            aria-label="Language selector"
+            position="relative"
+            display="inline-flex"
+            alignItems="center"
+            width="auto"
+            padding="4px 0px"
+            height="36px"
+            borderRadius="18px"
+            zIndex="11"
+            _hover={{ opacity: 0.8 }}
           >
-            <MenuButton
-              aria-label="Language selector"
-              width="36px"
-              height="36px"
-              borderRadius="50%"
-              zIndex="11"
-              onMouseEnter={() => setShowTooltip(true)}
-              onMouseLeave={() => setShowTooltip(false)}
-            >
-              <LanguageIcon
+            <Box display="flex" alignItems="center">
+              <GlobeIcon
                 alt="language selector"
-                justifyContent="center"
-                width="36px"
-                height="36px"
-                fill="#878A8E"
+                width={styles[theme].icon.width}
+                height={styles[theme].icon.height}
+                fill={styles[theme].colors.icon}
+              />
+              <Text
+                ml={styles[theme].text.ml}
+                mr={styles[theme].text.mr}
+                color={styles[theme].colors.text}
+                fontSize={styles[theme].text.fontSize}
+                lineHeight={styles[theme].text.lineHeight}
+                fontFamily={styles[theme].text.fontFamily}
+              >
+                {getCurrentLanguage()}
+              </Text>
+              <ChevronDownIcon 
+                color={styles[theme].colors.text}
+                w={styles[theme].chevron.w} 
+                h={styles[theme].chevron.h} 
               />
-            </MenuButton>
-          </Tooltip>
+            </Box>
+          </MenuButton>
           <MenuList
             boxShadow="0px 1.5px 16px rgba(0, 0, 0, 0.16)"
             _focus={{boxShadow: "0px 1.5px 16px rgba(0, 0, 0, 0.16) !important"}}

diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js
@@ -2,7 +2,8 @@ import {
   HStack,
   Stack,
   VStack,
-  Text
+  Text,
+  Box
 } from "@chakra-ui/react";
 import Link from "../atoms/Link";
 import BodyText from "../atoms/BodyText"
@@ -18,6 +19,7 @@ import GithubIcon from "../../public/img/icons/githubIcon";
 import LinkedinIcon from "../../public/img/icons/linkedinIcon";
 import WhatsAppIcon from "../../public/img/icons/whatsAppIcon";
 import TelegramIcon from "../../public/img/icons/telegramIcon";
+import LanguageSelector from "../atoms/LanguageSelector";
 
 function SectionCategories({ title, children, ...props }) {
   return (
@@ -105,39 +107,46 @@ export default function Footer({ template, ocult = false }) {
         <Stack
           width="100%"
           maxWidth="1440px"
-          justifyContent="center"
+          justifyContent="space-between"
           direction={{base: "column-reverse", lg: "row"}}
           spacing={0}
           gridGap={{base: "8px", lg: "40px"}}
           padding={{base: "24px", lg: "0"}}
         >
-          <TextFooterSimple>
-            {t('footer.copyright', { year: new Date().getFullYear() })}
-          </TextFooterSimple>
-          <Link
-            href="/terms?section=terms"
-            _hover={{ color: "#252A32" }}
-          >
-            <TextFooterSimple>
-              {t('footer.termsOfUse')}
-            </TextFooterSimple>
-          </Link>
-          <Link
-            href="/terms?section=privacy"
-            _hover={{ color: "#252A32" }}
-          >
+          <HStack spacing={4}>
             <TextFooterSimple>
-              {t('footer.privacyPolicy')}
+              {t('footer.copyright', { year: new Date().getFullYear() })}
             </TextFooterSimple>
-          </Link>
-          <Link
-            href="/contact"
-            _hover={{ color: "#252A32" }}
-          >
-            <TextFooterSimple>
-              {t('footer.contact')}
-            </TextFooterSimple>
-          </Link>
+            <Box ml={4}>
+              <LanguageSelector theme="light" />
+            </Box>
+          </HStack>
+          <HStack spacing={4}>
+            <Link
+              href="/terms?section=terms"
+              _hover={{ color: "#252A32" }}
+            >
+              <TextFooterSimple>
+                {t('footer.termsOfUse')}
+              </TextFooterSimple>
+            </Link>
+            <Link
+              href="/terms?section=privacy"
+              _hover={{ color: "#252A32" }}
+            >
+              <TextFooterSimple>
+                {t('footer.privacyPolicy')}
+              </TextFooterSimple>
+            </Link>
+            <Link
+              href="/contact"
+              _hover={{ color: "#252A32" }}
+            >
+              <TextFooterSimple>
+                {t('footer.contact')}
+              </TextFooterSimple>
+            </Link>
+          </HStack>
         </Stack>
       </VStack>
     </VStack>
@@ -292,7 +301,14 @@ export default function Footer({ template, ocult = false }) {
             alignItems="flex-start"
             marginTop={isMobileMod() && "16px"}
           >
-            <BodyText color="#FFF" fontSize="16px" letterSpacing="0.2px">{t('footer.copyright', { year: new Date().getFullYear() })}</BodyText>
+            <HStack spacing={4}>
+              <BodyText color="#FFF" fontSize="16px" letterSpacing="0.2px">
+                {t('footer.copyright', { year: new Date().getFullYear() })}
+              </BodyText>
+              <Box ml={4}>
+                <LanguageSelector theme="dark" />
+              </Box>
+            </HStack>
           </HStack>
 
           <HStack spacing={3}>

diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js
@@ -861,10 +861,6 @@ function DesktopLinks({
           />
         }
 
-        {process.env.NEXT_PUBLIC_BASE_URL_FRONTEND === "https://basedosdados.org" ? null: (
-          <LanguageSelector />
-        )}
-
         {userData ? (
           <HStack spacing="20px">
             <MenuUser userData={userData} isUserPro={isUserPro}/>

diff --git a/next/pages/search.js b/next/pages/search.js
@@ -36,7 +36,7 @@ import NotFoundImage from "../public/img/notFoundImage";
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['common', 'dataset', 'menu'])),
+      ...(await serverSideTranslations(locale, ['common', 'dataset', 'menu', 'search'])),
     },
   };
 }

diff --git a/next/public/img/icons/globeIcon.js b/next/public/img/icons/globeIcon.js
@@ -0,0 +1,21 @@
+export default function GlobeIcon({ width = "24", height = "24", fill = "currentColor", ...props }) {
+    return (
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
+          fill={fill}
+        />
+        <path
+          d="M12 4C7.59 4 4 7.59 4 12C4 16.41 7.59 20 12 20C16.41 20 20 16.41 20 12C20 7.59 16.41 4 12 4ZM11 19.93C7.05 19.44 4 16.08 4 12C4 11.38 4.08 10.79 4.21 10.21L9 15V16C9 17.1 9.9 18 11 18V19.93ZM17.9 17.39C17.64 16.58 16.9 16 16 16H15V13C15 12.45 14.55 12 14 12H8V10H10C10.55 10 11 9.55 11 9V7H13C14.1 7 15 6.1 15 5V4.59C17.93 5.78 20 8.65 20 12C20 14.08 19.2 15.97 17.9 17.39Z"
+          fill={fill}
+        />
+      </svg>
+    );
+  }
diff --git a/next/public/img/icons/languageIcon.js b/next/public/img/icons/languageIcon.js
diff --git a/next/public/locales/en/common.json b/next/public/locales/en/common.json
@@ -4,9 +4,6 @@
     "popular_terms": "Popular terms:",
     "search_by_theme": "Search by theme",
     "noDatasetsFound": ["No dataset with all selected themes was found.","Try unselecting some of the themes."],
-    "min": "Min",
-    "max": "Max",
-    "search": "Search",
     "products": {
         "facilitation_text": "We make the work easier so that the distance",
         "analysis_distance": "between you and your analysis is ",

diff --git a/next/public/locales/en/search.json b/next/public/locales/en/search.json
@@ -0,0 +1,6 @@
+{
+    "min": "Min",
+    "max": "Max",
+    "too_old": "Too old!",
+    "search_placeholder": "Search"
+}