Merge pull request #3279 from tloncorp/hm/tweak-icons

app: tweak icons
tloncorp · Feb 22, 2024 · c6715b8 · c6715b8
2 parents 2715429 + 14dceb4
commit c6715b8
Show file tree

Hide file tree

Showing 34 changed files with 63 additions and 169 deletions.
diff --git a/apps/tlon-web/index.html b/apps/tlon-web/index.html
@@ -1,21 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <title data-react-helmet="true">Loading...</title>
+    <title data-react-helmet="true">Tlon</title>
+    <link rel="icon" href="favicon.ico" sizes="32x32" />
+    <link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
     <meta name="theme-color" content="#ffffff" data-react-helmet="true" />
-    <link
-      rel="icon"
-      sizes="any"
-      type="image/svg+xml"
-      data-react-helmet="true"
-    />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF" />
     <meta name="mobile-web-app-capable" content="yes" />
   </head>
   <body

diff --git a/apps/tlon-web/public/apple-touch-icon.png b/apps/tlon-web/public/apple-touch-icon.png
diff --git a/apps/tlon-web/public/favicon.ico b/apps/tlon-web/public/favicon.ico
diff --git a/apps/tlon-web/public/groups-icon-192x192.png b/apps/tlon-web/public/groups-icon-192x192.png
diff --git a/apps/tlon-web/public/groups-icon-512x512.png b/apps/tlon-web/public/groups-icon-512x512.png
diff --git a/apps/tlon-web/public/groups.svg b/apps/tlon-web/public/groups.svg
diff --git a/apps/tlon-web/public/icon-192-maskable.png b/apps/tlon-web/public/icon-192-maskable.png
diff --git a/apps/tlon-web/public/icon-192.png b/apps/tlon-web/public/icon-192.png
diff --git a/apps/tlon-web/public/icon-512-maskable.png b/apps/tlon-web/public/icon-512-maskable.png
diff --git a/apps/tlon-web/public/icon-512.png b/apps/tlon-web/public/icon-512.png
diff --git a/apps/tlon-web/public/icon.svg b/apps/tlon-web/public/icon.svg
diff --git a/apps/tlon-web/public/inter-italic.var.woff2 b/apps/tlon-web/public/inter-italic.var.woff2
diff --git a/apps/tlon-web/public/inter-roman.var.woff2 b/apps/tlon-web/public/inter-roman.var.woff2
diff --git a/apps/tlon-web/public/manifest.json b/apps/tlon-web/public/manifest.json
@@ -0,0 +1,35 @@
+{
+  "name": "Tlon",
+  "short_name": "Tlon",
+  "description": "Start, host, and cultivate communities. Own your communications, organize your resources, and share documents. Tlon is a peer-to-peer collaboration tool built on Urbit that provides a few simple basics that communities can shape into something unique to their needs.",
+  "start_url": "/apps/groups/",
+  "scope": "/apps/groups/",
+  "id": "/apps/groups/",
+  "icons": [
+    {
+      "src": "./icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "./icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./icon-192-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/tlon-web/public/safari-pinned-tab.svg b/apps/tlon-web/public/safari-pinned-tab.svg
diff --git a/apps/tlon-web/public/source-code-pro.woff2 b/apps/tlon-web/public/source-code-pro.woff2
diff --git a/apps/tlon-web/src/app.tsx b/apps/tlon-web/src/app.tsx
@@ -16,7 +16,6 @@ import {
 } from 'react-router-dom';
 
 import { IS_MOCK } from '@/api';
-import tlonFavicon from '@/assets/favicon.ico';
 import NewChannelModal from '@/channels/NewChannel/NewChannelModal';
 import ChatChannel from '@/chat/ChatChannel';
 import ChatThread from '@/chat/ChatThread/ChatThread';
@@ -709,12 +708,6 @@ function RoutedApp() {
       <Router basename={basename()}>
         <Helmet>
           <title>Tlon</title>
-          <link
-            rel="icon"
-            href={tlonFavicon}
-            sizes="any"
-            type="image/svg+xml"
-          />
           <meta name="theme-color" content={userThemeColor} />
         </Helmet>
         <AppUpdateContext.Provider value={appUpdateContextValue}>

diff --git a/apps/tlon-web/src/assets/android-chrome-512x512.png b/apps/tlon-web/src/assets/android-chrome-512x512.png
diff --git a/apps/tlon-web/src/assets/apple-touch-icon.png b/apps/tlon-web/src/assets/apple-touch-icon.png
diff --git a/apps/tlon-web/src/assets/favicon.ico b/apps/tlon-web/src/assets/favicon.ico
diff --git a/apps/tlon-web/src/assets/groups.svg b/apps/tlon-web/src/assets/groups.svg
diff --git a/apps/tlon-web/src/assets/icon-192-maskable.png b/apps/tlon-web/src/assets/icon-192-maskable.png
diff --git a/apps/tlon-web/src/assets/icon-192.png b/apps/tlon-web/src/assets/icon-192.png
diff --git a/apps/tlon-web/src/assets/icon-512-maskable.png b/apps/tlon-web/src/assets/icon-512-maskable.png
diff --git a/apps/tlon-web/src/assets/icon-512.png b/apps/tlon-web/src/assets/icon-512.png
diff --git a/apps/tlon-web/src/assets/manifest.json b/apps/tlon-web/src/assets/manifest.json
diff --git a/apps/tlon-web/src/assets/mask-icon.svg b/apps/tlon-web/src/assets/mask-icon.svg
diff --git a/apps/tlon-web/src/assets/safari-pinned-tab.svg b/apps/tlon-web/src/assets/safari-pinned-tab.svg
diff --git a/apps/tlon-web/src/assets/talk.svg b/apps/tlon-web/src/assets/talk.svg
diff --git a/apps/tlon-web/src/assets/manifest.ts → apps/tlon-web/src/manifest.ts b/apps/tlon-web/src/assets/manifest.ts → apps/tlon-web/src/manifest.ts
@@ -17,6 +17,18 @@ export default {
       sizes: '192x192',
       type: 'image/png',
     },
+    {
+      src: './icon-512-maskable.png',
+      sizes: '512x512',
+      type: 'image/png',
+      purpose: 'maskable',
+    },
+    {
+      src: './icon-192-maskable.png',
+      sizes: '192x192',
+      type: 'image/png',
+      purpose: 'maskable',
+    },
   ],
   theme_color: '#ffffff',
   background_color: '#ffffff',

diff --git a/apps/tlon-web/src/styles/fonts.css b/apps/tlon-web/src/styles/fonts.css
diff --git a/apps/tlon-web/src/styles/index.css b/apps/tlon-web/src/styles/index.css
@@ -1,5 +1,3 @@
-@import './fonts';
-
 /**
 * See: https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor=
 */

diff --git a/apps/tlon-web/tokens.json b/apps/tlon-web/tokens.json
@@ -134,10 +134,6 @@
       "type": "boxShadow"
     },
     "fontFamilies": {
-      "inter": {
-        "value": "Inter",
-        "type": "fontFamilies"
-      },
       "source-code-pro": {
         "value": "Source Code Pro",
         "type": "fontFamilies"

diff --git a/apps/tlon-web/vite.config.ts b/apps/tlon-web/vite.config.ts
@@ -9,7 +9,7 @@ import { BuildOptions, defineConfig, loadEnv } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 
 import packageJson from './package.json';
-import manifest from './src/assets/manifest';
+import manifest from './src/manifest';
 
 // https://vitejs.dev/config/
 export default ({ mode }: { mode: string }) => {