0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
ghost/apps/admin-x-settings
Peter Zimon 9f13ad0716
🎨 Admin visual design updates (#21987)
ref DES-797

A lot of visual details of the Admin is outdated and inconsistent with
newer UI components such as settings. This PR improves several of these
inconsistencies and refreshes the visual design of the Admin outside
settings. In details the following components have been updated:

- Input fields and dropdowns use grey background color in Post settings
menu when not in-focus
- Got rid of the grey background for sections in Member details and Tag
details
- Updated typography details esp. as font-weights and sizes
- Updated modal corners, shadows
- Added a way to close the main navigation
- Updated main navigation styles
- Added flat background color for list items on hover
- Updated subscription cards in Member details
- Further smaller visual design changes
2025-01-13 17:23:43 +01:00
..
src 🎨 Admin visual design updates (#21987) 2025-01-13 17:23:43 +01:00
test 🎨 Made 5 settings quicker to edit at the top-level in Settings (#21976) 2025-01-08 16:33:54 +00:00
.eslintignore Extracted AdminX design system to a separate package (#18878) 2023-11-08 12:33:18 +00:00
.eslintrc.cjs Temporarily fixed eslint rules being disabled in AdminX (#17565) 2023-08-02 08:37:51 +01:00
.yarnrc Prevented git tags from being created for apps 2023-07-10 13:09:28 +02:00
index.html Moved Admin-X-Settings to apps/ folder 2023-06-23 14:37:39 +02:00
node-shim.cjs Port custom theme setting visibility to admin-x (#18367) 2023-10-02 15:54:14 +01:00
package.json Added support for line breaks in more editor card fields (credit: @cathysarisky) 2025-01-08 16:50:03 +00:00
playwright.config.mjs Updated files with mixed named/default exports to use only named exports (#19385) 2023-12-14 16:01:28 +00:00
postcss.config.cjs Created a skeleton AdminX demo app (#19005) 2023-11-20 13:30:15 +00:00
README.md Updated Admin-X settings readme (#18721) 2023-10-23 10:22:03 +07:00
tailwind.config.cjs Renamed admin-x-design to admin-x-design-system for clarity (#18914) 2023-11-08 15:10:43 +00:00
tsconfig.json Moved AdminX test config to framework package (#19096) 2023-11-22 13:39:32 +00:00
vite.config.mjs Custom fonts (#21337) 2024-10-24 07:43:08 -04:00

Admin X Settings

Ghost Admin Settings in React

Development

Pre-requisites

  • Run yarn in Ghost monorepo root

Running the development version

Run yarn dev to start the development server to test/develop the settings standalone. This will generate a demo site from the index.html file which renders the app and makes it available on http://localhost:5173

Running inside Admin

Run yarn dev (like you would run Ghost dev normally) from the top-level repo. AdminX will automatically rebuild when you make changes.

Develop

This is a monorepo package.

Follow the instructions for the top-level repo.

  1. git clone this repo & cd into it as usual
  2. Run yarn to install top-level dependencies.

Test

  • yarn lint run just eslint
  • yarn test:acceptance runs acceptance tests
  • yarn test:unit runs unit tests
  • yarn test:acceptance path/to/test runs a specific test
  • yarn test:acceptance:slowmo runs acceptance tests in slow motion and headed mode, useful for debugging and developing tests