DIRACGrid · aldbr · Aug 18, 2026 · Jul 14, 2026
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@
 - **Developing a DiracX-Web extension?** Go straight to the [:page_facing_up: Extension README](https://diracx.diracgrid.org/en/latest/developer/manage_extension/)
 - **Managing the repository?** Discover tips and tricks in the [:book: Ops Guide](https://diracx.diracgrid.org/en/latest/dev/setup_environment/)
 
-- **Interested in contributing?** Read the [:star: Contributing Document](CONTRIBUTING.md)
+- **Interested in contributing?** Read the [:star: Contributing Document](docs/dev/how-to/contribute-to-web.md)
 
 
 
diff --git a/packages/diracx-web-components/eslint.config.js b/packages/diracx-web-components/eslint.config.js
@@ -5,6 +5,7 @@ import _import from "eslint-plugin-import";
 import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
+import jsxA11y from "eslint-plugin-jsx-a11y";
 import tsParser from "@typescript-eslint/parser";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
@@ -30,6 +31,7 @@ export default [
       "prettier",
     ),
   ),
+  jsxA11y.flatConfigs.recommended,
   {
     plugins: {
       import: fixupPluginRules(_import),
@@ -79,6 +81,19 @@ export default [
           ignoreRestSiblings: true,
         },
       ],
+      "@typescript-eslint/no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "@mui/icons-material",
+              message:
+                "Import icons individually: import Icon from '@mui/icons-material/Icon'",
+              allowTypeImports: true,
+            },
+          ],
+        },
+      ],
       "no-restricted-properties": [
         "error",
         {

diff --git a/packages/diracx-web-components/src/components/DashboardLayout/Dashboard.tsx b/packages/diracx-web-components/src/components/DashboardLayout/Dashboard.tsx
@@ -7,7 +7,13 @@ import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Stack from "@mui/material/Stack";
-import { Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Typography,
+  darken,
+  lighten,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import { useCurrentApplication } from "../../hooks/application";
 import { ProfileButton } from "./ProfileButton";
 import { ThemeToggleButton } from "./ThemeToggleButton";
@@ -47,6 +53,19 @@ export default function Dashboard({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
+  // Endpoints for the app title gradient, derived per palette mode. The
+  // palette mains are tuned for surfaces rather than text and are far too
+  // light to read against the light-mode app bar (~2:1), so darken them
+  // there and lighten them on dark; both modes then clear WCAG AA (4.5:1).
+  const titleGradientStart =
+    theme.palette.mode === "light"
+      ? darken(theme.palette.primary.main, 0.4)
+      : lighten(theme.palette.primary.main, 0.2);
+  const titleGradientEnd =
+    theme.palette.mode === "light"
+      ? darken(theme.palette.secondary.main, 0.4)
+      : lighten(theme.palette.secondary.main, 0.2);
+
   /** State management for mobile drawer */
   const [mobileOpen, setMobileOpen] = useState(false);
   const handleDrawerToggle = () => {
@@ -90,7 +109,6 @@ export default function Dashboard({
             }}
           >
             <Typography
-              color="text.primary"
               variant={isMobile ? "h6" : "h4"}
               fontWeight={"bold"}
               width={"fit-content"}
@@ -99,6 +117,17 @@ export default function Dashboard({
                 whiteSpace: "nowrap",
                 textOverflow: "ellipsis",
                 paddingLeft: 2,
+                // Fallback color first: the gradient relies on a transparent
+                // text fill, which would hide the title outright wherever
+                // background-clip: text is unsupported.
+                color: "text.primary",
+                "@supports ((background-clip: text) or (-webkit-background-clip: text))":
+                  {
+                    background: `linear-gradient(90deg, ${titleGradientStart}, ${titleGradientEnd})`,
+                    backgroundClip: "text",
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                  },
               }}
             >
               {appTitle}

diff --git a/packages/diracx-web-components/src/components/DashboardLayout/DrawerItem.tsx b/packages/diracx-web-components/src/components/DashboardLayout/DrawerItem.tsx
@@ -227,6 +227,7 @@ export default function DrawerItem({
             // The rename field only appears in direct response to a user
             // action (context-menu "Rename"), so moving focus into it is
             // the expected behavior, not a focus steal.
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             size="small"
           />

diff --git a/packages/diracx-web-components/src/components/DashboardLayout/DrawerItemGroup.tsx b/packages/diracx-web-components/src/components/DashboardLayout/DrawerItemGroup.tsx
@@ -149,6 +149,7 @@ export default function DrawerItemGroup({
             // The rename field only appears in direct response to a user
             // action (context-menu "Rename"), so moving focus into it is
             // the expected behavior, not a focus steal.
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             size="small"
           />

diff --git a/packages/diracx-web-components/src/components/DashboardLayout/ProfileButton.tsx b/packages/diracx-web-components/src/components/DashboardLayout/ProfileButton.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useOidc, useOidcAccessToken } from "@axa-fr/react-oidc";
-import Info from "@mui/icons-material/Info";
 import Logout from "@mui/icons-material/Logout";
 import CorporateFare from "@mui/icons-material/CorporateFare";
 import Groups from "@mui/icons-material/Groups";
@@ -179,16 +178,6 @@ export function ProfileButton() {
           </Stack>
         </MenuItem>
         <Divider />
-        <MenuItem
-          onClick={() => {
-            handleClose();
-          }}
-        >
-          <ListItemIcon>
-            <Info fontSize="small" />
-          </ListItemIcon>
-          About
-        </MenuItem>
         <MenuItem
           onClick={() => {
             handleClose();

diff --git a/packages/diracx-web-components/src/components/Login/LoginForm.tsx b/packages/diracx-web-components/src/components/Login/LoginForm.tsx
@@ -3,17 +3,18 @@
 import React, { useState, useEffect, use } from "react";
 
 import {
+  Alert,
   Box,
   Typography,
   FormControl,
   InputLabel,
   Select,
   MenuItem,
   Button,
-  Stack,
   Autocomplete,
   TextField,
   SelectChangeEvent,
+  Skeleton,
 } from "@mui/material";
 
 import { useOidc } from "@axa-fr/react-oidc";
@@ -115,10 +116,42 @@ export function LoginForm({
   };
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <Box
+        sx={{
+          ml: { xs: "5%", md: "30%" },
+          mr: { xs: "5%", md: "30%" },
+          pt: "10%",
+        }}
+      >
+        <Box sx={{ display: "flex", justifyContent: "center", pb: "10%" }}>
+          <Skeleton
+            variant="circular"
+            animation="pulse"
+            width={150}
+            height={150}
+          />
+        </Box>
+        <Skeleton
+          variant="rectangular"
+          animation="pulse"
+          height={56}
+          sx={{ mb: 4 }}
+        />
+        <Skeleton
+          variant="rectangular"
+          animation="pulse"
+          height={56}
+          sx={{ mb: 4 }}
+        />
+        <Skeleton variant="rectangular" animation="pulse" height={42} />
+      </Box>
+    );
   }
   if (error) {
-    return <div>An error occurred while fetching metadata.</div>;
+    return (
+      <Alert severity="error">An error occurred while fetching metadata.</Alert>
+    );
   }
   if (!metadata) {
     return <div>No metadata found.</div>;
@@ -207,25 +240,14 @@ export function LoginForm({
                 ))}
               </Select>
             </FormControl>
-            <Stack
-              direction={{ xs: "column", sm: "row" }}
-              spacing={2}
+            <Button
+              variant="contained"
               sx={{ mt: 5, width: "100%" }}
+              onClick={handleConfigurationChanges}
+              data-testid="login-form-button"
             >
-              <Button
-                variant="contained"
-                sx={{
-                  flexGrow: 1,
-                }}
-                onClick={handleConfigurationChanges}
-                data-testid="login-form-button"
-              >
-                Login via your Identity Provider
-              </Button>
-              <Button variant="outlined" onClick={() => {}}>
-                Advanced Options
-              </Button>
-            </Stack>
+              Login via your Identity Provider
+            </Button>
             <Typography
               sx={{ paddingTop: "5%", color: "gray", textAlign: "center" }}
             >