GitHub user dosubot[bot] added a comment to the discussion: Assistance regarding redesigning the login page of the superset
<!-- Answer --> Superset v6.0.0's login page is now a React component, so changes to `/templates/tail_js_custom_extra.html` won't affect it—the UI is no longer rendered by Flask templates but by frontend code instead ([discussion](https://github.com/apache/superset/discussions/37057)). To redesign the login page, you should edit the React component at [`superset-frontend/src/pages/Login/index.tsx`](https://github.com/apache/superset/blob/master/superset-frontend/src/pages/Login/index.tsx). You can add new UI elements or modify the layout directly in the JSX returned by the `Login` function. For custom CSS, use Emotion's `styled` function or add new styled components within this file. Superset uses Ant Design for UI components and Emotion for CSS-in-JS ([style guidelines](https://github.com/apache/superset/wiki/Frontend-Style-Guidelines)), so follow those conventions for consistency. After making your changes, rebuild the frontend assets so your updates appear in the application. If you want to apply global styles, you can also look at [`superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx`](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx), which uses Emotion's `Global` component for theming. Let me know if you need more specifics on the build process or component structure! <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/190af588-2c4c-40d4-8c38-7999d66b839f?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%20v6.0.0%27s%20login%20page%20is%20now%20a%20React%20component%2C%20so%20changes%20to%20%60/templates/tail_js_custom_extra.html%60%20won%27t%20affect%20it%E2%80%94the%20UI%20is%20no%20longer%20rendered%20by%20Flask%20templates%20but%20by%20frontend%20code%20instead%20%28%5Bdiscussion%5D%28https%3A//github.com/apache/superset/discussions/37057%29%29.%20%0A%0ATo%20redesign%20the%20login%20page%2C%20you%20should%20edit%20the%20React%20component%20at%20%5B%60superset-frontend/src/pages/Login/index.tsx%60%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/src/pages/Login/index.tsx%29.%20You%20can%20add%20new%20UI%20elements%20or%20modify%20the%20layout%20directly%20in%20the%20JSX%20returned%20by%20the%20%60Login%60%20function. %20For%20custom%20CSS%2C%20use%20Emotion%27s%20%60styled%60%20function%20or%20add%20new%20styled%20components%20within%20this%20file.%20Superset%20uses%20Ant%20Design%20for%20UI%20components%20and%20Emotion%20for%20CSS-in-JS%20%28%5Bstyle%20guidelines%5D%28https%3A//github.com/apache/superset/wiki/Frontend-Style-Guidelines%29%29%2C%20so%20follow%20those%20conventions%20for%20consistency.%0A%0AAfter%20making%20your%20changes%2C%20rebuild%20the%20frontend%20assets%20so%20your%20updates%20appear%20in%20the%20application.%0A%0AIf%20you%20want%20to%20apply%20global%20styles%2C%20you%20can%20also%20look%20at%20%5B%60superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx%60%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx%29%2C%20which%20uses%20Emotion%27s%20%60Global%60%20component%20for%20theming.%0A%0ALet%20me%20know%20if%20you%20need%20more%20specifics%20on%20the%20build%20process%20or%20compone nt%20structure%21) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37492) GitHub link: https://github.com/apache/superset/discussions/37492#discussioncomment-15618310 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
