WIP: [chore] redesign (#294)

Co-authored-by: Matthias Veit <aquamatthias@users.noreply.github.com>

.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) => {