fix(frontend): theme-color meta tag (#2420)

* fix(frontend): theme-color meta tag

* fix(frontend): add theme-color to offline.html

* fix(frontend): reorder application-name meta tag instead

* fix(lang): regenerate strings

* refactor: optimize Trakt logo SVG

public/offline.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1f2937" />
 
     <title>You are offline</title>
 

src/assets/services/trakt.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.8 144.8" enable-background="new 0 0 144.8 144.8"><g><circle fill="#FFFFFF" cx="72.4" cy="72.4" r="72.4"/><path fill="#ED2224" d="M29.5,111.8c10.6,11.6,25.9,18.8,42.9,18.8c8.7,0,16.9-1.9,24.3-5.3L56.3,85L29.5,111.8z"/><path fill="#ED2224" d="M56.1,60.6L25.5,91.1L21.4,87l32.2-32.2h0l37.6-37.6c-5.9-2-12.2-3.1-18.8-3.1c-32.2,0-58.3,26.1-58.3,58.3 c0,13.1,4.3,25.2,11.7,35l30.5-30.5l2.1,2l43.7,43.7c0.9-0.5,1.7-1,2.5-1.6L56.3,72.7L27,102l-4.1-4.1l33.4-33.4l2.1,2l51,50.9 c0.8-0.6,1.5-1.3,2.2-1.9l-55-55L56.1,60.6z"/><path fill="#ED1C24" d="M115.7,111.4c9.3-10.3,15-24,15-39c0-23.4-13.8-43.5-33.6-52.8L60.4,56.2L115.7,111.4z M74.5,66.8l-4.1-4.1 l28.9-28.9l4.1,4.1L74.5,66.8z M101.9,27.1L68.6,60.4l-4.1-4.1L97.8,23L101.9,27.1z"/><g><g><path fill="#ED2224" d="M72.4,144.8C32.5,144.8,0,112.3,0,72.4C0,32.5,32.5,0,72.4,0s72.4,32.5,72.4,72.4 C144.8,112.3,112.3,144.8,72.4,144.8z M72.4,7.3C36.5,7.3,7.3,36.5,7.3,72.4s29.2,65.1,65.1,65.1s65.1-29.2,65.1-65.1 S108.3,7.3,72.4,7.3z"/></g></g></g></svg>
+<svg viewBox="0 0 144.8 144.8" xmlns="http://www.w3.org/2000/svg"><circle cx="72.4" cy="72.4" r="72.4" fill="#fff"/><path d="M29.5,111.8c10.6,11.6,25.9,18.8,42.9,18.8c8.7,0,16.9-1.9,24.3-5.3L56.3,85L29.5,111.8z" fill="#ED2224"/><path d="m56.1 60.6l-30.6 30.5-4.1-4.1 32.2-32.2 37.6-37.6c-5.9-2-12.2-3.1-18.8-3.1-32.2 0-58.3 26.1-58.3 58.3 0 13.1 4.3 25.2 11.7 35l30.5-30.5 2.1 2 43.7 43.7c0.9-0.5 1.7-1 2.5-1.6l-48.3-48.3-29.3 29.3-4.1-4.1 33.4-33.4 2.1 2 51 50.9c0.8-0.6 1.5-1.3 2.2-1.9l-55-55-0.5 0.1z" fill="#ED2224"/><path d="m115.7 111.4c9.3-10.3 15-24 15-39 0-23.4-13.8-43.5-33.6-52.8l-36.7 36.6 55.3 55.2zm-41.2-44.6l-4.1-4.1 28.9-28.9 4.1 4.1-28.9 28.9zm27.4-39.7l-33.3 33.3-4.1-4.1 33.3-33.3 4.1 4.1z" fill="#ED1C24"/><path d="m72.4 144.8c-39.9 0-72.4-32.5-72.4-72.4s32.5-72.4 72.4-72.4 72.4 32.5 72.4 72.4-32.5 72.4-72.4 72.4zm0-137.5c-35.9 0-65.1 29.2-65.1 65.1s29.2 65.1 65.1 65.1 65.1-29.2 65.1-65.1-29.2-65.1-65.1-65.1z" fill="#ED2224"/></svg>

src/components/PWAHeader/index.tsx

@@ -4,7 +4,9 @@ interface PWAHeaderProps {
   applicationTitle?: string;
 }
 
-const PWAHeader: React.FC<PWAHeaderProps> = ({ applicationTitle }) => {
+const PWAHeader: React.FC<PWAHeaderProps> = ({
+  applicationTitle = 'Overseerr',
+}) => {
   return (
     <>
       <link
@@ -164,11 +166,7 @@ const PWAHeader: React.FC<PWAHeaderProps> = ({ applicationTitle }) => {
         href="/site.webmanifest"
         crossOrigin="use-credentials"
       />
-      <meta name="application-name" content={applicationTitle ?? 'Overseerr'} />
+      <meta name="apple-mobile-web-app-title" content={applicationTitle} />
-      <meta
-        name="apple-mobile-web-app-title"
-        content={applicationTitle ?? 'Overseerr'}
-      />
       <meta
         name="description"
         content="Request and Media Discovery Application"
@@ -176,6 +174,7 @@ const PWAHeader: React.FC<PWAHeaderProps> = ({ applicationTitle }) => {
       <meta name="format-detection" content="telephone=no" />
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="theme-color" content="#1f2937" />
+      <meta name="application-name" content={applicationTitle} />
     </>
   );
 };

src/i18n/locale/en.json

@@ -373,7 +373,7 @@
   "components.Settings.Notifications.NotificationsGotify.toastGotifyTestSuccess": "Gotify test notification sent!",
   "components.Settings.Notifications.NotificationsGotify.token": "Application Token",
   "components.Settings.Notifications.NotificationsGotify.url": "Server URL",
-  "components.Settings.Notifications.NotificationsGotify.validationTokenRequired": "You must provide a valid application token",
+  "components.Settings.Notifications.NotificationsGotify.validationTokenRequired": "You must provide an application token",
   "components.Settings.Notifications.NotificationsGotify.validationTypes": "You must select at least one notification type",
   "components.Settings.Notifications.NotificationsGotify.validationUrlRequired": "You must provide a valid URL",
   "components.Settings.Notifications.NotificationsGotify.validationUrlTrailingSlash": "URL must not end in a trailing slash",