Buttons have black text on colored background

[mraible]

Overview of the issue

In previous versions of JHipster, I'm pretty sure the buttons had white text on buttons with colored backgrounds. In v7.7.0, the text is black.

Motivation for or Use Case

I believe the button text was white in previous releases. If you look at my blog post with v7.4.1, it does use a custom theme, but the button text is also white.

Reproduce the error

Create a new project with entities.

JHipster Version(s)

postgres@0.0.1-SNAPSHOT /Users/mraible/dev/spring-native-examples/postgres-webflux
└── (empty)

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "applicationType": "monolith",
    "authenticationType": "oauth2",
    "baseName": "Postgres",
    "blueprints": [
      {
        "name": "generator-jhipster-native",
        "version": "0.0.0"
      }
    ],
    "buildTool": "maven",
    "cacheProvider": "no",
    "clientFramework": "angularX",
    "clientPackageManager": "npm",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "creationTimestamp": 1632872179205,
    "cypressCoverage": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "devServerPort": 4200,
    "dtoSuffix": "DTO",
    "enableGradleEnterprise": false,
    "enableHibernateCache": false,
    "enableSwaggerCodegen": false,
    "enableTranslation": false,
    "entities": ["Blog", "Post", "Tag"],
    "entitySuffix": "",
    "jhiPrefix": "jhi",
    "jhipsterVersion": "7.7.0",
    "languages": ["en", "fr"],
    "lastLiquibaseTimestamp": 1632872631000,
    "messageBroker": false,
    "monorepository": true,
    "nativeLanguage": "en",
    "otherModules": [
      {
        "name": "generator-jhipster-native",
        "version": "0.0.0"
      }
    ],
    "packageName": "com.mycompany.myapp",
    "pages": [],
    "prodDatabaseType": "postgresql",
    "reactive": true,
    "searchEngine": false,
    "serverPort": "8080",
    "serverSideOptions": [],
    "serviceDiscoveryType": "no",
    "skipCheckLengthOfIdentifier": false,
    "skipClient": false,
    "skipCommitHook": true,
    "skipFakeData": false,
    "skipJhipsterDependencies": true,
    "skipServer": false,
    "skipUserManagement": true,
    "testFrameworks": ["cypress"],
    "websocket": false,
    "withAdminUi": true
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity Blog {
  name String required minlength(3)
  handle String required minlength(2)
}
entity Post {
  title String required
  content TextBlob required
  date Instant required
}
entity Tag {
  name String required minlength(2)
}
relationship ManyToOne {
  Blog{user(login)} to User
  Post{blog(name)} to Blog
}
relationship ManyToMany {
  Post{tag(name)} to Tag{entry}
}

paginate Post, Tag with infinite-scroll

Environment and Tools

openjdk version "17.0.2" 2022-01-18 OpenJDK Runtime Environment GraalVM CE 22.0.0.2 (build 17.0.2+8-jvmci-22.0-b05) OpenJDK 64-Bit Server VM GraalVM CE 22.0.0.2 (build 17.0.2+8-jvmci-22.0-b05, mixed mode, sharing)

git version 2.32.0 (Apple Git-132)

node: v16.13.2

npm: 8.1.2

Docker version 20.10.12, build e91ed57

Docker Compose version v2.2.3

[mshima]

This is related to bootstrap 5. The text color (black or white) is calculated based on the background color.

[mraible]

If that's the case, should we close this issue?

[mshima]

IMO white would look better for current colors, but I don’t know if it’s possible to do it for every component, without customization every component one by one. Eg: *-info (btn, modal, …)

[hamaarouf]

@mraible I created a project with jhipster 7.7.0 and I didn't have this issue. Im using React.

[mraible]

@hamaarouf It looks like your blue buttons have a brighter background than mine, so maybe that's why they use white text? Your aqua buttons (Voir) do have black text.

[mshima]

React is not customizing the colors like angular is.

[mraible]

If I look at Bootstrap's example buttons at https://getbootstrap.com/docs/5.3/components/buttons/, it seems like their colors are more appropriate. Maybe the Bootswatch theme is causing the issue?

[github-actions[bot]]

This issue is stale because it has been open for too long without any activity. Due to the moving nature of jhipster generated application, bugs can become invalid. If this issue still applies please comment otherwise it will be closed in 7 days

[mraible]

It still seems weird that React uses white text and Angular uses black.