German language, and dayjs i18n

crabfit-frontend/public/i18n/de/common.json

@@ -0,0 +1,58 @@
+{
+  "name": "Crab Fit",
+  "tagline": "Erstelle dein eigenes",
+  "cta": "Erstellen Sie Ihren eigenen Crab Fit!",
+  "created": "Erstellt {{date}}",
+  "donate": {
+    "info": "Vielen dank, dass Sie Crab Fit verwenden. Wenn es Ihnen gefällt, können Sie spenden.",
+    "button": "Spenden",
+    "title": "Jeder betrag zählt :)",
+    "options": {
+      "$2": "Spenden $2",
+      "$5": "Spenden $5",
+      "$10": "Spenden $10",
+      "choose": "Wählen Sie einen spendenbetrag"
+    },
+    "messages": {
+      "about": "Wussten Sie, dass Crab Fit mehr als $100 pro monat kostet? Wenn es Ihnen heraus überhaupt geholfen hat, zu prüfen, um hilfe zu spenden hält es läuft. 🦀",
+      "success": "Vielen dank für Ihre spende! Ohne dich wäre Crab Fit nicht kostenlos, also danke und sei weiterhin super toll!",
+      "error": "Kann nicht spende durch Google machen. Bitte versuchen Sie über die website crab.fit zu spenden 🦀"
+    }
+  },
+  "options": {
+    "name": "Optionen",
+    "weekStart": {
+      "label": "Woche beginnt am",
+      "options": {
+        "Sunday": "Sonntag",
+        "Monday": "Montag"
+      }
+    },
+    "timeFormat": {
+      "label": "Zeitformat",
+      "options": {
+        "12h": "12h",
+        "24h": "24h"
+      }
+    },
+    "theme": {
+      "label": "Thema",
+      "options": {
+        "System": "System",
+        "Light": "Hell",
+        "Dark": "Dunkel"
+      }
+    },
+    "highlight": {
+      "label": "Markieren Sie höchste Verfügbarkeit",
+      "title": "Stellen Sie die höchste Verfügbarkeit auf dem heatmap abheben",
+      "options": {
+        "Off": "Aus",
+        "On": "Auf"
+      }
+    },
+    "language": {
+      "label": "Sprache"
+    }
+  }
+}

crabfit-frontend/public/i18n/de/event.json

@@ -0,0 +1,63 @@
+{
+  "available": "können",
+
+  "nav": {
+    "title": "Klicken sie zum kopieren",
+    "copied": "Kopiert!",
+    "shareinfo": "Kopieren Sie den link zu dieser seite oder teilen sie ihn per <1>E-Mail</1>.",
+    "shareinfo_alt": "Klicken Sie auf den link oben, um ihn in Ihre zwischenablage zu kopieren oder per <1>E-Mail</1> zu teilen.",
+    "email_subject": "Ablaufplanung {{event_name}}",
+    "email_body": "Besuchen Sie diesen link, um Ihre Verfügbarkeiten einzugeben:"
+  },
+  "form": {
+    "signed_out": "Melden Sie sich an, um Ihre Verfügbarkeit hinzuzufügen",
+    "signed_in": "Als {{name}} angemeldet",
+
+    "name": "Dein Name",
+    "password": "Passwort (optional)",
+    "button": "Anmeldung",
+    "info": "Diese angaben gelten nur für diese veranstaltung. Verwenden Sie ein Passwort, um zu verhindern, dass andere Ihre Verfügbarkeit ändern.",
+
+    "timezone": "Deine Zeitzone",
+
+    "errors": {
+      "password_incorrect": "Passwort ist inkorrekt. Überprüfen Sie, ob Ihr name richtig geschrieben ist.",
+      "unknown": "Einloggen fehlgeschlagen. Bitte versuche es erneut."
+    },
+
+    "created_in_timezone": "Diese veranstaltung wurde in der zeitzone <strong>{{timezone}}</strong> erstellt. <3>Klicken Sie hier</3> um es zu verwenden.",
+    "local_timezone": "Ihre lokale zeitzone wird als <strong>{{timezone}}</strong> erkannt. <3>Klicken Sie hier</3> um es zu verwenden."
+  },
+  "offline": {
+    "title": "Du bist offline",
+    "body": "Ein Crab Fit funktioniert nicht offline.<br />Stellen Sie sicher, dass Sie mit dem internet verbunden sind, und versuchen Sie es erneut."
+  },
+  "error": {
+    "title": "Event nicht gefunden",
+    "body": "Überprüfen Sie, ob die von Ihnen eingegebene URL korrekt ist."
+  },
+
+  "tabs": {
+    "you": "Ihre Verfügbarkeit",
+    "you_tooltip": "Melden Sie sich an, um Ihre Verfügbarkeit festzulegen",
+    "group": "Gruppenverfügbarkeit"
+  },
+
+  "group": {
+    "legend_tooltip": "Klicken Sie hier, um die höchste Verfügbarkeit hervorzuheben",
+    "info1": "Bewegen Sie den Mauszeiger oder tippen Sie auf den Kalender unten, um zu sehen, wer verfügbar ist",
+    "info2": "Klicken Sie auf die Namen unten, um die Personen einzeln anzuzeigen"
+  },
+
+  "you": {
+    "info": "Klicken und ziehen Sie den Kalender unten, um Ihre Verfügbarkeit festzulegen",
+    "google_cal": {
+      "login": "Mit Google Kalender synchronisieren",
+      "logout": "ausloggen",
+      "select_all": "Wählen Sie Alle",
+      "select_none": "Wählen Sie keine",
+      "info": "Durch den Import wird Ihre aktuelle Verfügbarkeit überschrieben",
+      "button": "Verfügbarkeit importieren"
+    }
+  }
+}

crabfit-frontend/public/i18n/de/home.json

@@ -0,0 +1,57 @@
+{
+  "create": "ERSTELLEN SIE EIN",
+  "recently_visited": "Kürzlich besucht",
+  "nav": {
+    "about": "Info",
+    "donate": "Spenden"
+  },
+  "form": {
+    "name": {
+      "label": "Geben Sie Ihrer veranstaltung einen namen!",
+      "sublabel": "Oder lassen Sie das feld leer, um eine zu generieren"
+    },
+    "dates": {
+      "label": "Welche saten könnten funktionieren?",
+      "sublabel": "Klicken und ziehen Sie zur auswahl",
+      "options": {
+        "specific": "Bestimmte daten",
+        "week": "Tage der woche"
+      },
+      "tooltips": {
+        "previous": "Vorheriger monat",
+        "next": "Nächsten monat",
+        "today": "heute"
+      }
+    },
+    "times": {
+      "label": "Welche zeiten könnten funktionieren?",
+      "sublabel": "Klicken und ziehen Sie, um einen zeitbereich auszuwählen"
+    },
+    "timezone": {
+      "label": "Und die zeitzone",
+      "defaultOption": "Wählen..."
+    },
+
+    "button": "Erstellen",
+    "errors": {
+      "no_dates": "Es sind keine daten ausgewählt",
+      "same_times": "Die startzeiten und endzeiten können nicht gleich sein",
+      "no_time": "Es ist keine zeit ausgewählt",
+      "unknown": "Etwas ist schief gelaufen. Bitte versuchen Sie es später noch einmal."
+    }
+  },
+  "offline": "Sie können keine Crab Fit erstellen, wenn Sie keine internetverbindung haben. Bitte stellen Sie sicher, dass Sie verbunden sind.",
+
+  "about": {
+    "name": "Über Crab Fit",
+    "events": "Events erstellt",
+    "availabilities": "Verfügbarkeit eingegeben",
+    "content": {
+      "p1": "Crab Fit hilft Ihnen dabei, Ihre veranstaltung an die zeitpläne aller anzupassen. Erstellen Sie einfach oben eine veranstaltung und senden Sie den link an alle teilnehmer. Die ergebnisse werden live aktualisiert und Sie können eine Heatmap sehen, wann alle frei sind.<1/><2>Erfahren Sie mehr über Crab Fit</2>.",
+      "p2": "Viele Crab Fits erstellen? Holen Sie sich die <1>Chrome-Erweiterung</1> oder <3>Firefox-Erweiterung</3> für Ihren browser! Sie können die <5>Android-App</5> auch unterwegs auf Crab Fit herunterladen.",
+      "p3": "Crab Fit wurde von <1>Ben Grant</1> entwickelt und ist die moderne lösung für Ihre debatten zur planung von gruppenveranstaltungen.",
+      "p4": "Der code für Crab Fit ist open source. Wenn sie probleme finden oder einen beitrag leisten möchten, können Sie das <1>repository</1> besuchen. Durch die verwendung von Crab Fit stimmen sie den <3>datenschutzbestimmungen</3>.",
+      "p5": "Crab Fit kostet mehr als <strong>$100 pro monat</strong>. Erwägen sie unten zu spenden, wenn es Ihnen geholfen hat, damit es für alle kostenlos bleibt. 🦀"
+    }
+  }
+}

crabfit-frontend/public/i18n/en/common.json

@@ -52,11 +52,7 @@
       }
     },
     "language": {
-      "label": "Language",
+      "label": "Language"
-      "options": {
-        "en-US": "English (US)",
-        "ko": "Korean"
-      }
     }
   }
 }

crabfit-frontend/public/i18n/en/help.json

@@ -0,0 +1,23 @@
+{
+  "name": "How to Crab Fit",
+
+  "p1": "Crab Fit is a tool that helps you when planning events with friends or coworkers. You just create an event, enter your availability, send it out, and see when everyone is free!",
+  "p2": "See below for detailed steps of how to Crab Fit your event.",
+
+  "s1": "Step 1",
+
+  "p3": "Use the form at <1>crab.fit</1> to make a new event. You only need to put in the rough time period for when your event occurs here, not your availability.",
+  "p4": "For example, we'll use \"Jenny's Birthday Lunch\". Jenny wants her birthday lunch to happen on the same week as her birthday, the 15th of April, but she knows that not all of her friends are available on the 15th. She also doesn't want to do it on the weekend.",
+  "p5": "Jenny also knows that since it's a lunch event, it can't start before 11am or go any later than 5pm.",
+
+  "s2": "Step 2",
+
+  "p6": "Enter your availability for the event you just created.",
+  "p7": "In our example, Jenny now puts in her availability for her birthday lunch. She is free all week, except after 3pm on Tuesday and Wednesday, and before 1pm on Friday.",
+
+  "s3": "Step 3",
+
+  "p8": "Send the link to everyone you want to come.",
+  "p9": "After Jenny has sent the link to her friends and waited for them to also fill out their availabilities, she can now easily see them all on the heatmap below and choose the darkest area for a time that suits everyone!",
+  "p10": "In this example, 1pm to 3pm on Friday the 16th works for all Jenny's friends."
+}

crabfit-frontend/public/i18n/en/privacy.json

@@ -0,0 +1,52 @@
+{
+  "name": "Privacy Policy",
+
+  "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.",
+  "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.",
+  "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.",
+
+  "h1": "Information Collection and Use",
+
+  "p4": "The Service uses third party services that may collect information used to identify you.",
+  "p5": "Links to privacy policies of the third party service providers used by the Service:",
+  "link": "Google Play Services",
+
+  "h2": "Log Data",
+
+  "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.",
+
+  "h3": "Cookies",
+
+  "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.",
+  "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.",
+
+  "h4": "Service Providers",
+
+  "p9": "Third-party companies may be employed for the following reasons:",
+  "l1": "To facilitate the Service",
+  "l2": "To provide the Service on our behalf",
+  "l3": "To perform Service-related services",
+  "l4": "To assist in analyzing how the Service is used",
+  "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.",
+
+  "h5": "Security",
+
+  "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.",
+
+  "h6": "Links to Other Sites",
+
+  "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.",
+
+  "h7": "Children's Privacy",
+
+  "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us</1> so that this information can be removed.",
+
+  "h8": "Changes to This Privacy Policy",
+
+  "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.",
+  "p15": "This policy is effective as of 2021-04-20",
+
+  "h9": "Contact Us",
+
+  "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com</1>."
+}

crabfit-frontend/public/i18n/ko/common.json

@@ -52,11 +52,7 @@
       }
     },
     "language": {
-      "label": "언어",
+      "label": "언어"
-      "options": {
-        "en-US": "영어 (미국)",
-        "ko": "한국어"
-      }
     }
   }
 }

crabfit-frontend/public/robots.txt

@@ -3,6 +3,7 @@ User-agent: *
 Allow: /$
 Allow: /how-to$
 Allow: /privacy$
+Allow: /sitemap.xml$
 Disallow: *
 
 sitemap: https://crab.fit/sitemap.xml

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) {
+    let lang = i18n.language;
-      dayjs.updateLocale('en', {
+    if (Array.from(supportedLocales).includes(i18n.language)) {
-        weekStart: weekStart,
+      require(`dayjs/locale/${i18n.language}`);
-        weekdaysShort: weekStart ? 'Mon_Tue_Wed_Thu_Fri_Sat_Sun'.split('_') : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+      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' ? {
+          options={{
-            cimode: 'DEV',
+            'en': 'English (US)',
-            english: 'en-US'
+            'de': 'Deutsch',
-          } : t('options.language.options', { returnObjects: true })}
+            '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"]