Skip to content
This repository was archived by the owner on Jan 2, 2025. It is now read-only.

Commit 4730b57

Browse files
anastasiya1155anastasiya1155
committed
redesign language selector
1 parent ff33eb6 commit 4730b57

File tree

5 files changed

+75
-50
lines changed

5 files changed

+75
-50
lines changed

‎client/src/components/LanguageSelector/index.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useContext } from 'react';
2+
import { MenuListItemType } from '../ContextMenu';
3+
import DropdownWithIcon from '../Dropdown/WithIcon';
4+
import { LocaleContext } from '../../context/localeContext';
5+
6+
const LanguageSelector = () => {
7+
const { locale, setLocale } = useContext(LocaleContext);
8+
return (
9+
<DropdownWithIcon
10+
items={[
11+
{
12+
text: 'English',
13+
icon: <span>🇺🇸</span>,
14+
type: MenuListItemType.DEFAULT,
15+
onClick: () => {
16+
setLocale('en');
17+
},
18+
},
19+
{
20+
text: '日本',
21+
icon: <span>🇯🇵</span>,
22+
type: MenuListItemType.DEFAULT,
23+
onClick: () => {
24+
setLocale('ja');
25+
},
26+
},
27+
]}
28+
icon={
29+
<div className="flex items-center gap-2">
30+
<span> {locale === 'ja' ? '🇯🇵' : '🇺🇸'}</span>
31+
<span>{locale === 'ja' ? '日本' : 'English'}</span>
32+
</div>
33+
}
34+
noChevron
35+
dropdownBtnClassName=""
36+
btnSize="small"
37+
btnVariant="tertiary"
38+
size="small"
39+
appendTo={document.body}
40+
/>
41+
);
42+
};
43+
44+
export default LanguageSelector;

‎client/src/components/NavBar/index.tsx‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useContext } from 'react';
2-
import i18next from 'i18next';
32
import { useTranslation } from 'react-i18next';
4-
import { Bug, Cog, DoorRight, Globe, Magazine, Person } from '../../icons';
3+
import { Bug, Cog, DoorRight, Magazine, Person } from '../../icons';
54
import { MenuListItemType } from '../ContextMenu';
65
import { deleteAuthCookie } from '../../utils';
76
import DropdownWithIcon from '../Dropdown/WithIcon';
@@ -10,7 +9,6 @@ import { DeviceContext } from '../../context/deviceContext';
109
import { TabsContext } from '../../context/tabsContext';
1110
import { gitHubLogout } from '../../services/api';
1211
import { RepoSource } from '../../types';
13-
import { LocaleContext } from '../../context/localeContext';
1412
import Tab from './Tab';
1513

1614
type Props = {
@@ -26,7 +24,6 @@ const NavBar = ({ isSkeleton }: Props) => {
2624
setSettingsOpen,
2725
} = useContext(UIContext);
2826
const { openLink, isSelfServe, os, envConfig } = useContext(DeviceContext);
29-
const { setLocale, locale } = useContext(LocaleContext);
3027
const { tabs, setActiveTab, activeTab, handleRemoveTab } =
3128
useContext(TabsContext);
3229

@@ -54,35 +51,6 @@ const NavBar = ({ isSkeleton }: Props) => {
5451
<Tab tabKey={t.key} name={t.name} key={t.key} source={t.source} />
5552
))}
5653
</div>
57-
<DropdownWithIcon
58-
items={[
59-
{
60-
text: 'EN',
61-
type: MenuListItemType.DEFAULT,
62-
onClick: () => {
63-
setLocale('en');
64-
},
65-
},
66-
{
67-
text: '日本',
68-
type: MenuListItemType.DEFAULT,
69-
onClick: () => {
70-
setLocale('ja');
71-
},
72-
},
73-
]}
74-
icon={
75-
<div className="flex items-center gap-1">
76-
<Globe />
77-
{locale === 'ja' ? '日本' : 'EN'}
78-
</div>
79-
}
80-
dropdownBtnClassName=""
81-
btnSize="tiny"
82-
btnVariant="tertiary"
83-
size="small"
84-
appendTo={document.body}
85-
/>
8654
{!isSkeleton && (
8755
<div>
8856
<DropdownWithIcon

‎client/src/components/StatusBar/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React, { useContext, useEffect, useState } from 'react';
22
import { useTranslation, Trans } from 'react-i18next';
33
import Button from '../Button';
4-
import { DiscordLogo, Magazine, Papers, PowerPlug } from '../../icons';
4+
import { DiscordLogo, Globe, Magazine, Papers, PowerPlug } from '../../icons';
55
import { UIContext } from '../../context/uiContext';
66
import { DeviceContext } from '../../context/deviceContext';
77
import { getDiscordLink } from '../../services/api';
8+
import { MenuListItemType } from '../ContextMenu';
9+
import DropdownWithIcon from '../Dropdown/WithIcon';
10+
import { LocaleContext } from '../../context/localeContext';
11+
import LanguageSelector from '../LanguageSelector';
812
import StatusItem from './StatusItem';
913

1014
const StatusBar = () => {
@@ -44,6 +48,7 @@ const StatusBar = () => {
4448
text-xs border-t border-bg-border fixed bottom-0 left-0 right-0 z-30 cursor-default`}
4549
>
4650
<span className="flex text-label-muted gap-4">
51+
<LanguageSelector />
4752
<StatusItem
4853
icon={<PowerPlug />}
4954
textMain={t(`Status`)}

‎client/src/pages/Onboarding/GitHubConnect/index.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import {
99
import { useGitHubAuth } from '../../../hooks/useGitHubAuth';
1010
import Button from '../../../components/Button';
1111
import TextField from '../../../components/TextField';
12+
import { MenuListItemType } from '../../../components/ContextMenu';
13+
import DropdownWithIcon from '../../../components/Dropdown/WithIcon';
14+
import LanguageSelector from '../../../components/LanguageSelector';
1215
import StepsLine from './StepsLine';
1316

1417
const GitHubConnect = ({ goBack }: { goBack: () => void }) => {
@@ -26,13 +29,12 @@ const GitHubConnect = ({ goBack }: { goBack: () => void }) => {
2629
return (
2730
<>
2831
<div className="flex flex-col items-center gap-4 relative">
29-
<Button
30-
variant="tertiary"
31-
onClick={goBack}
32-
className="absolute -top-24 left-0"
33-
>
34-
<ArrowLeft /> <Trans>Back</Trans>
35-
</Button>
32+
<div className="absolute -top-24 left-0 right-0 flex justify-between items-center">
33+
<Button variant="tertiary" onClick={goBack}>
34+
<ArrowLeft /> <Trans>Back</Trans>
35+
</Button>
36+
<LanguageSelector />
37+
</div>
3638
<div className="w-11 h-11">
3739
<GitHubLogoBig />
3840
</div>

‎client/src/pages/Onboarding/UserForm/index.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { MenuItemType } from '../../../types/general';
1818
import { Theme } from '../../../types';
1919
import { themesMap } from '../../../components/Settings/Preferences';
2020
import { previewTheme } from '../../../utils';
21+
import LanguageSelector from '../../../components/LanguageSelector';
2122

2223
type Props = {
2324
form: Form;
@@ -39,16 +40,21 @@ const UserForm = ({ form, setForm, setGitHubScreen, onContinue }: Props) => {
3940

4041
return (
4142
<>
42-
<div className="flex flex-col gap-3 text-center relative">
43-
<div className="w-11 h-11 absolute left-1/2 -top-16 transform -translate-x-1/2">
44-
<BloopLogo />
43+
<div className="w-full flex flex-col gap-3 text-center relative">
44+
<div className="absolute -top-32 left-0 right-0 flex justify-end">
45+
<LanguageSelector />
46+
</div>
47+
<div className="flex flex-col gap-3 text-center relative">
48+
<div className="w-11 h-11 absolute left-1/2 -top-16 transform -translate-x-1/2">
49+
<BloopLogo />
50+
</div>
51+
<h4 className="text-label-title">
52+
<Trans>Setup bloop</Trans>
53+
</h4>
54+
<p className="text-label-muted body-s">
55+
<Trans>Please log into your GitHub account to complete setup</Trans>
56+
</p>
4557
</div>
46-
<h4 className="text-label-title">
47-
<Trans>Setup bloop</Trans>
48-
</h4>
49-
<p className="text-label-muted body-s">
50-
<Trans>Please log into your GitHub account to complete setup</Trans>
51-
</p>
5258
</div>
5359
<form className="flex flex-col gap-4 w-full">
5460
<TextInput

0 commit comments

Comments
 (0)