WIP: [chore] redesign (#294)

Co-authored-by: Matthias Veit <[email protected]>

.env.example

@@ -1,5 +1,7 @@
 # URL to main fix landing page (if empty, it will get the url is currently on)
 VITE_FIX_LANDING_PAGE_URL=https://example.org
+# URL to fix document (if empty, it will get the url is currently on)
+VITE_FIX_DOCS_URL=https://example.org
 # API URL server to use (if empty, it will get the url is currently on)
 VITE_SERVER=https://example.org
 # WS URL server for events (if empty, it will get the url is currently on)

.github/workflows/pr-checks.yml

@@ -20,6 +20,7 @@ jobs:
       - name: Create env file
         run: |
           echo "VITE_FIX_LANDING_PAGE_URL=${{ vars.FIX_LANDING_PAGE_URL }}" > .env.production
+          echo "VITE_FIX_DOCS_URL=${{ vars.VITE_FIX_DOCS_URL }}" > .env.production
           echo "VITE_VIDEOS_ASSETS_URL=${{ vars.VIDEOS_ASSETS_URL }}" >> .env.production
           echo "VITE_IMAGES_ASSETS_URL=${{ vars.IMAGES_ASSETS_URL }}" >> .env.production
           echo "VITE_USE_PROXY=false" >> .env.production

.github/workflows/publish-pr.yml

@@ -20,6 +20,7 @@ jobs:
       - name: Create env file
         run: |
           echo "VITE_FIX_LANDING_PAGE_URL=${{ vars.FIX_LANDING_PAGE_URL }}" > .env.production
+          echo "VITE_FIX_DOCS_URL=${{ vars.VITE_FIX_DOCS_URL }}" > .env.production
           echo "VITE_VIDEOS_ASSETS_URL=${{ vars.VIDEOS_ASSETS_URL }}" >> .env.production
           echo "VITE_IMAGES_ASSETS_URL=${{ vars.IMAGES_ASSETS_URL }}" >> .env.production
           echo "VITE_USE_PROXY=false" >> .env.production

.github/workflows/publish.yml

@@ -15,6 +15,7 @@ jobs:
       - name: Create env file
         run: |
           echo "VITE_FIX_LANDING_PAGE_URL=${{ vars.FIX_LANDING_PAGE_URL }}" > .env.production
+          echo "VITE_FIX_DOCS_URL=${{ vars.VITE_FIX_DOCS_URL }}" > .env.production
           echo "VITE_VIDEOS_ASSETS_URL=${{ vars.VIDEOS_ASSETS_URL }}" >> .env.production
           echo "VITE_IMAGES_ASSETS_URL=${{ vars.IMAGES_ASSETS_URL }}" >> .env.production
           echo "VITE_USE_PROXY=false" >> .env.production

README.md

@@ -14,6 +14,7 @@ This project requires [NodeJS](https://nodejs.org) version 18 (>= v18.17.1) and
 | Variable                            | Type      | Description                                                                                                               | Default value                           |
 | ----------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
 | `VITE_FIX_LANDING_PAGE_URL`         | `string`  | URL of main landing page                                                                                                  | `location.origin`                       |
+| `VITE_FIX_DOCS_URL`                 | `string`  | URL of fix document                                                                                                       | `location.origin`                       |
 | `VITE_SERVER`                       | `string`  | Server address for API calls (ignored in test environments or when `VITE_USE_PROXY=true`)                                 | `location.origin`                       |
 | `VITE_WS_SERVER`                    | `string`  | WS server address for events (ignored in test environments or when `VITE_USE_PROXY=true`)                                 | `location.origin.replace('http', 'ws')` |
 | `VITE_VIDEOS_ASSETS_URL`            | `string`  | URL to CDN containing videos assets                                                                                       | `location.origin`                       |

package.json

@@ -34,33 +34,34 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@emotion/cache": "11.13.1",
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@fontsource-variable/plus-jakarta-sans": "^5.0.21",
-    "@lingui/macro": "^4.11.3",
-    "@lingui/react": "^4.11.3",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.7",
-    "@mui/system": "^5.16.7",
-    "@mui/x-charts-pro": "^7.0.0-alpha.1",
-    "@mui/x-data-grid-premium": "^7.13.0",
-    "@mui/x-date-pickers-pro": "^7.13.0",
-    "@mui/x-tree-view": "^7.13.0",
-    "@tanstack/react-query": "^5.51.23",
+    "@fontsource-variable/plus-jakarta-sans": "^5.0.22",
+    "@lingui/macro": "^4.11.4",
+    "@lingui/react": "^4.11.4",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/lab": "^6.0.0-beta.8",
+    "@mui/material": "^6.0.2",
+    "@mui/system": "^6.0.2",
+    "@mui/x-charts": "^7.15.0",
+    "@mui/x-charts-pro": "^7.0.0-alpha.3",
+    "@mui/x-data-grid-premium": "^7.15.0",
+    "@mui/x-date-pickers-pro": "^7.15.0",
+    "@mui/x-tree-view": "^7.15.0",
+    "@tanstack/react-query": "^5.53.3",
     "@uidotdev/usehooks": "^2.4.1",
-    "axios": "^1.7.4",
+    "axios": "^1.7.7",
     "d3": "^7.9.0",
-    "dayjs": "^1.11.12",
-    "diff": "^5.2.0",
+    "dayjs": "^1.11.13",
+    "diff": "^6.0.0",
     "flag-icons": "^7.2.3",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "highlight.js": "^11.10.0",
     "immer": "^10.1.1",
     "js-cookie": "^3.0.5",
     "lowlight": "^3.1.0",
     "mustache": "^4.2.0",
-    "posthog-js": "^1.155.4",
+    "posthog-js": "^1.160.2",
     "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -78,23 +79,23 @@
     "@emotion/styled": "^11.13.0",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.9.0",
-    "@lingui/cli": "^4.11.3",
+    "@eslint/js": "^9.9.1",
+    "@lingui/cli": "^4.11.4",
     "@lingui/swc-plugin": "^4.0.8",
-    "@lingui/vite-plugin": "^4.11.3",
+    "@lingui/vite-plugin": "^4.11.4",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@types/d3": "^7.4.3",
-    "@types/diff": "^5.2.1",
+    "@types/diff": "^5.2.2",
     "@types/js-cookie": "^3.0.6",
     "@types/mustache": "^4.2.5",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
     "@types/react-lazy-load-image-component": "^1.6.4",
@@ -103,28 +104,28 @@
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
     "babel-plugin-macros": "3.1.0",
-    "esbuild": "^0.23.0",
-    "eslint": "^9.9.0",
+    "esbuild": "^0.23.1",
+    "eslint": "^9.9.1",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-react-refresh": "^0.4.11",
     "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.9.0",
-    "husky": "^9.1.4",
-    "lint-staged": "^15.2.9",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "prettier-plugin-organize-imports": "^4.0.0",
     "prop-types": "15",
     "react-refresh": "^0.14.2",
     "shx": "^0.3.4",
     "storybook": "^8.2.9",
     "tsc-files": "^1.1.4",
-    "type-fest": "^4.24.0",
+    "type-fest": "^4.26.0",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.1.0",
+    "typescript-eslint": "^8.4.0",
     "unique-names-generator": "^4.7.1",
     "uuid": "^10.0.0",
-    "vite": "^5.4.1",
+    "vite": "^5.4.2",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-mock-dev-server": "^1.7.1",
     "vite-plugin-svgr": "^4.2.0",

public/manifest.json

@@ -4,22 +4,36 @@
   "description": "Mission control for your AWS security. Fix is an all-in-one dashboard for security engineers. Prioritize top risks by combining user, resource, and configuration data. Plus, get actionable remediation recommendations for your DevOps team.",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "logo192.png",
+      "src": "manifest-icon-512.maskable.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "sizes": "192x192"
+      "purpose": "any"
     },
     {
-      "src": "logo512.png",
+      "src": "manifest-icon-512.maskable.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "sizes": "512x512"
+      "purpose": "maskable"
+    },
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
     }
   ],
   "display": "standalone",
-  "theme_color": "#3d58d3",
+  "theme_color": "#7640EB",
   "background_color": "#ffffff"
 }

src/assets/icons/createIcon.tsx

@@ -1,9 +1,9 @@
 import { Palette, useTheme } from '@mui/material'
-import { FC, FunctionComponent, SVGProps, forwardRef } from 'react'
+import { FC, SVGProps, forwardRef } from 'react'
 
-type SvgIconProps = SVGProps<SVGSVGElement> & { title?: string; nonce?: string }
+export type SvgIconProps = SVGProps<SVGSVGElement> & { title?: string; nonce?: string }
 
-export const createIcon = (Icon: FunctionComponent<SvgIconProps>, colors?: [string, string?]) => {
+export const createIcon = (Icon: FC<SvgIconProps>, colors?: [string, string?]) => {
   const whiteColor = colors?.[0]
   const darkColor = colors?.[1]
   const SvgIconComp: FC<SvgIconProps> = forwardRef(({ color, fill, ...props }, ref) => {