fix(ui): fix and simplify org invite template view (#12580)

This fixes #12119 while simplifying the page a bit.

It also drops dependency on `/web_src/css/modules/card.css` module. Only the profile page still relies on it.

As an observation, I find the text "Please click the button below..." quite inadequate as web copy, but I decided to keep it as-is in this pull request.

In the `org.css` changes, I also removed references to two `.organization.invite #invite-box` selectors, since I couldn't find it anywhere in the source code.

Screenshot:
![image](/attachments/07a03b9f-0a69-41ff-b54a-1277783969e3)

## Checklist

The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. All work and communication must conform to Forgejo's [AI Agreement](https://codeberg.org/forgejo/governance/src/branch/main/AIAgreement.md). There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).

### Tests for Go changes

(can be removed for JavaScript changes)

- I added test coverage for Go changes...
  - [ ] in their respective `*_test.go` for unit tests.
  - [x] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I ran...
  - [ ] `make pr-go` before pushing

### Tests for JavaScript changes

(can be removed for Go changes)

- I added test coverage for JavaScript changes...
  - [ ] in `web_src/js/*.test.js` if it can be unit tested.
  - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [ ] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change.
- [x] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change.

*The decision if the pull request will be shown in the release notes is up to the mergers / release team.*

The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12580
Reviewed-by: Antonin Delpeuch <wetneb@noreply.codeberg.org>

options/locale/locale_en-US.ini

@@ -2872,7 +2872,6 @@ teams.all_repositories = All repositories
 teams.all_repositories_helper = Team has access to all repositories. Selecting this will <strong>add all existing</strong> repositories to the team.
 teams.invite.title = You have been invited to join team <strong>%s</strong> in organization <strong>%s</strong>.
 teams.invite.by = Invited by %s
-teams.invite.description = Please click the button below to join the team.
 
 [admin]
 dashboard = Dashboard

templates/org/team/invite.tmpl

@@ -2,20 +2,17 @@
 <div role="main" aria-label="{{.Title}}" class="page-content organization invite">
 	<div class="ui container">
 		{{template "base/alert" .}}
-		<div class="ui centered card">
-			<div class="image">
-				{{ctx.AvatarUtils.Avatar .Organization 140}}
-			</div>
-			<div class="content">
-				<div class="header">{{ctx.Locale.Tr "org.teams.invite.title" .Team.Name .Organization.Name}}</div>
-				<div class="meta">{{ctx.Locale.Tr "org.teams.invite.by" .Inviter.Name}}</div>
-				<div class="description">{{ctx.Locale.Tr "org.teams.invite.description"}}</div>
-			</div>
-			<div class="extra content">
-				<form class="ui form" action="" method="post">
-					<button class="fluid ui primary button">{{ctx.Locale.Tr "org.teams.join"}}</button>
-				</form>
-			</div>
+		<div class="invite-content">
+			<hgroup>
+				<div>{{ctx.AvatarUtils.Avatar .Organization 140}}</div>
+				<h2>{{ctx.Locale.Tr "org.teams.invite.title" .Team.Name .Organization.Name}}</h2>
+			</hgroup>
+
+			<p>{{ctx.Locale.Tr "org.teams.invite.by" .Inviter.Name}}</p>
+
+			<form class="ui form" action="" method="post">
+				<button class="ui primary button">{{ctx.Locale.Tr "org.teams.join"}}</button>
+			</form>
 		</div>
 	</div>
 </div>

tests/integration/org_team_invite_test.go

@@ -57,8 +57,17 @@ func TestOrgTeamEmailInvite(t *testing.T) {
 
 	session = loginUser(t, user.Name)
 
-	// join the team
+	// get the invite page
 	inviteURL := fmt.Sprintf("/org/invite/%s", invites[0].Token)
+	req = NewRequest(t, "GET", inviteURL)
+	resp = session.MakeRequest(t, req, http.StatusOK)
+	doc := NewHTMLParser(t, resp.Body)
+
+	// check the button exists
+	submitButton := doc.Find(`button:contains('Join')`).Length()
+	assert.Equal(t, 1, submitButton)
+
+	// join the team
 	req = NewRequest(t, "POST", inviteURL)
 	resp = session.MakeRequest(t, req, http.StatusSeeOther)
 	req = NewRequest(t, "GET", test.RedirectURL(resp))

web_src/css/org.css

@@ -155,24 +155,22 @@
   margin-bottom: 5px;
 }
 
-.organization.invite #invite-box {
-  margin: 50px auto auto;
-  width: 500px !important;
+.organization.invite .invite-content {
+  max-width: 420px;
+  margin-inline: auto;
+  margin-block: 3rem;
+  text-align: center;
 }
-
-.organization.invite #invite-box #search-user-box input {
-  margin-inline-start: 0;
-  width: 300px;
+.organization.invite .invite-content :is(h2, p) {
+  text-wrap: balance;
+  overflow-wrap: break-word;
 }
-
-.organization.invite #invite-box .ui.button {
-  margin-inline-start: 5px;
-  margin-top: -3px;
+.organization.invite .invite-content h2 {
+  margin-block-end: 1rem;
+  font-size: 1.3rem;
 }
-
-.organization.invite .ui.avatar {
-  width: 100%;
-  height: 100%;
+.organization.invite h2 :is(b, strong) {
+  font-weight: var(--font-weight-bold);
 }
 
 .organization.teams .detail .item {