Merge pull request #858 from CodeForAfrica/hotfix/roboshield_favicon

[Hotfix] @/roboshield Add missing favicons
CodeForAfrica · Aug 23, 2024 · 69427fe · 69427fe
2 parents 8a601b6 + d709784
commit 69427fe
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 11 deletions.
diff --git a/apps/civicsignalblog/src/pages/_document.page.js b/apps/civicsignalblog/src/pages/_document.page.js
@@ -2,6 +2,7 @@ import createEmotionServer from "@emotion/server/create-instance";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import React from "react";
 
+import theme from "@/civicsignalblog/theme";
 import createEmotionCache from "@/civicsignalblog/utils/createEmotionCache";
 
 class MyDocument extends Document {
@@ -44,7 +45,7 @@ class MyDocument extends Document {
           <link rel="manifest" href="/site.webmanifest" />
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1020e1" />
           <meta name="msapplication-TileColor" content="#2b5797" />
-          <meta name="theme-color" content="#ffffff" />
+          <meta name="theme-color" content={theme.palette.primary.main} />
           <meta name="emotion-insertion-point" content="" />
           {this.props.emotionStyleTags}
         </Head>

diff --git a/apps/roboshield/package.json b/apps/roboshield/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roboshield",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": true,
   "scripts": {
     "build-server": "tsc --project tsconfig.server.json",

diff --git a/apps/roboshield/public/android-chrome-192x192.png b/apps/roboshield/public/android-chrome-192x192.png
diff --git a/apps/roboshield/public/android-chrome-512x512.png b/apps/roboshield/public/android-chrome-512x512.png
diff --git a/apps/roboshield/public/apple-touch-icon.png b/apps/roboshield/public/apple-touch-icon.png
diff --git a/apps/roboshield/public/browserconfig.xml b/apps/roboshield/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/apps/roboshield/public/favicon-16x16.png b/apps/roboshield/public/favicon-16x16.png
diff --git a/apps/roboshield/public/favicon-32x32.png b/apps/roboshield/public/favicon-32x32.png
diff --git a/apps/roboshield/public/mstile-150x150.png b/apps/roboshield/public/mstile-150x150.png
diff --git a/apps/roboshield/public/safari-pinned-tab.svg b/apps/roboshield/public/safari-pinned-tab.svg
diff --git a/apps/roboshield/public/site.webmanifest b/apps/roboshield/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "TrustLab's RoboShield",
+  "short_name": "RoboShield",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#1020E1",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/roboshield/src/pages/_document.tsx b/apps/roboshield/src/pages/_document.tsx
@@ -1,24 +1,46 @@
-import * as React from "react";
-import {
-  Html,
-  Head,
-  Main,
-  NextScript,
-  DocumentProps,
-  DocumentContext,
-} from "next/document";
 import {
   DocumentHeadTags,
   DocumentHeadTagsProps,
   documentGetInitialProps,
 } from "@mui/material-nextjs/v14-pagesRouter";
+import {
+  DocumentContext,
+  DocumentProps,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from "next/document";
+
+import theme from "@/roboshield/theme";
 
 export default function MyDocument(
   props: DocumentProps & DocumentHeadTagsProps,
 ) {
   return (
     <Html lang="en">
       <Head>
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1020e1" />
+        <meta name="msapplication-TileColor" content="#2b5797" />
+        <meta name="theme-color" content={theme.palette.primary.main} />
         <link rel="shortcut icon" href="/favicon.ico" />
         <meta name="emotion-insertion-point" content="" />
         <DocumentHeadTags {...props} />