feat: update main component, favicon and font (#187)

* fix: update favicons and main with page wrapper

* fix: cleanup

* fix: use progress html tag for storage

.github/workflows/ci.yml

@@ -34,5 +34,5 @@ jobs:
           VITE_GRAASP_BUILDER_HOST: ${{ vars.VITE_GRAASP_BUILDER_HOST }}
           VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
-          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_GRAASP_ANALYTICS_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}

.github/workflows/cypress.yml

@@ -43,7 +43,7 @@ jobs:
           VITE_GRAASP_AUTH_HOST: ${{ vars.VITE_GRAASP_AUTH_HOST }}
           VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
-          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_GRAASP_ANALYTICS_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
           VITE_GRAASP_REDIRECTION_HOST: ${{ vars.VITE_GRAASP_REDIRECTION_HOST }}
 

.github/workflows/deploy-dev.yml

@@ -32,7 +32,7 @@ jobs:
           VITE_GRAASP_BUILDER_HOST: ${{ vars.VITE_GRAASP_BUILDER_HOST }}
           VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
-          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_GRAASP_ANALYTICS_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SENTRY_ENV: ${{ vars.VITE_SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
           # VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}

.github/workflows/deploy-prod.yml

@@ -35,7 +35,7 @@ jobs:
           VITE_GRAASP_BUILDER_HOST: ${{ vars.VITE_GRAASP_BUILDER_HOST }}
           VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
-          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_GRAASP_ANALYTICS_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SENTRY_ENV: ${{ vars.VITE_SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
           VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}

.github/workflows/deploy-stage.yml

@@ -35,7 +35,7 @@ jobs:
           VITE_GRAASP_BUILDER_HOST: ${{ vars.VITE_GRAASP_BUILDER_HOST }}
           VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
-          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_GRAASP_ANALYTICS_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SENTRY_ENV: ${{ vars.VITE_SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
           VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}

index.html

@@ -9,11 +9,33 @@
       name="version-info"
       content="%VITE_VERSION% @ %VITE_BUILD_TIMESTAMP%"
     />
-    <link rel="icon" type="image/svg+xml" href="/graasp.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/graasp.svg?v=1" /> -->
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-touch-icon.png?v=1"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon-32x32.png?v=1"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon-16x16.png?v=1"
+    />
+    <link rel="manifest" href="/site.webmanifest?v=1" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=1" color="#f2c955" />
+    <link rel="shortcut icon" href="/favicon.ico?v=1" />
+    <meta name="msapplication-TileColor" content="#f2c955" />
     <!-- Load Roboto font from Google fonts -->
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
     />
     <title>Graasp Account</title>
   </head>

package.json

@@ -16,7 +16,7 @@
     "@graasp/query-client": "3.0.0",
     "@graasp/sdk": "4.2.1",
     "@graasp/translations": "1.25.3",
-    "@graasp/ui": "4.12.0",
+    "@graasp/ui": "4.14.2",
     "@mui/icons-material": "5.15.14",
     "@mui/lab": "5.0.0-alpha.169",
     "@mui/material": "5.15.14",

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png?v=1"/>
+            <TileColor>#f2c955</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Graasp Account",
+    "short_name": "Account",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png?v=1",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png?v=1",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/App.tsx

@@ -6,8 +6,7 @@ import { Alert } from '@mui/material';
 
 import { CustomInitialLoader, withAuthorization } from '@graasp/ui';
 
-import MainProviders from './components/context/MainProviders';
-import { GRAASP_AUTH_HOST } from './config/constants';
+import { GRAASP_AUTH_HOST } from './config/env';
 import {
   AVATAR_SETTINGS_PATH,
   HOME_PATH,
@@ -20,6 +19,7 @@ import { hooks } from './config/queryClient';
 import AvatarSettingsScreen from './pages/AvatarSettingsScreen';
 import DestructiveSettingsScreen from './pages/DestructiveSettingsScreen';
 import MemberScreen from './pages/MemberScreen';
+import PageWrapper from './pages/PageWrapper';
 import PasswordSettingsScreen from './pages/PasswordSettingsScreen';
 import PublicProfileScreen from './pages/PublicProfileScreen';
 import StorageScreen from './pages/StorageScreen';
@@ -69,9 +69,9 @@ export const App = (): JSX.Element => {
 
   if (currentMember) {
     return (
-      <MainProviders>
-        <Router>
-          <Routes>
+      <Router>
+        <Routes>
+          <Route element={<PageWrapper />}>
             <Route
               path={HOME_PATH}
               element={<MemberProfileWithAuthorization />}
@@ -93,9 +93,9 @@ export const App = (): JSX.Element => {
               element={<DestructiveSettingsWithAuthorization />}
             />
             <Route path={STORAGE_PATH} element={<StorageWithAuthorization />} />
-          </Routes>
-        </Router>
-      </MainProviders>
+          </Route>
+        </Routes>
+      </Router>
     );
   }
 

src/components/common/UserSwitchWrapper.tsx

@@ -1,7 +1,8 @@
 import { Member } from '@graasp/sdk';
 import { UserSwitchWrapper as GraaspUserSwitch } from '@graasp/ui';
 
-import { GRAASP_AUTH_HOST } from '../../config/constants';
+import { GRAASP_AUTH_HOST } from '@/config/env';
+
 import { HOME_PATH } from '../../config/paths';
 import { hooks, mutations } from '../../config/queryClient';
 import MemberAvatar from '../main/MemberAvatar';