platform table adaptive + alert + redesign, strategy & users & contests & chains pages, e2e tests fix, invest form fix

.github/workflows/3_e2e.yml

@@ -1,28 +1,28 @@
-# name: End-to-End Tests(Playwright)
-# on:
-#   push:
-#     branches: [main, master]
-#   pull_request:
-#     branches: [main, master]
+name: End-to-End Tests(Playwright)
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
 
-# jobs:
-#   test:
-#     timeout-minutes: 60
-#     runs-on: ubuntu-latest
-#     steps:
-#       - uses: actions/checkout@v4
-#       - uses: actions/setup-node@v4
-#         with:
-#           node-version: lts/*
-#       - name: Install dependencies
-#         run: yarn install
-#       - name: Install Playwright Browsers
-#         run: yarn playwright install --with-deps
-#       - name: Run Playwright tests
-#         run: yarn test:e2e
-#       - uses: actions/upload-artifact@v4
-#         if: always()
-#         with:
-#           name: playwright-report
-#           path: playwright-report/
-#           retention-days: 30
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: yarn install
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn test:e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.12.25-alpha",
+  "version": "0.12.27-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -33,6 +33,7 @@
     "http-proxy-middleware": "^2.0.6",
     "nanostores": "^0.9.3",
     "openai": "^4.0.0",
+    "playwright": "^1.48.0",
     "proxy-middleware": "^0.15.0",
     "react": "^18.0.0",
     "react-device-detect": "^2.2.3",
@@ -46,7 +47,7 @@
   },
   "devDependencies": {
     "@currents/playwright": "1.4.5",
-    "@playwright/test": "1.44.1",
+    "@playwright/test": "1.48.0",
     "@types/node": "^20.14.10",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",

src/components/Header/index.tsx

@@ -27,6 +27,13 @@ const Header = (): JSX.Element => {
     if (body) body.classList.toggle("no-scroll", !menu);
   };
 
+  const isPlatform =
+    platformPaths.some((path) => path === currentPath) ||
+    currentPath.includes("network/") ||
+    currentPath.includes("chains/") ||
+    currentPath.includes("strategies/");
+
+  const isVaults = currentPath === "" || currentPath.includes("vault/");
   return (
     <WagmiLayout>
       <header className="font-manrope bg-accent-950 md:bg-transparent rounded-b-[16px]">
@@ -41,33 +48,15 @@ const Header = (): JSX.Element => {
         <div className="menu w-2/12 text-[16px]">
           <a
             data-testid="vaults-link"
-            className={
-              currentPath === "" || currentPath.includes("vault/")
-                ? "active"
-                : ""
-            }
+            className={isVaults ? "active" : ""}
             href="/"
           >
             Vaults
           </a>
-          <a
-            data-testid="vaults-link"
-            className={currentPath === "users" ? "active" : ""}
-            href="/users"
-          >
+          <a className={currentPath === "users" ? "active" : ""} href="/users">
             Users
           </a>
-          <a
-            data-testid="vaults-link"
-            className={
-              platformPaths.some((path) => path === currentPath) ||
-              currentPath.includes("network") ||
-              currentPath.includes("chains")
-                ? "active"
-                : ""
-            }
-            href="/platform"
-          >
+          <a className={isPlatform ? "active" : ""} href="/platform">
             Platform
           </a>
         </div>
@@ -83,21 +72,19 @@ const Header = (): JSX.Element => {
         </div>
         <nav className={`menu-nav text-center gap-3 ${menu && "active"}`}>
           <a
-            className={`px-4 py-[10px] font-semibold ${currentPath === "" || currentPath.includes("vault/") ? "bg-accent-800 rounded-[16px]" : ""}`}
+            className={`px-4 py-[10px] font-semibold ${isVaults ? "bg-accent-800 rounded-[16px]" : ""}`}
             href="/"
           >
             Vaults
           </a>
           <a
-            data-testid="vaults-link"
             className={`px-4 py-[10px] font-semibold ${currentPath === "users" ? "bg-accent-800 rounded-[16px]" : ""}`}
             href="/users"
           >
             Users
           </a>
           <a
-            data-testid="vaults-link"
-            className={`px-4 py-[10px] font-semibold ${platformPaths.some((path) => path === currentPath) || currentPath.includes("network") ? "bg-accent-800 rounded-[16px]" : ""}`}
+            className={`px-4 py-[10px] font-semibold ${isPlatform ? "bg-accent-800 rounded-[16px]" : ""}`}
             href="/platform"
           >
             Platform

src/modules/Platform/components/Assets.tsx

@@ -4,7 +4,7 @@ import { assets } from "@stabilitydao/stability";
 
 import { sortTable } from "@utils";
 
-import { Breadcrumbs, TableColumnSort } from "@ui";
+import { Breadcrumbs, TableColumnSort, HeadingText } from "@ui";
 
 import { ASSETS_TABLE } from "@constants";
 
@@ -32,7 +32,7 @@ const Assets = (): JSX.Element => {
     <div>
       <Breadcrumbs links={["Platform", "Assets"]} />
 
-      <h1>Assets</h1>
+      <HeadingText text="Assets" scale={1} />
 
       <table className="font-manrope w-full">
         <thead className="bg-accent-950 text-neutral-600 h-[36px]">