Update deps & Add language autodetector

Tested to work, probably have to set up buttons for this too, anyway

package.json

@@ -25,6 +25,7 @@
     "classnames": "^2.3.2",
     "formik": "^2.4.5",
     "i18next": "23.10.1",
+    "i18next-browser-languagedetector": "^7.2.1",
     "i18next-chained-backend": "^4.6.2",
     "i18next-http-backend": "^2.5.0",
     "i18next-localstorage-backend": "^4.2.0",

src/assets/locale/fi.json

@@ -12,7 +12,7 @@
   "footer.authenticatedWithMtls": "Tunnistautunut mTLS:llä",
   "footer.proudlyServedBy": "Sovelluksen tarjoaa:",
   "footer.allRightsReservedFDF": "FDF-UI, PV:n logo & taustakuvat:",
-  "footer.allRightsReservedFDFnotice": "Puolustusvoimat. Kaikki oikeudet pidätetään",
+  "footer.allRightsReservedFDFnotice": "Puolustusvoimat. Kaikki oikeudet pidätetään.",
   "footer.allRightsReservedPVATK": "PVATK. Kaikki oikeudet pidätetään.",
   "footer.feedbackForm": "Kerro palautetta tai ideoita kehittäjille lomakkeella!",
 

src/i18n.ts

@@ -3,13 +3,18 @@ import { initReactI18next } from "react-i18next";
 import resourcesToBackend from "i18next-resources-to-backend";
 import ChainedBackend from "i18next-chained-backend";
 import LocalStorageBackend from "i18next-localstorage-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
 
 void i18n
   .use(ChainedBackend)
   .use(initReactI18next)
+  .use(LanguageDetector)
   .init({
-    lng: "fi",
-    fallbackLng: "fi",
+    fallbackLng: "en",
+    detection: {
+      order: ["navigator", "localStorage"],
+      caches: ["localStorage"],
+    },
     backend: {
       backends: [
         LocalStorageBackend,

src/views/servicetak/ServiceTak.tsx

@@ -128,6 +128,7 @@ export function ServiceTak() {
                   variant={{ width: "full" }}
                   onClick={() => navigate("/app/services/tak/quickstart")}
                   styling="m-1 px-2"
+                  className="w-full h-full"
                 >
                   <div className="flex items-center justify-center w-full h-full">
                     <img src={phone} alt="keys" className="h-5 w-5 mr-2" />
@@ -141,6 +142,7 @@ export function ServiceTak() {
                   variant={{ width: "full" }}
                   onClick={() => navigate("/app/services/tak/usage")}
                   styling="m-1 px-2"
+                  className="w-full h-full"
                 >
                   <div className="flex items-center justify-center w-full h-full">
                     <img src={usage} alt="keys" className="h-5 w-5 mr-2" />