Merge pull request #135 from nr2f1/homepage-review-fixes

Homepage review fixes
nr2f1 · Dec 11, 2024 · 4f37279 · 4f37279
2 parents 3e884cc + 0e35b1d
commit 4f37279
Show file tree

Hide file tree

Showing 22 changed files with 2,029 additions and 1,577 deletions.
diff --git a/package.json b/package.json
@@ -25,21 +25,21 @@
     "@graphql-codegen/near-operation-file-preset": "^3.0.0",
     "@graphql-codegen/typescript": "^4.1.2",
     "@graphql-codegen/typescript-react-apollo": "^4.3.2",
-    "@nx/js": "20.0.6",
-    "@nx/next": "20.0.6",
-    "@nx/vite": "20.0.6",
-    "@nx/web": "20.0.6",
+    "@nx/js": "20.2.1",
+    "@nx/next": "20.2.1",
+    "@nx/vite": "20.2.1",
+    "@nx/web": "20.2.1",
     "@swc-node/register": "~1.10.9",
-    "@swc/core": "~1.7.42",
+    "@swc/core": "~1.10.1",
     "@swc/helpers": "~0.5.15",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "16.0.1",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest-axe": "^3.5.9",
     "@types/negotiator": "^0.6.3",
-    "@types/node": "22.8.5",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/node": "22.10.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
@@ -49,34 +49,34 @@
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "~25.0.1",
-    "nx": "20.0.6",
-    "sass": "1.80.5",
-    "sass-loader": "^16.0.3",
+    "nx": "20.2.1",
+    "sass": "1.82.0",
+    "sass-loader": "^16.0.4",
     "swc-loader": "0.2.6",
     "ts-jest": "^29.2.5",
     "ts-node": "10.9.2",
-    "typescript": "~5.6.3",
-    "vite": "~5.4.11",
+    "typescript": "~5.7.2",
+    "vite": "~6.0.3",
     "vitest": "^2.1.8"
   },
   "nx": {
     "targets": {}
   },
   "dependencies": {
-    "@apollo/client": "^3.11.10",
-    "@apollo/experimental-nextjs-app-support": "^0.11.6",
+    "@apollo/client": "^3.12.2",
+    "@apollo/experimental-nextjs-app-support": "^0.11.7",
     "@contentful/rich-text-react-renderer": "^16.0.0",
-    "@formatjs/intl-localematcher": "^0.5.8",
-    "@mui/base": "5.0.0-beta.61",
+    "@formatjs/intl-localematcher": "^0.5.9",
+    "@mui/base": "5.0.0-beta.64",
     "formik": "^2.4.6",
     "graphql": "^16.9.0",
     "negotiator": "^1.0.0",
-    "next": "^15.0.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "next": "^15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "schema-dts": "^1.1.2",
     "tslib": "^2.8.1",
-    "yup": "^1.4.0"
+    "yup": "^1.5.0"
   },
   "packageManager": "[email protected]+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website-assets/project.json b/website-assets/project.json
@@ -16,12 +16,6 @@
     },
     "format": {
       "command": "pnpm biome format website"
-    },
-    "test": {
-      "executor": "@nx/vite:test",
-      "options": {
-        "config": "website/vite.config.ts"
-      }
     }
   }
 }
diff --git a/website-assets/vite.config.ts b/website-assets/vite.config.ts
@@ -28,14 +28,4 @@ export default defineConfig({
       transformMixedEsModules: true,
     },
   },
-
-  test: {
-    globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
-    environment: 'jsdom',
-    exclude: ['website/src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
-  },
 });
diff --git a/website/next.config.js b/website/next.config.js
diff --git a/website/next.config.ts b/website/next.config.ts
@@ -0,0 +1,29 @@
+import { composePlugins, withNx } from '@nx/next';
+import type { WithNxOptions } from '@nx/next/plugins/with-nx';
+
+const nextConfig: WithNxOptions = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'nr2f1.github.io',
+        pathname: '/website/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.ctfassets.net',
+        pathname: '/9j9d6tsmuyzl/**',
+      },
+    ],
+  },
+  sassOptions: {
+    silenceDeprecations: ['legacy-js-api'],
+  },
+};
+
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withNx,
+];
+
+export default composePlugins(...plugins)(nextConfig);
diff --git a/website/project.json b/website/project.json
@@ -13,7 +13,7 @@
     "test": {
       "executor": "@nx/vite:test",
       "options": {
-        "config": "website/vite.config.ts"
+        "config": "website/vitest.config.ts"
       }
     },
     "graphql-generate": {

diff --git a/website/src/components/banner/index.module.scss b/website/src/components/banner/index.module.scss
@@ -88,6 +88,10 @@
     @include breakpoints.medium-screen {
       @include text-styles.header-1--mobile;
     }
+
+    @include breakpoints.small-screen {
+      @include text-styles.header-1--mobile;
+    }
   }
 
   p {

diff --git a/website/src/components/header/index.module.scss b/website/src/components/header/index.module.scss
@@ -67,6 +67,10 @@ $hambuguer-button: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     max-width: 206px;
     flex-basis: 100%;
 
+    @include breakpoints.from-small-to-medium-screen {
+      max-width: 137.33px;
+    }
+
     & > a {
       display: block;
     }

diff --git a/website/src/components/header/locale-selector.module.scss b/website/src/components/header/locale-selector.module.scss
@@ -17,8 +17,8 @@
   color: var(--foreground-primary);
   font-size: 1.125rem;
   font-weight: 400;
-  padding: var(--spacing-2) var(--spacing-5);
-  padding-right: calc((var(--spacing-5) * 2) + var(--spacing-2));
+  padding: var(--spacing-2) var(--spacing-3);
+  padding-right: calc((var(--spacing-3) * 2) + var(--spacing-2));
 
   &:hover,
   &:focus {
@@ -44,12 +44,6 @@
 }
 
 .popup {
-  background-color: var(--background-primary);
-  border-radius: var(--border-radius-lg);
-  border: var(--spacing-0) solid var(--gray-300);
-  box-shadow:
-    0 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0 4px 6px -2px rgba(16, 24, 40, 0.03);
   // It is important because styles are inlined
   top: var(--spacing-1) !important;
   z-index: 10;
@@ -64,25 +58,25 @@
 }
 
 .listbox {
+  background-color: var(--background-primary);
   border-radius: var(--border-radius-lg);
+  border: var(--spacing-0) solid var(--grey-300);
+  box-shadow:
+    0 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0 4px 6px -2px rgba(16, 24, 40, 0.03);
   color: var(--foreground-inverse-primary);
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: var(--spacing-1) 0;
 }
 
 .option {
   @include text-styles.button;
   color: var(--foreground-primary);
   font-size: 1.125rem;
   font-weight: 400;
-  padding: var(--spacing-2) var(--spacing-5);
-  padding-right: calc((var(--spacing-5) * 2) + var(--spacing-2));
-
-  &:first-of-type {
-    border-top-left-radius: var(--border-radius-lg);
-    border-top-right-radius: var(--border-radius-lg);
-  }
+  padding: var(--spacing-2) var(--spacing-3);
+  padding-right: calc((var(--spacing-3) * 2) + var(--spacing-2));
 
   &:hover,
   &:focus {
@@ -99,5 +93,14 @@
     background-position-y: var(--spacing-3);
     background-repeat: no-repeat;
     background-size: var(--spacing-5);
+    background-color: var(--background-primary);
+
+    &:hover {
+      background-color: var(--navy-50);
+    }
+
+    &:active {
+      background-color: var(--navy-100);
+    }
   }
 }
diff --git a/website/src/components/header/locale-selector.tsx b/website/src/components/header/locale-selector.tsx
@@ -52,6 +52,7 @@ const LocaleSelector: React.FC<LocaleSelectorProps> = ({
       }
       slotProps={{
         popup: {
+          disablePortal: true,
           className: isMobile
             ? `${styles.popup} ${styles['popup--mobile']}`
             : styles.popup,

diff --git a/website/src/components/header/nav-list.module.scss b/website/src/components/header/nav-list.module.scss
@@ -85,7 +85,7 @@
     list-style: none;
     margin: 0;
     min-width: var(--spacing-72);
-    padding: 0;
+    padding: var(--spacing-1) 0;
     position: absolute;
     width: 100%;
     border: var(--spacing-0) solid var(--grey-300);
@@ -99,26 +99,6 @@
   & li {
     padding: var(--spacing-2) var(--spacing-3);
 
-    &:first-of-type {
-      border-top-left-radius: var(--border-radius-xl);
-      border-top-right-radius: var(--border-radius-xl);
-
-      @include breakpoints.from-small-to-medium-screen {
-        border-top-left-radius: unset;
-        border-top-right-radius: unset;
-      }
-    }
-
-    &:last-of-type {
-      border-bottom-left-radius: var(--border-radius-xl);
-      border-bottom-right-radius: var(--border-radius-xl);
-
-      @include breakpoints.from-small-to-medium-screen {
-        border-bottom-left-radius: unset;
-        border-bottom-right-radius: unset;
-      }
-    }
-
     &:hover,
     &:focus {
       background-color: var(--background-accent-navy);

diff --git a/website/src/components/homepage-hero/index.module.scss b/website/src/components/homepage-hero/index.module.scss
@@ -9,6 +9,9 @@
     @include text-styles.header-1;
     margin: 0;
     margin-block-end: var(--spacing-6);
+    @include breakpoints.from-small-to-medium-screen {
+      @include text-styles.header-1--mobile;
+    }
   }
   h3 {
     @include text-styles.header-2;
@@ -29,10 +32,24 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-4);
+    @include breakpoints.from-small-to-medium-screen {
+      flex-wrap: unset;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+    }
 
     li {
+      @include breakpoints.from-small-to-medium-screen {
+        width: 100%;
+      }
+
       a {
         display: inline-block;
+        @include breakpoints.from-small-to-medium-screen {
+          display: block;
+          text-wrap: wrap;
+        }
       }
     }
   }