selectLanguage select and switch replacement

AletheiaFact · Jan 21, 2025 · 205abf5 · 205abf5
1 parent 8aac0cf
commit 205abf5
Showing 1 changed file with 42 additions and 17 deletions.
diff --git a/src/components/Header/SelectLanguage.tsx b/src/components/Header/SelectLanguage.tsx
@@ -1,33 +1,50 @@
-import { Select, Switch } from "antd";
 import ReactCountryFlag from "react-country-flag";
 import Cookies from "js-cookie";
 import React, { useLayoutEffect, useState } from "react";
 import styled from "styled-components";
+import { Select, MenuItem, Switch } from "@mui/material";
 import colors from "../../styles/colors";
 import { useAppSelector } from "../../store/store";
 import { NameSpaceEnum } from "../../types/Namespace";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../../atoms/namespace";
 
-const { Option } = Select;
 
 const SelectInput = styled(Select)`
-    .ant-select-selection-item {
+    .MuiOutlinedInput-notchedOutline {
+        border: none;
+     }
+
+    .MuiSelect-select {
         display: flex;
         align-items: center;
     }
 
-    .ant-select-arrow {
+    .MuiSvgIcon-root {
         color: ${colors.white};
         font-size: 0.8rem;
     }
 `;
 
-const SwitchInputStyle = styled(Switch)`
+const StyledSwitch = styled(Switch)`
+.MuiSwitch-track {
     background-color: ${({ namespace }) =>
         namespace === NameSpaceEnum.Main
             ? colors.primary
             : colors.secondary};
+}
+
+.MuiSwitch-thumb {
+   display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${colors.white};
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    }
+  }
+
 `;
 
 const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
@@ -61,21 +78,22 @@ const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
                     bordered={false}
                     showArrow={true}
                     value={language}
+                    onChange={(e) => setDefaultLanguage(e.target.value as string)}
                     onSelect={setDefaultLanguage}
                     data-cy={props.dataCy}
                 >
-                    <Option value="pt" data-cy="testLanguagePt">
+                    <MenuItem value="pt" data-cy="testLanguagePt">
                         <ReactCountryFlag
                             countryCode="BR"
                             style={{ fontSize: "20px", paddingTop: "6px" }}
                         />
-                    </Option>
-                    <Option value="en" data-cy="testLanguageEn">
+                    </MenuItem>
+                    <MenuItem value="en" data-cy="testLanguageEn">
                         <ReactCountryFlag
                             countryCode="GB"
                             style={{ fontSize: "20px", paddingTop: "6px" }}
                         />
-                    </Option>
+                    </MenuItem>
                 </SelectInput>
             )}
             {vw?.xs && (
@@ -90,15 +108,22 @@ const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
                     <span style={{ fontSize: 10 }}>
                         {language === "pt" ? "BR" : "EN"}
                     </span>
-                    <SwitchInputStyle
-                        checkedChildren={<ReactCountryFlag countryCode="BR" />}
-                        unCheckedChildren={
-                            <ReactCountryFlag countryCode="GB" />
-                        }
-                        defaultChecked={language === "pt"}
-                        onChange={onChangeSwitch}
-                        loading={switchLoading}
+                    <StyledSwitch
+                        checked={language === "pt"}
+                        onChange={(e) => onChangeSwitch(e.target.checked)}
                         namespace={nameSpaceProp}
+                        icon={
+                            <ReactCountryFlag
+                                countryCode="GB"
+                                style={{ fontSize: "14px", paddingTop: "4px" }}
+                            />
+                        }
+                        checkedIcon={
+                            <ReactCountryFlag
+                                countryCode="BR"
+                                style={{ fontSize: "14px", paddingTop: "4px" }}
+                            />
+                        }
                     />
                 </div>
             )}