Merge branch 'BULL-1883' into 'master'

Bull 1883 - vite/vue2

See merge request !193

.env.development

-VUE_APP_GA_ID=UA-187670027-1
+VITE_APP_GA_ID=UA-187670027-1

.env.production

-VUE_APP_GA_ID=UA-187670027-2
+VITE_APP_GA_ID=UA-187670027-2
\ No newline at end of file

.env.test

-VUE_APP_GA_ID=UA-187670027-1
+VITE_APP_GA_ID=UA-187670027-1

CONTRIBUTING.md

@@ -10,7 +10,7 @@ To contribute a change:
 
 1. Create a branch on the cloned repository.
 2. Make your changes.
-3. Write tests using [jest](https://jestjs.io/) for unit tests and [cypress](https://www.cypress.io) for end-to-end tests, if necessary.
+3. Write tests using [vitest](https://vitest.dev/) for unit tests and [cypress](https://www.cypress.io) for end-to-end tests, if necessary.
 4. Unit test coverage should ideally be 100% for your new code.
 5. Make commits using the [Conventional Commits](https://www.conventionalcommits.org/) format. This helps with automation for changelog (future).
 6. Open a merge request using one of the provided templates (if available). If this merge request is solving a preexisting issue, add the issue reference into the description of the MR.

README.md

@@ -24,7 +24,7 @@ npm install
 ### Compiles and hot-reloads for development
 
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production
@@ -33,12 +33,6 @@ npm run serve
 npm run build
 ```
 
-### Run all tests
-
-```
-npm run test
-```
-
 ### Run your unit tests
 
 ```
@@ -47,7 +41,7 @@ npm run test:unit
 
 ### Run your end-to-end tests
 
-#### CLI end-to-end tests
+#### CI end-to-end tests
 
 ```
 npm run test:e2e-ci

babel.config.js

-module.exports = {
-  presets: [
-    "@vue/cli-plugin-babel/preset",
-    [
-      "@vue/babel-preset-jsx",
-      {
-        injectH: false,
-      },
-    ],
-  ],
-};

cypress.config.js

+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  numTestsKeptInMemory: 0,
+
+  e2e: {
+    specPattern: "tests/e2e/specs/**",
+    supportFile: "tests/e2e/support/index.js",
+    fixturesFolder: "tests/e2e/fixtures",
+    screenshotsFolder: "tests/e2e/screenshots",
+    videosFolder: "tests/e2e/videos",
+  },
+});

cypress.json

-{
-  "pluginsFile": "tests/e2e/plugins/index.js",
-  "numTestsKeptInMemory": 0,
-  "video": false
-}

public/index.html → index.html

@@ -47,10 +47,6 @@
       sizes="502x498"
       href="/static/p1-logo.webp"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
-    />
 
     <link rel="stylesheet" href="/font.css" />
   </head>
@@ -64,6 +60,7 @@
     </noscript>
 
     <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
 
     <!--
       since a nonce is generated on every http request, the nonce for index.html will be

jsconfig.json

+{
+  "compilerOptions": {
+    "module": "esnext",
+    "allowJs": true
+  }
+}
\ No newline at end of file

package.json

@@ -2,74 +2,66 @@
   "name": "platform1-site",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "vue-cli-service build",
-    "build-staging": "NODE_ENV=production vue-cli-service build --mode=test",
+    "build": "vite build",
+    "dev": "vite",
+    "format": "prettier .  --write",
     "generate-search-index": "babel-node --presets='@babel/preset-env' scripts/generate-search-index.js",
-    "lint": "vue-cli-service lint --no-fix --max-warnings=0",
-    "lint:fix": "vue-cli-service lint",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore src",
+    "lint:fix": "npm run lint --fix",
     "prepare": "husky install",
     "pretty-quick": "npx pretty-quick --staged",
-    "serve": "vue-cli-service serve",
-    "test": "npm run test:unit && npx vue-cli-service test:e2e --headless",
-    "test:e2e": "vue-cli-service test:e2e --mode=development",
-    "test:e2e-ci": "npx vue-cli-service test:e2e --headless",
-    "test:unit": "vue-cli-service test:unit"
+    "preview": "vite preview",
+    "test:e2e": "babel-node --presets='@babel/preset-env' scripts/e2e-harness.js open",
+    "test:e2e-ci": "babel-node --presets='@babel/preset-env' scripts/e2e-harness.js run",
+    "test:unit": "vitest run --coverage",
+    "test:unit:watch": "vitest --coverage"
   },
   "dependencies": {
     "arrows-svg": "^1.1.1",
     "core-js": "^3.6.4",
-    "cross-env": "^7.0.3",
     "lodash": "^4.17.21",
     "lunr": "^2.3.9",
-    "puppeteer": "^14.4.1",
-    "vue": "^2.6.11",
+    "vue": "^2.7.8",
     "vue-analytics": "^5.22.1",
     "vue-body-class": "^3.0.2",
-    "vue-carousel-3d": "^1.0.1",
     "vue-image-lightbox": "^7.2.0",
     "vue-lazyload": "^1.3.3",
-    "vue-router": "^3.1.6",
+    "vue-router": "^3.5.4",
     "vue-text-highlight": "^2.0.10",
     "vue-the-mask": "^0.11.1",
-    "vuetify": "^2.4.11"
+    "vuetify": "^2.6.8"
   },
   "devDependencies": {
     "@babel/core": "7.17.9",
+    "@babel/eslint-parser": "^7.18.9",
     "@babel/node": "^7.17.9",
     "@babel/plugin-transform-strict-mode": "^7.8.3",
-    "@cypress/webpack-preprocessor": "^5.12.0",
+    "@cypress/vite-dev-server": "^3.1.1",
     "@mdi/font": "^5.3.45",
-    "@vue/cli-plugin-babel": "^4.5.19",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.19",
-    "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-plugin-router": "^4.5.19",
-    "@vue/cli-plugin-unit-jest": "^4.5.19",
-    "@vue/cli-service": "^4.5.19",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
-    "chokidar": "^3.5.2",
-    "cypress": "^9.5.1",
-    "eslint": "^6.7.2",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "gulp-sass": "^5.0.0",
+    "@vue/test-utils": "^1.3.0",
+    "c8": "^7.12.0",
+    "cypress": "^10.5.0",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.3.0",
     "husky": "^7.0.4",
-    "jest-canvas-mock": "^2.4.0",
-    "node-sass": "^6.0.1",
+    "jsdom": "^20.0.0",
+    "mime": "^3.0.0",
+    "portfinder": "^1.0.32",
     "pre-commit": "^1.2.2",
-    "prettier": "^2.5.1",
+    "prettier": "2.7.1",
     "pretty-quick": "^3.1.3",
-    "sass": "~1.32",
-    "sass-loader": "^10.2.0",
-    "style-resources-loader": "^1.3.2",
-    "vue-cli-plugin-style-resources-loader": "~0.1.4",
-    "vue-cli-plugin-vuetify": "~2.0.6",
-    "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.3.0"
+    "puppeteer": "^14.4.1",
+    "sass": "1.32.13",
+    "unplugin-vue-components": "^0.21.2",
+    "vite": "^3.0.4",
+    "vite-plugin-vue2": "^2.0.2",
+    "vite-plugin-vue2-svg": "^0.3.0",
+    "vitest": "^0.21.0",
+    "vue-template-compiler": "^2.6.14",
+    "wait-on": "^6.0.1"
   },
   "overrides": {
     "@babel/generator": "7.17.9"
@@ -82,30 +74,32 @@
     "extends": [
       "plugin:vue/essential",
       "eslint:recommended",
-      "@vue/prettier"
+      "prettier"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser",
+      "requireConfigFile": false
+    },
+    "rules": {
+      "vue/valid-v-slot": [
+        "error",
+        {
+          "allowModifiers": true
+        }
+      ]
     },
-    "rules": {},
     "overrides": [
       {
         "files": [
           "**/__tests__/*.{j,t}s?(x)",
           "**/tests/unit/**/*.spec.{j,t}s?(x)"
-        ],
-        "env": {
-          "jest": true
-        }
+        ]
       },
       {
         "files": [
           "**/__tests__/*.{j,t}s?(x)",
           "**/tests/unit/**/*.spec.{j,t}s?(x)"
-        ],
-        "env": {
-          "jest": true
-        }
+        ]
       }
     ]
   },
@@ -114,41 +108,6 @@
     "last 2 versions",
     "not dead"
   ],
-  "jest": {
-    "setupFiles": [
-      "./tests/unit/setup.js"
-    ],
-    "preset": "@vue/cli-plugin-unit-jest",
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-      "**/*.{js,vue}",
-      "!**/node_modules/**",
-      "!coverage/**",
-      "!dist/**",
-      "!tests/**",
-      "!babel.config.js",
-      "!vue.config.js",
-      "!public/static/js/**"
-    ],
-    "coverageReporters": [
-      "html",
-      "text-summary",
-      "lcov"
-    ],
-    "coverageDirectory": "coverage",
-    "coverageThreshold": {},
-    "transform": {
-      ".*\\.(vue)$": "vue-jest",
-      "^.+\\.svg$": "<rootDir>/tests/unit/__mocks__/svgTransform.js",
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/unit/__mocks__/fileTransformer.js"
-    },
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1",
-      "^vuetify/lib$": "vuetify",
-      "\\.(css|less)$": "<rootDir>/tests/unit/__mocks__/styleMock.js",
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/unit/__mocks__/fileTransformer.js"
-    }
-  },
   "optionalDependencies": {
     "fsevents": "^2.3.2"
   }

scripts/e2e-harness.js

+/**
+ * This script is responsible for spinning up a vite dev server (via `npm run dev`),
+ * waiting for it to be ready, running cypress tests, and tearing down the dev server
+ * so that no orphaned processes remain.
+ */
+import { execSync, exec } from "child_process";
+import waitOn from "wait-on";
+
+const portRegex = /http\:\/\/127\.0\.0\.1\:(.*)\//g;
+const cypressCommand = process.argv.length === 3 ? process.argv[2] : "run";
+let devServer;
+
+try {
+  // read the port from `npm run dev`
+  const portPromise = new Promise((resolve, reject) => {
+    devServer = exec("npm run dev", (err) => {
+      reject(err);
+    });
+    devServer.stdout.on("data", function (data) {
+      const str = data.toString();
+      const match = portRegex.exec(str);
+      if (match && match.length > 1) {
+        resolve(match[1]);
+      }
+    });
+  });
+
+  // ensure that the dev server is ready for connections
+  const port = await portPromise;
+  console.debug(`Waiting for dev server to be ready on port ${port} ...`);
+  await waitOn({ resources: [`tcp:${port}`] });
+  console.debug(`Dev server ready`);
+
+  // kick off cypress (open/run)
+  console.debug(`Starting cypress...`);
+  await execSync(
+    `npx cypress ${cypressCommand} -c baseUrl=http://localhost:${port}`,
+    {
+      stdio: "inherit",
+    }
+  );
+  console.debug("E2E tests finished");
+} catch (e) {
+  console.error(e);
+} finally {
+  // clean up devServer process
+  if (devServer?.pid) {
+    console.debug(`Cleaning up dev server pid ${devServer.pid}`);
+    devServer.kill();
+  }
+  console.debug("Done");
+}

scripts/generate-search-index.js

-const lunr = require("lunr");
-const fs = require("fs");
-const path = require("path");
-const puppeteer = require("puppeteer");
-const http = require("http");
-const portfinder = require("portfinder");
-const { routes } = require("../src/router/routes");
-const { useAcronymAliases } = require("../src/plugins/search/lunr-pipelines");
+import lunr from "lunr";
+import fs from "fs";
+import path from "path";
+import puppeteer from "puppeteer";
+import http from "http";
+import portfinder from "portfinder";
+import mime from "mime";
+import { routes } from "../src/router/routes.js";
+import { useAcronymAliases } from "../src/plugins/search/lunr-pipelines.js";
+
+import * as url from "url";
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
 // collect routes that we want to include in the search index
 const routesMap = routes.reduce((map, route) => {
@@ -119,6 +123,7 @@ const createLunrIndex = (routeData) => {
         fs.existsSync(requestedPath) &&
         fs.lstatSync(requestedPath).isFile()
       ) {
+        res.setHeader("Content-Type", mime.getType(requestedPath));
         res.writeHead(200);
         res.end(fs.readFileSync(requestedPath));
       } else {

src/App.vue

@@ -4,17 +4,17 @@
     <v-main class="wisp-bg" fluid>
       <router-view id="main-content" />
     </v-main>
-    <Footer />
+    <P1Footer />
   </v-app>
 </template>
 
 <script>
 import NavBar from "@/components/NavBar.vue";
-import Footer from "@/components/Footer.vue";
+import P1Footer from "@/components/Footer.vue";
 
 export default {
   name: "App",
-  components: { NavBar, Footer },
+  components: { NavBar, P1Footer },
 };
 </script>
 <style lang="scss">
@@ -26,7 +26,7 @@ export default {
   }
 
   .wisp-bg {
-    background-image: url(~@/assets/images/Background_WH_Texture.webp);
+    background-image: url(@/assets/images/Background_WH_Texture.webp);
     background-size: 100% 750px;
     background-repeat: no-repeat;
     background-position-y: 715px;

src/assets/images/icons/contactus.svg

-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700" xml:space="preserve"><style>.st0{stroke:#fcfafa;stroke-miterlimit:10}.st0,.st1{fill:#fff}.st2{fill:none;stroke:#fcfafa;stroke-miterlimit:10}</style><path class="st0" d="M476.4 116.1c-9.2.3-17.9 4.1-24.4 10.6s-10.3 15.2-10.6 24.4c0 9.3 3.7 18.2 10.2 24.7 6.6 6.6 15.5 10.3 24.8 10.3 9.2-.3 17.9-4.1 24.4-10.6s10.3-15.2 10.6-24.4c-.2-9.2-4-18-10.5-24.5s-15.2-10.3-24.5-10.5zm0 53.3c-4.6-.2-9-2-12.2-5.3-3.2-3.2-5.1-7.6-5.3-12.2.3-4.5 2.2-8.8 5.5-12 3.2-3.2 7.5-5.2 12-5.5 4.6.2 8.9 2.1 12.1 5.4 3.2 3.2 5.1 7.6 5.4 12.1-.3 4.5-2.2 8.8-5.5 12-3.1 3.2-7.4 5.2-12 5.5zM553.3 116.1c-9.3 0-18.2 3.7-24.7 10.2-6.6 6.6-10.3 15.5-10.3 24.8s3.7 18.2 10.3 24.7c6.6 6.6 15.5 10.3 24.7 10.3 9.3 0 18.2-3.7 24.8-10.3s10.2-15.5 10.2-24.7c0-9.3-3.7-18.2-10.2-24.8s-15.6-10.2-24.8-10.2zm0 53.3c-4.6 0-9.1-1.8-12.4-5.1-3.3-3.3-5.1-7.7-5.1-12.4 0-4.6 1.8-9.1 5.1-12.4 3.3-3.3 7.7-5.1 12.4-5.1s9.1 1.8 12.4 5.1c3.3 3.3 5.1 7.7 5.1 12.4 0 4.6-1.8 9.1-5.1 12.4s-7.8 5.1-12.4 5.1zM399.7 116.1c-9.3 0-18.2 3.7-24.7 10.2-6.6 6.6-10.3 15.5-10.3 24.8s3.7 18.2 10.3 24.7c6.6 6.6 15.5 10.3 24.7 10.3 9.3 0 18.2-3.7 24.8-10.3 6.6-6.6 10.2-15.5 10.2-24.7 0-9.3-3.7-18.2-10.2-24.8s-15.5-10.2-24.8-10.2zm0 53.3c-4.6 0-9.1-1.8-12.4-5.1s-5.1-7.7-5.1-12.4c0-4.6 1.8-9.1 5.1-12.4 3.3-3.3 7.7-5.1 12.4-5.1s9.1 1.8 12.4 5.1 5.1 7.7 5.1 12.4c0 4.6-1.8 9.1-5.1 12.4s-7.8 5.1-12.4 5.1z"/><path class="st0" d="M620.1 124.6c-8.3-45.1-37.3-83.8-78.4-104.3s-89.4-20.5-130.5 0-70.1 59.1-78.4 104.3c-1.6 8.7-2.4 17.4-2.4 26.3 0 7.1.5 14.2 1.6 21.2 3.7 26.1 14.6 50.7 31.3 71.1v70c.1 4.7 3 8.9 7.4 10.6 1.5.6 3.1 1 4.7 1 2.9.1 5.7-1 7.8-3l40-35c41.4 16.3 87.9 12.8 126.4-9.4s64.8-60.7 71.5-104.6c1.1-7.2 1.7-14.4 1.7-21.7 0-9-1-17.8-2.7-26.5zm-16.4 45.5c-5.9 39.5-29.9 74.1-64.9 93.4s-77 21.3-113.6 5.3c-3.1-1.4-6.7-.8-9.3 1.4l-35 30.6v-60.6c0-1.9-.6-3.7-1.8-5.2l-1.3-1.6c-15.3-18.2-25.2-40.2-28.5-63.7-1-6.2-1.4-12.4-1.4-18.6 0-7.7.7-15.5 2.1-23.1 7.3-39.8 32.8-73.8 69-91.9s78.7-18.1 114.9 0 61.7 52.1 69 91.9c1.4 7.7 2.1 15.5 2.1 23.3 0 6.2-.4 12.5-1.3 18.8z"/><path class="st0" d="M419.1 314.5c-3.2 3.6-2.8 9.2.9 12.3 6.7 6.4 11.8 14.4 14.8 23.2-.9.2-1.7.5-2.5 1L273.1 452.5c-3.9 2.5-8.9 2.5-12.9 0L101 350.7c-.8-.4-1.6-.6-2.5-.7 4.1-11.3 11.5-21 21.3-27.9s21.4-10.6 33.4-10.6H337c4.8 0 8.8-3.9 8.8-8.8s-3.9-8.8-8.8-8.8H153.2c-20 0-39.2 8-53.4 22.1s-22.2 33.3-22.3 53.3v110.1c0 20.1 8 39.3 22.2 53.4 14.2 14.2 33.4 22.1 53.5 22.2h226.9c20 0 39.3-8 53.4-22.2s22.1-33.4 22.2-53.4V369.3c0-21-8.8-41.1-24.2-55.4-3.6-3.2-9.1-3-12.4.6zm19.2 165c0 15.4-6.2 30.2-17 41.1-10.9 10.9-25.7 17-41.1 17h-227c-15.4 0-30.2-6.1-41.1-17-10.9-10.9-17.1-25.7-17.1-41.1V367.6l155.8 99.5c4.7 3 10.2 4.6 15.8 4.6s11.1-1.6 15.8-4.6l155.8-99.7v1.7l.1 110.4z"/><path id="SVGID_1_" class="st1" d="M903.8 691.2v700h-700"/><path id="SVGID_00000134213038593286399150000014477616219376915872_" class="st2" d="M903.8 691.2v700h-700"/><path id="SVGID_00000109001796832603274680000016281411609862913685_" class="st1" d="M1157.1 691.2v700h-700"/><path id="SVGID_00000128478897847949083340000016974075559277782943_" class="st2" d="M1157.1 691.2v700h-700"/><g><path id="SVGID_00000093875842851429505300000013518209779219322271_" class="st1" d="M1193.7 691.2v700h-700"/><path id="SVGID_00000020376057215828475590000007799662219060588974_" class="st2" d="M1193.7 691.2v700h-700"/></g><g><path id="SVGID_00000048480047334327470930000009198865112522549942_" class="st1" d="M1291.1 691.2v700h-700"/><path id="SVGID_00000017516102720364291270000016030444568257938311_" class="st2" d="M1291.1 691.2v700h-700"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 700 700" xml:space="preserve">
\ No newline at end of file
+  <path stroke="#fcfafa" d="M476.4 116.1c-9.2.3-17.9 4.1-24.4 10.6s-10.3 15.2-10.6 24.4c0 9.3 3.7 18.2 10.2 24.7 6.6 6.6 15.5 10.3 24.8 10.3 9.2-.3 17.9-4.1 24.4-10.6s10.3-15.2 10.6-24.4c-.2-9.2-4-18-10.5-24.5s-15.2-10.3-24.5-10.5zm0 53.3c-4.6-.2-9-2-12.2-5.3-3.2-3.2-5.1-7.6-5.3-12.2.3-4.5 2.2-8.8 5.5-12 3.2-3.2 7.5-5.2 12-5.5 4.6.2 8.9 2.1 12.1 5.4 3.2 3.2 5.1 7.6 5.4 12.1-.3 4.5-2.2 8.8-5.5 12-3.1 3.2-7.4 5.2-12 5.5zM553.3 116.1c-9.3 0-18.2 3.7-24.7 10.2-6.6 6.6-10.3 15.5-10.3 24.8s3.7 18.2 10.3 24.7c6.6 6.6 15.5 10.3 24.7 10.3 9.3 0 18.2-3.7 24.8-10.3s10.2-15.5 10.2-24.7c0-9.3-3.7-18.2-10.2-24.8s-15.6-10.2-24.8-10.2zm0 53.3c-4.6 0-9.1-1.8-12.4-5.1-3.3-3.3-5.1-7.7-5.1-12.4 0-4.6 1.8-9.1 5.1-12.4 3.3-3.3 7.7-5.1 12.4-5.1s9.1 1.8 12.4 5.1c3.3 3.3 5.1 7.7 5.1 12.4 0 4.6-1.8 9.1-5.1 12.4s-7.8 5.1-12.4 5.1zM399.7 116.1c-9.3 0-18.2 3.7-24.7 10.2-6.6 6.6-10.3 15.5-10.3 24.8s3.7 18.2 10.3 24.7c6.6 6.6 15.5 10.3 24.7 10.3 9.3 0 18.2-3.7 24.8-10.3 6.6-6.6 10.2-15.5 10.2-24.7 0-9.3-3.7-18.2-10.2-24.8s-15.5-10.2-24.8-10.2zm0 53.3c-4.6 0-9.1-1.8-12.4-5.1s-5.1-7.7-5.1-12.4c0-4.6 1.8-9.1 5.1-12.4 3.3-3.3 7.7-5.1 12.4-5.1s9.1 1.8 12.4 5.1 5.1 7.7 5.1 12.4c0 4.6-1.8 9.1-5.1 12.4s-7.8 5.1-12.4 5.1z" />
+  <path stroke="#fcfafa" d="M620.1 124.6c-8.3-45.1-37.3-83.8-78.4-104.3s-89.4-20.5-130.5 0-70.1 59.1-78.4 104.3c-1.6 8.7-2.4 17.4-2.4 26.3 0 7.1.5 14.2 1.6 21.2 3.7 26.1 14.6 50.7 31.3 71.1v70c.1 4.7 3 8.9 7.4 10.6 1.5.6 3.1 1 4.7 1 2.9.1 5.7-1 7.8-3l40-35c41.4 16.3 87.9 12.8 126.4-9.4s64.8-60.7 71.5-104.6c1.1-7.2 1.7-14.4 1.7-21.7 0-9-1-17.8-2.7-26.5zm-16.4 45.5c-5.9 39.5-29.9 74.1-64.9 93.4s-77 21.3-113.6 5.3c-3.1-1.4-6.7-.8-9.3 1.4l-35 30.6v-60.6c0-1.9-.6-3.7-1.8-5.2l-1.3-1.6c-15.3-18.2-25.2-40.2-28.5-63.7-1-6.2-1.4-12.4-1.4-18.6 0-7.7.7-15.5 2.1-23.1 7.3-39.8 32.8-73.8 69-91.9s78.7-18.1 114.9 0 61.7 52.1 69 91.9c1.4 7.7 2.1 15.5 2.1 23.3 0 6.2-.4 12.5-1.3 18.8z" />
+  <path stroke="#fcfafa" d="M419.1 314.5c-3.2 3.6-2.8 9.2.9 12.3 6.7 6.4 11.8 14.4 14.8 23.2-.9.2-1.7.5-2.5 1L273.1 452.5c-3.9 2.5-8.9 2.5-12.9 0L101 350.7c-.8-.4-1.6-.6-2.5-.7 4.1-11.3 11.5-21 21.3-27.9s21.4-10.6 33.4-10.6H337c4.8 0 8.8-3.9 8.8-8.8s-3.9-8.8-8.8-8.8H153.2c-20 0-39.2 8-53.4 22.1s-22.2 33.3-22.3 53.3v110.1c0 20.1 8 39.3 22.2 53.4 14.2 14.2 33.4 22.1 53.5 22.2h226.9c20 0 39.3-8 53.4-22.2s22.1-33.4 22.2-53.4V369.3c0-21-8.8-41.1-24.2-55.4-3.6-3.2-9.1-3-12.4.6zm19.2 165c0 15.4-6.2 30.2-17 41.1-10.9 10.9-25.7 17-41.1 17h-227c-15.4 0-30.2-6.1-41.1-17-10.9-10.9-17.1-25.7-17.1-41.1V367.6l155.8 99.5c4.7 3 10.2 4.6 15.8 4.6s11.1-1.6 15.8-4.6l155.8-99.7v1.7l.1 110.4z" />
+</svg>
\ No newline at end of file

src/assets/images/icons/pictureAsPDF.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24 ">
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path
+    d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm12 6V9c0-.55-.45-1-1-1h-2v5h2c.55 0 1-.45 1-1zm-2-3h1v3h-1V9zm4 2h1v-1h-1V9h1V8h-2v5h1zm-8 0h1c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1H9v5h1v-2zm0-2h1v1h-1V9z"
+  />
+</svg>