fix pwa and theme colors (#5800)

index.html

@@ -21,12 +21,9 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="apple-mobile-web-app-title" content="Care" />
-    <meta name="theme-color" content="#33BB17" />
-    <link rel="shortcut icon" href="/favicon-dark.ico" type="image/x-icon" />
-    <link
-      rel="apple-touch-icon"
-      href="https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png"
-    />
+    <meta name="theme-color" content="#0e9f6e" />
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png">
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

src/App.tsx

@@ -79,7 +79,7 @@ const App: React.FC = () => {
     if (darkThemeMq.matches) {
       favicon.href = "/favicon-light.ico";
     } else {
-      favicon.href = "/favicon-dark.ico";
+      favicon.href = "/favicon.ico";
     }
   }, []);
 

vite.config.ts

@@ -19,24 +19,31 @@ export default defineConfig({
       manifest: {
         name: "Care",
         short_name: "Care",
-        theme_color: "#33bb17",
-        background_color: "#2196f3",
+        theme_color: "#0e9f6e",
+        background_color: "#ffffff",
+        display: "standalone",
         icons: [
           {
-            src: "https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png",
-            sizes: "192x192",
+            src: "images/icons/pwa-64x64.png",
+            sizes: "64x64",
             type: "image/png",
-            purpose: "any maskable",
           },
           {
-            src: "https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png",
+            src: "images/icons/pwa-192x192.png",
             sizes: "192x192",
             type: "image/png",
           },
           {
-            src: "https://cdn.coronasafe.network/care-manifest/images/icons/icon-512x512.png",
+            src: "images/icons/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any",
+          },
+          {
+            src: "images/icons/maskable-icon-512x512.png",
             sizes: "512x512",
             type: "image/png",
+            purpose: "maskable",
           },
         ],
       },