Make pwa app

public/manifest.webmanifest.json

@@ -0,0 +1,24 @@
+{
+  "short_name": "Cards",
+  "name": "Cards",
+  "description": "Track credit card payments",
+  "icons": [
+    {
+      "src": "/cards_192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/cards_512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#FFFFFF",
+  "display": "standalone",
+  "scope": "/",
+  "orientation": "portrait"
+}

src/app/layout.tsx

@@ -15,13 +15,20 @@ const poppins = Poppins({
 export const metadata: Metadata = {
   title: 'Cards',
   description: 'Track credit card payments',
+  applicationName: 'Cards',
+  manifest: '/manifest.webmanifest.json',
   robots: {
     index: false,
     follow: false,
   },
   icons: {
-    icon: '/favicon.ico',
-    apple: '/favicon.ico',
+    icon: '/cards_192.png',
+    apple: '/apple-touch-icon.png',
+  },
+  openGraph: {
+    type: 'website',
+    locale: 'en',
+    title: 'Cards',
   },
 };
 

src/components/common/card-name.tsx

@@ -10,7 +10,7 @@ interface Props {
 const CardName = ({ cardBrandId, cardName, className }: Props) => (
   <div className={clsx('flex items-center gap-2', className)}>
     <Avatar className="h-5 w-5">
-      <AvatarImage src={`/brands/${cardBrandId}.png`} />
+      <AvatarImage src={`/brands/${cardBrandId}.png`} className="bg-white" />
     </Avatar>
     <span className="accent">{cardName}</span>
   </div>