German language, and dayjs i18n

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -70,10 +70,10 @@ const AvailabilityViewer = ({
           total={people.filter(p => p.availability.length > 0).length}
           onSegmentFocus={count => setFocusCount(count)}
         />
-        <Center>{t('event:group.info1')}</Center>
+        <Center style={{textAlign: 'center'}}>{t('event:group.info1')}</Center>
         {people.length > 1 && (
           <>
-            <Center>{t('event:group.info2')}</Center>
+            <Center style={{textAlign: 'center'}}>{t('event:group.info2')}</Center>
             <People>
               {people.map((person, i) =>
                 <Person

crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts

@@ -113,6 +113,7 @@ export const Tooltip = styled.div`
 	max-width: 200px;
 	pointer-events: none;
   z-index: 100;
+  user-select: none;
 `;
 
 export const TooltipTitle = styled.span`
@@ -195,6 +196,7 @@ export const Person = styled.button`
   background: transparent;
   cursor: pointer;
   padding: 2px 8px;
+  user-select: none;
 
   ${props => props.filtered && `
     background: ${props.theme.primary};

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -29,14 +29,10 @@ export const Top = styled.button`
 	left: 0;
 	user-select: none;
 	transition: top .15s;
-	outline: none;
 
 	&:active {
 		top: 0;
 	}
-	&:focus-visible {
-		filter: brightness(1.2);
-	}
 
 	${props => props.isLoading && `
 		text-shadow: none;

crabfit-frontend/src/components/CalendarField/CalendarField.tsx

@@ -19,6 +19,8 @@ import {
 	Day,
 } from './calendarFieldStyle';
 
+import supportedLocales from 'res/dayjs_locales.json';
+
 dayjs.extend(isToday);
 dayjs.extend(localeData);
 dayjs.extend(updateLocale);
@@ -55,7 +57,7 @@ const CalendarField = ({
 	...props
 }) => {
   const weekStart = useSettingsStore(state => state.weekStart);
-  const { t } = useTranslation('home');
+  const { t, i18n } = useTranslation('home');
 
 	const [type, setType] = useState(0);
 
@@ -88,14 +90,22 @@ const CalendarField = ({
 	};
 
 	useEffect(() => {
-    if (weekStart !== dayjs.Ls.en.weekStart) {
-      dayjs.updateLocale('en', {
-        weekStart: weekStart,
-        weekdaysShort: weekStart ? 'Mon_Tue_Wed_Thu_Fri_Sat_Sun'.split('_') : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+    let lang = i18n.language;
+    if (Array.from(supportedLocales).includes(i18n.language)) {
+      require(`dayjs/locale/${i18n.language}`);
+      dayjs.locale(i18n.language);
+      lang = i18n.language;
+    } else {
+      // Fallback
+      lang = 'en';
+    }
+    if (weekStart !== dayjs.Ls[lang].weekStart) {
+      dayjs.updateLocale(lang, {
+        weekStart,
       });
     }
 		setDates(calculateMonth(month, year, weekStart));
-	}, [weekStart, month, year]);
+	}, [weekStart, month, year, i18n.language]);
 
 	return (
 		<Wrapper>
@@ -155,7 +165,7 @@ const CalendarField = ({
     			</CalendarHeader>
 
     			<CalendarDays>
-    				{dayjs.weekdaysShort().map(name =>
+    				{(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort()).map(name =>
     					<Day key={name}>{name}</Day>
     				)}
     			</CalendarDays>

crabfit-frontend/src/components/Settings/Settings.tsx

@@ -88,10 +88,12 @@ const Settings = () => {
           label={t('options.language.label')}
           name="language"
           id="language"
-          options={i18n.language === 'cimode' ? {
-            cimode: 'DEV',
-            english: 'en-US'
-          } : t('options.language.options', { returnObjects: true })}
+          options={{
+            'en': 'English (US)',
+            'de': 'Deutsch',
+            'ko': '한국어',
+            ...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
+          }}
           small
           value={i18n.language}
           onChange={event => i18n.changeLanguage(event.target.value)}

crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts

@@ -9,6 +9,10 @@ export const ToggleContainer = styled.div`
   border: 1px solid ${props => props.theme.primary};
   border-radius: 3px;
   overflow: hidden;
+  &:focus-within {
+    outline: Highlight auto 1px;
+    outline: -webkit-focus-ring-color auto 1px;
+  }
 `;
 
 export const StyledLabel = styled.label`

crabfit-frontend/src/i18n/index.ts

@@ -8,7 +8,7 @@ i18n
   .use(Backend)
   .use(initReactI18next)
   .init({
-    fallbackLng: 'en-US',
+    fallbackLng: 'en',
     debug: process.env.NODE_ENV !== 'production',
     interpolation: {
       escapeValue: false,

crabfit-frontend/src/pages/Event/Event.tsx

@@ -39,6 +39,7 @@ import { useSettingsStore, useRecentsStore } from 'stores';
 
 import logo from 'res/logo.svg';
 import timezones from 'res/timezones.json';
+import supportedLocales from 'res/dayjs_locales.json';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -51,7 +52,7 @@ const Event = (props) => {
 
   const addRecent = useRecentsStore(state => state.addRecent);
 
-  const { t } = useTranslation(['common', 'event']);
+  const { t, i18n } = useTranslation(['common', 'event']);
 
 	const { register, handleSubmit } = useForm();
 	const { id } = props.match.params;
@@ -74,6 +75,13 @@ const Event = (props) => {
 
 	const [copied, setCopied] = useState(null);
 
+  useEffect(() => {
+    if (Array.from(supportedLocales).includes(i18n.language)) {
+      require(`dayjs/locale/${i18n.language}`);
+      dayjs.locale(i18n.language);
+    }
+  }, [i18n.language]);
+
 	useEffect(() => {
 		const fetchEvent = async () => {
 			try {

crabfit-frontend/src/res/dayjs_locales.json

@@ -0,0 +1 @@
+["af","am","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","be","bg","bi","bm","bn","bo","br","bs","ca","cs","cv","cy","da","de-at","de-ch","de","dv","el","en-au","en-ca","en-gb","en-ie","en-il","en-in","en-nz","en-sg","en-tt","en","eo","es-do","es-pr","es-us","es","et","eu","fa","fi","fo","fr-ca","fr-ch","fr","fy","ga","gd","gl","gom-latn","gu","he","hi","hr","ht","hu","hy-am","id","is","it-ch","it","ja","jv","ka","kk","km","kn","ko","ku","ky","lb","lo","lt","lv","me","mi","mk","ml","mn","mr","ms-my","ms","mt","my","nb","ne","nl-be","nl","nn","oc-lnc","pa-in","pl","pt-br","pt","ro","ru","rw","sd","se","si","sk","sl","sq","sr-cyrl","sr","ss","sv","sw","ta","te","tet","tg","th","tk","tl-ph","tlh","tr","tzl","tzm-latn","tzm","ug-cn","uk","ur","uz-latn","uz","vi","x-pseudo","yo","zh-cn","zh-hk","zh-tw","zh"]