Skip to content

Commit

Permalink
feat: fix language select appearance
Browse files Browse the repository at this point in the history
  • Loading branch information
@martapanc
martapanc committed Aug 27, 2023
1 parent f6f6c61 commit 4a8aeba
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 1,026 deletions.
114 changes: 33 additions & 81 deletions src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import {InputLabel, MenuItem, Select, SelectChangeEvent} from '@mui/material';
import { InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
import FormControl from '@mui/material/FormControl';
import {useEffect, useState} from 'react';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { HiLanguage } from 'react-icons/hi2';

import i18n from '@/app/(public)/i18n';
import clsx from "clsx";
import {commonStyles} from "@/components/buttons/ModeToggleButton";
import * as React from "react";
import {HiLanguage} from "react-icons/hi2";
import {useTheme} from "next-themes";

export interface LanguageSwitcherProps {
languages: LanguageDef[];
Expand All @@ -19,108 +16,63 @@ export interface LanguageDef {
disabled?: boolean;
}

const LanguageSwitcher = ({ languages } : LanguageSwitcherProps) => {
const { theme, resolvedTheme, setTheme } = useTheme();
const isDarkMode = theme === 'dark';

const [mounted, setMounted] = useState(false);
const LanguageSwitcher = ({ languages }: LanguageSwitcherProps) => {
const [_, setMounted] = useState(false);

// When mounted on client, now we can show the UI
useEffect(() => setMounted(true), []);

const [chosenLanguage, setChosenLanguage] = useState('');

const handleChange = (event: SelectChangeEvent) => {
console.log(i18n.language);
const newLang = event.target.value;
setChosenLanguage(newLang);

i18n.changeLanguage(newLang);
console.log(i18n.language);
};

const changeLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => {
console.log(i18n.language);
const newLang = event.target.value;
setChosenLanguage(newLang);

i18n.changeLanguage(newLang);
console.log(i18n.language);
};

const label = <HiLanguage/>;
const label = <HiLanguage />;

return (
<div className="p-2">
{/*<Select*/}
{/* labelId="demo-simple-select-helper-label"*/}
{/* id="demo-simple-select-helper"*/}
{/* value={theme}*/}
{/* onChange={handleChange}*/}
{/*>*/}
{/* {languages.map(*/}
{/* (lang: LanguageDef) =>*/}
{/* !lang.disabled && (*/}
{/* <option*/}
{/* className="option"*/}
{/* style={{fontSize: '14px', fontWeight: 300}}*/}
{/* key={lang.value}*/}
{/* value={lang.value}*/}
{/* >*/}
{/* {lang.label}*/}
{/* </option>*/}
{/* )*/}
{/* )}*/}
{/*</Select>*/}

{/*<select onChange={changeLanguage}*/}
{/* className="select rounded-md border-2 dark:bg-transparent"*/}
{/*>*/}
{/* {languages.map(*/}
{/* (lang: LanguageDef) =>*/}
{/* !lang.disabled && (*/}
{/* <option*/}
{/* className="option"*/}
{/* style={{fontSize: '14px', fontWeight: 300}}*/}
{/* key={lang.value}*/}
{/* value={lang.value}*/}
{/* >*/}
{/* {lang.label}*/}
{/* </option>*/}
{/* )*/}
{/* )}*/}
{/*</select>*/}

<FormControl sx={{m: 1, minWidth: 80, fontSize: '1.5rem' }} size='small'>
<div>
<FormControl
size='small'
className='ring-offset-2'
sx={{
m: 1,
minWidth: 95,
'& .MuiFormLabel-root': {
fontSize: '1.5rem',
},
'& .MuiOutlinedInput-notchedOutline': {
borderWidth: '2px',
borderColor: '#E5E7EB',
borderRadius: '0.375rem',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: '#2562E8 !important',
},
}}
>
<InputLabel id='demo-select-small-label'>{label}</InputLabel>
<Select
id='demo-select-small'
labelId='demo-select-small-label'
value={chosenLanguage}
label={label}
onChange={handleChange}
// style={{ fontSize: '14px' }}
// sx={{
// '& .MuiOutlinedInput-notchedOutline': {
// borderColor: isDarkMode ? 'white' : 'black'
// },
// '& .MuiSelect-iconOutlined': {
// color: isDarkMode ? 'white' : 'black'
// },
// '& .MuiOutlinedInput-input': {
// color: isDarkMode ? 'white' : 'black'
// },
// '& .css-1jy569b-MuiFormLabel-root-MuiInputLabel-root': {
// color: isDarkMode ? 'white' : 'black'
// }
// }}
sx={{
'& .MuiFormLabel-root': {
fontSize: '1.5rem',
},
}}
>
{languages.map(
(lang: LanguageDef) =>
!lang.disabled && (
<MenuItem
className='font-light'
style={{fontSize: '14px', fontWeight: 300}}
style={{ fontSize: '14px', fontWeight: 300 }}
key={lang.value}
value={lang.value}
>
Expand Down
40 changes: 16 additions & 24 deletions src/theme/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,29 @@
import { createTheme, css, PaletteOptions } from "@mui/material/styles";
import { createTheme, css, PaletteOptions } from '@mui/material/styles';

export type AllowedTheme = NonNullable<PaletteOptions["mode"]>;
export type AllowedTheme = NonNullable<PaletteOptions['mode']>;

export const DEFAULT_THEME: AllowedTheme = "light";
export const DEFAULT_THEME: AllowedTheme = 'light';

export const lightTheme = createTheme({
palette: {
primary: { main: "#9147FF" },
secondary: { main: "#2a48f3" },
mode: "light",
primary: { main: '#2152CE' },
secondary: { main: '#2a48f3' },
text: {
primary: '#000',
},
mode: 'light',
},
});

export const darkTheme = createTheme({
palette: {
primary: { main: "#9147FF" },
secondary: { main: "#2a48f3" },
mode: "dark",
primary: { main: '#2152CE' },
secondary: { main: '#2a48f3' },
text: {
primary: '#FFFFFF',
},
mode: 'dark',
},
});

export const globalStyles = css`
//:root {
// body {
// background-color: #fff;
// color: #121212;
// }
//}
//
//[data-theme="dark"] {
// body {
// background-color: #121212;
// color: #fff;
// }
//}
`;
export const globalStyles = css``;
Loading

0 comments on commit 4a8aeba

Please sign in to comment.