feat(web): use svg logo instead of png (#970)

* add fonts files to workbox

* remove logo.png and touches manifest assets

* install vite-plugin-svgr to import svg as react components

* move logo.svg from public to src

* replace logo.png to logo.svg

---------

Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>

web/package.json

@@ -74,6 +74,7 @@
     "tailwindcss": "^3.1.3",
     "typescript": "^4.7.3",
     "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0",
     "vite-plugin-pwa": "^0.14.6",
     "workbox-window": "^6.5.4",
     "zod": "^3.21.4",

web/pnpm-lock.yaml

@@ -146,6 +146,9 @@ dependencies:
   vite-plugin-pwa:
     specifier: ^0.14.6
     version: 0.14.6(vite@4.3.9)(workbox-build@6.5.4)(workbox-window@6.5.4)
+  vite-plugin-svgr:
+    specifier: ^3.2.0
+    version: 3.2.0(rollup@2.79.1)(vite@4.3.9)
   workbox-window:
     specifier: ^6.5.4
     version: 6.5.4
@@ -1826,6 +1829,21 @@ packages:
       rollup: 2.79.1
     dev: false
 
+  /@rollup/pluginutils@5.0.2(rollup@2.79.1):
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.1
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.79.1
+    dev: false
+
   /@rollup/pluginutils@5.0.2(rollup@3.21.5):
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
@@ -1850,6 +1868,127 @@ packages:
       string.prototype.matchall: 4.0.8
     dev: false
 
+  /@svgr/babel-plugin-add-jsx-attribute@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-remove-jsx-attribute@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-remove-jsx-empty-expression@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-replace-jsx-attribute-value@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-i6MaAqIZXDOJeikJuzocByBf8zO+meLwfQ/qMHIjCcvpnfvWf82PFvredEZElErB5glQFJa2KVKk8N2xV6tRRA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-svg-dynamic-title@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-BoVSh6ge3SLLpKC0pmmN9DFlqgFy4NxNgdZNLPNJWBUU7TQpDWeBuyVuDW88iXydb5Cv0ReC+ffa5h3VrKfk1w==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-svg-em-dimensions@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-tNDcBa+hYn0gO+GkP/AuNKdVtMufVhU9fdzu+vUQsR18RIJ9RWe7h/pSBY338RO08wArntwbDk5WhQBmhf2PaA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-transform-react-native-svg@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-qw54u8ljCJYL2KtBOjI5z7Nzg8LnSvQOP5hPKj77H4VQL4+HdKbAT5pnkkZLmHKYwzsIHSYKXxHouD8zZamCFQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-plugin-transform-svg-component@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-CcFECkDj98daOg9jE3Bh3uyD9kzevCAnZ+UtzG6+BQG/jOQ2OA3jHnX6iG4G1MCJkUQFnUvEv33NvQfqrb/F3A==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+    dev: false
+
+  /@svgr/babel-preset@7.0.0(@babel/core@7.21.8):
+    resolution: {integrity: sha512-EX/NHeFa30j5UjldQGVQikuuQNHUdGmbh9kEpBKofGUtF0GUPJ4T4rhoYiqDAOmBOxojyot36JIFiDUHUK1ilQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.21.8
+      '@svgr/babel-plugin-add-jsx-attribute': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-remove-jsx-attribute': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-remove-jsx-empty-expression': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-replace-jsx-attribute-value': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-svg-dynamic-title': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-svg-em-dimensions': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-transform-react-native-svg': 7.0.0(@babel/core@7.21.8)
+      '@svgr/babel-plugin-transform-svg-component': 7.0.0(@babel/core@7.21.8)
+    dev: false
+
+  /@svgr/core@7.0.0:
+    resolution: {integrity: sha512-ztAoxkaKhRVloa3XydohgQQCb0/8x9T63yXovpmHzKMkHO6pkjdsIAWKOS4bE95P/2quVh1NtjSKlMRNzSBffw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/core': 7.21.8
+      '@svgr/babel-preset': 7.0.0(@babel/core@7.21.8)
+      camelcase: 6.3.0
+      cosmiconfig: 8.1.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@svgr/hast-util-to-babel-ast@7.0.0:
+    resolution: {integrity: sha512-42Ej9sDDEmsJKjrfQ1PHmiDiHagh/u9AHO9QWbeNx4KmD9yS5d1XHmXUNINfUcykAU+4431Cn+k6Vn5mWBYimQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/types': 7.21.5
+      entities: 4.5.0
+    dev: false
+
+  /@svgr/plugin-jsx@7.0.0:
+    resolution: {integrity: sha512-SWlTpPQmBUtLKxXWgpv8syzqIU8XgFRvyhfkam2So8b3BE0OS0HPe5UfmlJ2KIC+a7dpuuYovPR2WAQuSyMoPw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/core': 7.21.8
+      '@svgr/babel-preset': 7.0.0(@babel/core@7.21.8)
+      '@svgr/hast-util-to-babel-ast': 7.0.0
+      svg-parser: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@swc/core-darwin-arm64@1.3.56:
     resolution: {integrity: sha512-DZcu7BzDaLEdWHabz9DRTP0yEBLqkrWmskFcD5BX0lGAvoIvE4duMnAqi5F2B3X7630QioHRCYFoRw2WkeE3Cw==}
     engines: {node: '>=10'}
@@ -2534,6 +2673,11 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
+  /camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+    dev: false
+
   /caniuse-lite@1.0.30001486:
     resolution: {integrity: sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==}
     dev: false
@@ -2636,6 +2780,16 @@ packages:
       yaml: 1.10.2
     dev: false
 
+  /cosmiconfig@8.1.3:
+    resolution: {integrity: sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==}
+    engines: {node: '>=14'}
+    dependencies:
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -2787,6 +2941,11 @@ packages:
     resolution: {integrity: sha512-L9zlje9bIw0h+CwPQumiuVlfMcV4boxRjFIWDcLfFqTZNbkwOExBzfmswytHawObQX4OUhtNv8gIiB21kOurIg==}
     dev: false
 
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -4839,6 +4998,10 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
+  /svg-parser@2.0.4:
+    resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
+    dev: false
+
   /tailwindcss@3.1.3(postcss@8.4.14):
     resolution: {integrity: sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==}
     engines: {node: '>=12.13.0'}
@@ -5114,6 +5277,20 @@ packages:
       - supports-color
     dev: false
 
+  /vite-plugin-svgr@3.2.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==}
+    peerDependencies:
+      vite: ^2.6.0 || 3 || 4
+    dependencies:
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@svgr/core': 7.0.0
+      '@svgr/plugin-jsx': 7.0.0
+      vite: 4.3.9(@types/node@18.0.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: false
+
   /vite@4.3.9(@types/node@18.0.0):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}

web/src/components/alerts/NotFound.tsx

@@ -4,20 +4,22 @@
  */
 
 import { Link } from "react-router-dom";
-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";
 
 export const NotFound = () => {
   return (
     <div className="min-h-screen flex flex-col justify-center ">
-      <div className="flex justify-center"><img className="h-24 sm:h-48" src={logo} alt="Logo" /></div>
+      <div className="flex justify-center">
+        <Logo className="h-24 sm:h-48" />
+      </div>
       <h1 className="text-3xl text-center font-bold text-gray-900 dark:text-gray-200 my-8 px-2">
-          Oops, looks like there was a little too much brr!
+        Oops, looks like there was a little too much brr!
       </h1>
       <h3 className="text-xl text-center text-gray-700 dark:text-gray-400 mb-1 px-2">
         In case you think this a bug rather than too much brr,
       </h3>
       <h3 className="text-xl text-center text-gray-700 dark:text-gray-400 mb-1 px-2">
-          feel free to report this to our
+        feel free to report this to our
         {" "}
         <a
           rel="noopener noreferrer"
@@ -25,7 +27,7 @@ export const NotFound = () => {
           href="https://github.com/autobrr/autobrr"
           className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
         >
-            GitHub page
+          GitHub page
         </a>
         {" or to "}
         <a
@@ -34,19 +36,19 @@ export const NotFound = () => {
           href="https://discord.gg/WQ2eUycxyT"
           className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
         >
-            our official Discord channel
+          our official Discord channel
         </a>
-          .
+        .
       </h3>
       <h3 className="text-xl text-center leading-6 text-gray-700 dark:text-gray-400 mb-8 px-2">
-          Otherwise, let us help you to get you back on track for more brr!
+        Otherwise, let us help you to get you back on track for more brr!
       </h3>
       <div className="flex justify-center">
         <Link to="/">
           <button
             className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
           >
-          Back to Dashboard
+            Back to Dashboard
           </button>
         </Link>
       </div>

web/src/screens/Base.tsx

@@ -12,7 +12,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 
 import { AuthContext } from "@utils/Context";
-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";
 import { APIClient } from "@api/APIClient";
 import Toast from "@components/notifications/Toast";
 import { classNames } from "@utils";
@@ -70,16 +70,7 @@ export default function Base() {
                   <div className="flex items-center">
                     <div className="flex-shrink-0 flex items-center">
                       <Link to="/">
-                        <img
+                        <Logo className="h-10" />
-                          className="block lg:hidden h-10 w-auto"
-                          src={logo}
-                          alt="Logo"
-                        />
-                        <img
-                          className="hidden lg:block h-10 w-auto"
-                          src={logo}
-                          alt="Logo"
-                        />
                       </Link>
                     </div>
                     <div className="sm:ml-3 hidden sm:block">

web/src/screens/auth/login.tsx

@@ -10,7 +10,7 @@ import { useMutation } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import { Tooltip } from "react-tooltip";
 
-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";
 import { APIClient } from "@api/APIClient";
 import { AuthContext } from "@utils/Context";
 import { PasswordInput, TextInput } from "@components/inputs/text";
@@ -64,7 +64,7 @@ export const Login = () => {
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
-        <img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
+        <Logo className="mx-auto h-12" />
         <h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
           autobrr
         </h1>

web/src/screens/auth/onboarding.tsx

@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 
 import { APIClient } from "@api/APIClient";
 import { TextField, PasswordField } from "@components/inputs";
-import logo from "@app/logo.png";
+import { ReactComponent as Logo } from "@app/logo.svg";
 
 interface InputValues {
   username: string;
@@ -46,7 +46,7 @@ export const Onboarding = () => {
   return (
     <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
-        <img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
+        <Logo className="mx-auto h-12" />
         <h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
           autobrr
         </h1>

web/src/vite-env.d.ts

@@ -1 +1,2 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

web/vite.config.ts

@@ -3,6 +3,8 @@ import { fileURLToPath, URL } from "node:url";
 import react from "@vitejs/plugin-react-swc";
 import { VitePWA } from "vite-plugin-pwa";
 import { defineConfig, loadEnv } from "vite";
+import svgr from "vite-plugin-svgr";
+
 // https://vitejs.dev/config/
 export default ({ mode }: { mode: any }) => {
   // early load .env file
@@ -11,20 +13,16 @@ export default ({ mode }: { mode: any }) => {
 
   return defineConfig({
     base: "",
-    plugins: [react(), VitePWA({
+    plugins: [react(), svgr(), VitePWA({
       registerType: "autoUpdate",
       injectRegister: "inline",
       scope: "{{.BaseUrl}}",
       // strategies: "injectManifest",
       useCredentials: true,
       includeAssets: [
-        "favicon.svg",
+        // looks inside "public" folder 
-        "favicon.ico",
+        // manifest's icons are automatic added
-        "robots.txt",
+        "favicon.ico"
-        "logo.png",
-        "apple-touch-icon-*.png",
-        "manifest.webmanifest",
-        "assets/**/*"
       ],
       manifest: {
         name: "autobrr",
@@ -33,31 +31,30 @@ export default ({ mode }: { mode: any }) => {
         theme_color: "#141415",
         background_color: "#141415",
         icons: [
-          {
-            src: "logo.png",
-            sizes: "192x192",
-            type: "image/png"
-          },
           {
             src: "logo192.png",
             sizes: "192x192",
             type: "image/png"
           },
           {
-            src: "logo512.png",
+            src: "apple-touch-icon-iphone-60x60.png",
-            sizes: "512x512",
+            sizes: "60x60",
             type: "image/png"
           },
           {
-            src: "logo512.png",
+            src: "apple-touch-icon-ipad-76x76.png",
-            sizes: "512x512",
+            sizes: "76x76",
-            type: "image/png",
+            type: "image/png"
-            purpose: "any maskable"
           },
           {
             src: "apple-touch-icon-iphone-retina-120x120.png",
             sizes: "120x120",
             type: "image/png"
+          },
+          {
+            src: "apple-touch-icon-ipad-retina-152x152.png",
+            sizes: "152x152",
+            type: "image/png"
           }
         ],
         start_url: "{{.BaseUrl}}",
@@ -65,7 +62,8 @@ export default ({ mode }: { mode: any }) => {
         display: "standalone"
       },
       workbox: {
-        globPatterns: ["**/*.{js,css,html,svg}"],
+        // looks inside "dist" folder
+        globPatterns: ["**/*.{js,css,html,svg,woff2}"],
         sourcemap: true,
         navigateFallbackDenylist: [/^\/api/]
       }