diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index 9d53d472a..a2b231064 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -104,6 +104,7 @@ "green": "Green", "blue": "Blue", "custom": "Custom...", + "comingSoon": "Coming soon", "WorkInProgess": "Work in progress, May not work or be buggy, Please report any problems!", "poweredBy": "Powered by", "yes": "Yes", diff --git a/frontend/src/components/shared/LanguageSelector.tsx b/frontend/src/components/shared/LanguageSelector.tsx index 2ec563a72..3cf8b3b11 100644 --- a/frontend/src/components/shared/LanguageSelector.tsx +++ b/frontend/src/components/shared/LanguageSelector.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Menu, Button, ScrollArea, ActionIcon } from '@mantine/core'; +import { Menu, Button, ScrollArea, ActionIcon, Tooltip } from '@mantine/core'; import { useTranslation } from 'react-i18next'; import { supportedLanguages } from '../../i18n'; import LocalIcon from './LocalIcon'; @@ -33,6 +33,7 @@ interface LanguageItemProps { rippleEffect?: RippleEffect | null; pendingLanguage: string | null; compact: boolean; + disabled?: boolean; } const LanguageItem: React.FC = ({ @@ -43,8 +44,19 @@ const LanguageItem: React.FC = ({ onClick, rippleEffect, pendingLanguage, - compact + compact, + disabled = false }) => { + const { t } = useTranslation(); + + const label = disabled ? ( + +

{option.label}

+
+ ) : ( +

{option.label}

+ ); + return (
= ({ variant="subtle" size="sm" fullWidth - onClick={onClick} + onClick={disabled ? undefined : onClick} data-selected={isSelected} + disabled={disabled} styles={{ root: { borderRadius: '4px', @@ -71,17 +84,20 @@ const LanguageItem: React.FC = ({ backgroundColor: isSelected ? 'light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))' : 'transparent', - color: isSelected + color: disabled + ? 'light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3))' + : isSelected ? 'light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))' : 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-white))', transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', - '&:hover': { + cursor: disabled ? 'not-allowed' : 'pointer', + '&:hover': !disabled ? { backgroundColor: isSelected ? 'light-dark(var(--mantine-color-blue-2), var(--mantine-color-blue-7))' : 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))', transform: 'translateY(-1px)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', - } + } : {} }, label: { fontSize: '13px', @@ -95,7 +111,7 @@ const LanguageItem: React.FC = ({ } }} > - {option.label} + {label} {!compact && rippleEffect && pendingLanguage === option.value && (
= ({ position = 'bottom- >
- {languageOptions.map((option, index) => ( - handleLanguageChange(option.value, event)} - rippleEffect={rippleEffect} - pendingLanguage={pendingLanguage} - compact={compact} - /> - ))} + {languageOptions.map((option, index) => { + const isEnglishGB = option.value === 'en-GB'; // Currently only English GB has enough translations to use + const isDisabled = !isEnglishGB; + + return ( + handleLanguageChange(option.value, event)} + rippleEffect={rippleEffect} + pendingLanguage={pendingLanguage} + compact={compact} + disabled={isDisabled} + /> + ); + })}
@@ -274,4 +296,4 @@ const LanguageSelector: React.FC = ({ position = 'bottom- }; export default LanguageSelector; -export type { LanguageSelectorProps, LanguageOption, RippleEffect }; \ No newline at end of file +export type { LanguageSelectorProps, LanguageOption, RippleEffect };