Admin UI title, brand color change, vendure info hiding feature

[BeepLoveKarki]

I want a function in the admin UI dashboard where I can modify Admin UI branding as per my own brand like adding a brand color instead of blue everywhere, hiding/modifying the vendure related texts and branding.

Also if possible, css customization features like of wordpress can also be good if possible.

[jeancx]

Hi i would like to do this, if i may. My idea is to modify admin-ui-plugin, to add customized configs on adminUiConfig like:

// project/vendure-config.ts
plugins: [
  AdminUiPlugin.init({
    port: 3002,
    app: {
      path: 'admin-ui/dist',
      adminUiConfig: {
        brand: 'My Store',
        faviconPath: 'favicon.ico',
        smallLogoPath: 'my-store-logo-75px.png',
        bigLogoPath: 'my-store-logo-300px.png',
        stylePath: 'my-store-style.scss',
        hideVendureBranding: false,
      },
    }
  }),
],

• Modify admin-ui to render customizations on component html
• Make admin-ui-plugin to modify index.html from compiled admin-ui to inject custom style after default style link, so user can customize and overwrite desired styles.
• Modify interface AdminUiConfig on common/lib/shared-types to accept new configs.

[Prashantch265]

brand: 'my brand', --> display my brand on the login page when hideVendureBranding is true
hideVendureBranding: true, --> hides custom logo from navbar when set true

I don't know if there are any restrictions regarding the community edition, but I cannot set my brand name and custom logo with the following options.

adminUiConfig: {
                apiPort: 3000,
                brand: 'My Brand',
                hideVendureBranding: true,
                hideVersion: true,
                // loginImageUrl: path.join(__dirname, '../public/loginscreen.jpeg'),  // it throws 404 not found but I can access the image in my browser with URL
            },
            app: compileUiExtensions({
                outputPath: path.join(__dirname, '../admin-ui'),
                extensions: [
                    UiPlugin.ui,
                    setBranding({
                        
                        // This is used as the branding in the top-left above the navigation
                        smallLogoPath: path.join(__dirname, '../public/logo-large.png'),
                        // This is used on the login page
                        largeLogoPath: path.join(__dirname, '../public/logo-large.png'),
                        faviconPath: path.join(__dirname, '../public/favicon.ico'),
                      }),
                    
                ],
                devMode: true,
            }),