all: Upgrade buttons to MDC component spec (connects #9166)

[paulbert]

So far ran the automatic script just on the first page of voices the layout is all over the place. It'll take a bit more work to fix this.

[paulbert]

On the resources page alignment got funky:

[paulbert]

X on the shelf is misaligned:

[paulbert]

Generally the icon button is overflowing some of the cards and tables (this is from courses list):

[paulbert]

I think this is ready for review. The resources issue above exists on the main branch so I made an issue for that #9250. The X and triple dot icon issues don't feel breaking to me. I'll see if I can fix them but it'd be good to get another review on this in case there are more pressing layout issues that I'm missing.

[Mutugiii]

• [x] Language select & profile image

The language select button text is off alignment as well, and the profile image has a weird cutoff that isn't there when it's just the icon:

On master the profile image looks like this:

• [x] Eye icon in the login dialog

The eye input overflows:

• [x] myDashboard close icon

Feels a little bit too big than it was and is much closer to the border:

• [x] Teams/Enterprises buttons

Request to join button icon is cutoff

-> Generally icon buttons are noticeably smaller/thinner

• [x] Chat sidebar controls

new chat & close sidebar buttons alignment:

similarly, the open drawer alignment is wider at the bottom:

• [x] Run sync button alignment

• [x] AI configurations

API keys inline icons are zoomed:

• [x] achievements buttons alignment

• [x] Change password eye icon

• [x] Edit team/enterprise/course icon looks extended

• [x] Courses: View resources button alignment

[Mutugiii]

Not sure if these selectors should be updated as well

• src/app/surveys/surveys.component.scss:39,55,76 - button[mat-raised-button]
• src/app/login/login.scss:54 - button[mat-raised-button]
• src/app/teams/teams.scss:35,82 - button[mat-raised-button]
• src/app/users/users-table.scss:34,50 - button[mat-raised-button]

[paulbert]

Not sure if these selectors should be updated as well

* src/app/surveys/surveys.component.scss:39,55,76 - button[mat-raised-button]

* src/app/login/login.scss:54 - button[mat-raised-button]

* src/app/teams/teams.scss:35,82 - button[mat-raised-button]

* src/app/users/users-table.scss:34,50 - button[mat-raised-button]

Good question. I'll check if they're used after the change and remove them if not.

[paulbert]

@Mutugiii Those styles look like they're being applied and they're the same size and position as the current app

[Saby-Bishops]

@codex review

[chatgpt-codex-connector[bot]]

Codex Review: Didn't find any major issues. Delightful!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".