Created Donate Button and Improved Home_header responsive design

public/locales/en/header.json

@@ -1,3 +1,4 @@
 {
-    "search_placeholder": "Search"
+    "search_placeholder": "Search",
+    "donateButton": "Donate"
 }

public/locales/en/home.json

@@ -7,6 +7,7 @@
     "statsClaimReviews": "reviews",
     "statsFooter": "Contribute to an internet free of disinformation",
     "createAccountButton": "Be a reviewer",
+    "donateButton": "Donate to Aletheia",
     "seeMorePersonalitiesButton": "See more Personalities",
     "sectionTitle1": "Personalities",
     "sectionTitle2": "Join the movement",

public/locales/pt/header.json

@@ -1,3 +1,4 @@
 {
-    "search_placeholder": "Busca"
+    "search_placeholder": "Busca",
+    "donateButton": "Doar"
 }

public/locales/pt/home.json

@@ -7,6 +7,7 @@
     "statsClaimReviews": "checagens",
     "statsFooter": "Contribua para uma internet livre de desinformação",
     "createAccountButton": "Seja um revisor",
+    "donateButton": "Doe para Aletheia",
     "seeMorePersonalitiesButton": "Veja mais personalidades",
     "sectionTitle1": "Personalidades",
     "sectionTitle2": "Junte-se ao movimento",

src/components/Header/DonateButton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import AletheiaButton, { ButtonType } from "../Button";
+import { trackUmamiEvent } from "../../lib/umami";
+import { useTranslation } from "next-i18next";
+
+const DonateButton = ({ header = false, style = {} }) => {
+    const { t } = useTranslation();
+    return (
+        <AletheiaButton
+            type={ButtonType.white}
+            href="https://donate.aletheiafact.org/"
+            target="_blank"
+            rel="noreferrer"
+            onClick={() => {
+                trackUmamiEvent("header-cta-donate-button", "Donate");
+            }}
+            style={{
+                fontWeight: 600,
+                height: header ? 32 : 40,
+                minWidth: "75px",
+                ...style,
+            }}
+        >
+            {header ? t("header:donateButton") : t("home:donateButton")}
+        </AletheiaButton>
+    );
+};
+
+export default DonateButton;

src/components/Header/Header.tsx

@@ -7,6 +7,10 @@ const AletheiaHeader = () => {
     return (
         <Layout.Header
             style={{
+                position: "sticky",
+                top: 0,
+                zIndex: 1,
+                width: "100%",
                 backgroundColor: colors.bluePrimary,
                 height: "56px",
                 padding: 0,

src/components/Header/HeaderActions.style.tsx

@@ -1,10 +1,12 @@
 import styled from "styled-components";
 import { queries } from "../../styles/mediaQueries";
+import { Col } from "antd";
 
-const HeaderActionsStyle = styled.div`
+const HeaderActionsStyle = styled(Col)`
     display: flex;
     align-items: flex-end;
-    padding: 0 15px;
+    justify-content: space-evenly;
+    align-items: center;
 
     @media ${queries.sm} {
         padding: 0 1vw;

src/components/Header/HeaderContent.tsx

@@ -1,16 +1,17 @@
-import { MenuOutlined, SearchOutlined } from "@ant-design/icons";
+import { SearchOutlined } from "@ant-design/icons";
 import React from "react";
 import { useDispatch } from "react-redux";
 import actions from "../../store/actions";
 
 import { useAppSelector } from "../../store/store";
-import colors from "../../styles/colors";
 import AletheiaButton from "../Button";
 import SearchOverlay from "../Search/SearchOverlay";
 import HeaderActionsStyle from "./HeaderActions.style";
 import Logo from "./Logo";
 import SelectLanguage from "./SelectLanguage";
 import UserMenu from "./UserMenu";
+import DonateButton from "./DonateButton";
+import Menu from "./Menu";
 
 const HeaderContent = () => {
     const dispatch = useDispatch();
@@ -29,19 +30,7 @@ const HeaderContent = () => {
                 justifyContent: "space-evenly",
             }}
         >
-            <AletheiaButton
-                data-cy="testOpenSideMenu"
-                onClick={() => {
-                    dispatch(actions.openSideMenu());
-                }}
-            >
-                <MenuOutlined
-                    style={{
-                        fontSize: "16px",
-                        color: colors.white,
-                    }}
-                />
-            </AletheiaButton>
+            <Menu />
             <a
                 href="/"
                 style={{
@@ -53,8 +42,8 @@ const HeaderContent = () => {
                 <Logo color="white" />
             </a>
             <SearchOverlay />
-            <HeaderActionsStyle>
-                {vw?.sm && (
+            <HeaderActionsStyle xs={14} sm={6} md={6}>
+                {vw?.xs && (
                     <AletheiaButton
                         onClick={handleClickSearchIcon}
                         data-cy={"testSearchPersonality"}
@@ -69,11 +58,14 @@ const HeaderContent = () => {
                         />
                     </AletheiaButton>
                 )}
+                <DonateButton header={true} />
                 <UserMenu />
-                <SelectLanguage
-                    dataCy={"LanguageButton"}
-                    defaultLanguage="pt"
-                />
+                {!vw?.sm && (
+                    <SelectLanguage
+                        dataCy={"LanguageButton"}
+                        defaultLanguage="pt"
+                    />
+                )}
             </HeaderActionsStyle>
         </div>
     );

src/components/Header/Menu.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import actions from "../../store/actions";
+
+import AletheiaButton from "../Button";
+import { MenuOutlined } from "@ant-design/icons";
+import colors from "../../styles/colors";
+
+const Menu = () => {
+    const dispatch = useDispatch();
+
+    return (
+        <AletheiaButton
+            data-cy="testOpenSideMenu"
+            onClick={() => {
+                dispatch(actions.openSideMenu());
+            }}
+        >
+            <MenuOutlined
+                style={{
+                    fontSize: "16px",
+                    color: colors.white,
+                }}
+            />
+        </AletheiaButton>
+    );
+};
+
+export default Menu;

src/components/Header/SelectLanguage.tsx

@@ -1,9 +1,10 @@
-import { Select } from "antd";
+import { Select, Switch } from "antd";
 import { BR, GB } from "country-flag-icons/react/3x2";
 import Cookies from "js-cookie";
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import colors from "../../styles/colors";
+import { useAppSelector } from "../../store/store";
 
 const { Option } = Select;
 
@@ -15,7 +16,13 @@ const SelectInput = styled(Select)`
     }
 `;
 
+const SwitchInputStyle = styled(Switch)`
+    background-color: ${colors.bluePrimary};
+`;
+
 const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
+    const { vw } = useAppSelector((state) => state);
+    const [switchLoading, setSwitchLoading] = useState<boolean>(false);
     const language = Cookies.get("default_language") || props.defaultLanguage;
 
     const setDefaultLanguage = (language) => {
@@ -25,24 +32,55 @@ const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
         document.cookie = `default_language=${language}`;
     };
 
+    const onChangeSwitch = (checked: boolean) => {
+        const language = checked ? "pt" : "en";
+        setSwitchLoading((state) => !state);
+        setDefaultLanguage(language);
+    };
+
     return (
-        <SelectInput
-            style={{
-                paddingTop: 6,
-            }}
-            bordered={false}
-            showArrow={true}
-            value={language}
-            onSelect={setDefaultLanguage}
-            data-cy={props.dataCy}
-        >
-            <Option default value="pt" data-cy="testLanguagePt">
-                <BR style={{ width: "20px" }} />
-            </Option>
-            <Option value="en" data-cy="testLanguageEn">
-                <GB title="EN" style={{ width: "20px" }} />
-            </Option>
-        </SelectInput>
+        <>
+            {!vw?.sm && (
+                <SelectInput
+                    style={{
+                        paddingTop: 6,
+                    }}
+                    bordered={false}
+                    showArrow={true}
+                    value={language}
+                    onSelect={setDefaultLanguage}
+                    data-cy={props.dataCy}
+                >
+                    <Option value="pt" data-cy="testLanguagePt">
+                        <BR title="BR" style={{ width: "20px" }} />
+                    </Option>
+                    <Option value="en" data-cy="testLanguageEn">
+                        <GB title="EN" style={{ width: "20px" }} />
+                    </Option>
+                </SelectInput>
+            )}
+            {vw?.sm && (
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        gap: 4,
+                        alignItems: "center",
+                    }}
+                >
+                    <span style={{ fontSize: 10 }}>
+                        {language === "pt" ? "BR" : "EN"}
+                    </span>
+                    <SwitchInputStyle
+                        checkedChildren={<BR title="BR" />}
+                        unCheckedChildren={<GB title="EN" />}
+                        defaultChecked={language === "pt"}
+                        onChange={onChangeSwitch}
+                        loading={switchLoading}
+                    />
+                </div>
+            )}
+        </>
     );
 };
 

src/components/Header/UserMenu.tsx

@@ -7,8 +7,11 @@ import { ory } from "../../lib/orysdk";
 import AletheiaButton from "../Button";
 import { CreateLogoutHandler } from "../Login/LogoutAction";
 import UserIcon from "./UserIcon";
+import SelectLanguage from "./SelectLanguage";
+import { useAppSelector } from "../../store/store";
 
 const UserMenu = () => {
+    const { vw } = useAppSelector((state) => state);
     const [hasSession, setHasSession] = useState<boolean>(false);
     const [isLoading, setIsLoading] = useState(false);
     const { t } = useTranslation();
@@ -76,6 +79,14 @@ const UserMenu = () => {
                     {t("login:signup")}
                 </Menu.Item>
             )}
+            {vw?.sm && (
+                <Menu.Item data-cy={"testLanguages"} key="/language">
+                    <SelectLanguage
+                        dataCy={"LanguageButton"}
+                        defaultLanguage="pt"
+                    />
+                </Menu.Item>
+            )}
         </Menu>
     );
 

src/components/Home/CTASection.style.tsx

@@ -4,35 +4,42 @@ import { queries } from "../../styles/mediaQueries";
 
 const CtaSectionStyle = styled(Row)`
     display: grid;
-    grid-template-rows: 52px 72px;
+    grid-template-rows: 52px auto;
     width: 100%;
     margin-top: 24px;
+    row-gap: 24px;
 
     .CTA-title {
         font-size: 16px;
     }
 
+    .CTA-button-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+        max-width: 385px;
+    }
+
     @media ${queries.md} {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 24px;
         .CTA-button-container {
-            margin-top: 12px;
+            width: 100%;
         }
     }
 
     @media ${queries.xs} {
         .CTA-button-container {
             display: flex;
             justify-content: flex-end;
-            margin-bottom: 32px;
         }
 
         .CTA-title {
             font-size: 12px;
             font-weight: 700;
-            width: 60%;
+            width: 80%;
         }
     }
 `;