From de45fe65d5baf151df6e7abd51eed8f425bc7c6f Mon Sep 17 00:00:00 2001 From: Verena Chung <9377970+vpchung@users.noreply.github.com> Date: Tue, 31 Oct 2023 11:03:13 -0700 Subject: [PATCH] fix(openchallenges): upgrade legacy components (#2290) * not-found page: upgrade MatCard * org-profile page: remove unused tabs component * github-button: upgrade MatButton * _app-theme: upgrade legacy; fix fonts * navbar: upgrade MatButton; fix colors and padding * fix typography for buttons * signup page: upgrade components * add required `mat-label` * update styles to account for changes * user-button: upgrade MatButton, MatMenu * update styles to account for changes * upgrade component in commented code * remove dependency on legacy-* in _app-theme * add typography to discord button; add discord theme * schematic: remove unused font; upgrade legacies --- apps/openchallenges/app/src/_app-theme.scss | 19 +++++------ apps/schematic/app/src/_app-theme.scss | 15 ++------- .../not-found/src/lib/not-found.component.ts | 2 +- .../src/lib/org-profile.component.ts | 3 -- .../signup/src/lib/signup.component.html | 3 ++ .../signup/src/lib/signup.component.scss | 7 ++-- .../signup/src/lib/signup.component.ts | 8 ++--- .../styles/src/lib/_general.scss | 2 +- libs/openchallenges/themes/src/_fonts.scss | 21 ++++++------ libs/openchallenges/ui/src/_lib-theme.scss | 2 ++ .../button-github/button-github.component.ts | 2 +- .../discord-button/_discord-button-theme.scss | 9 ++++-- .../discord-button.component.html | 32 ++++++++++--------- .../ui/src/lib/navbar/_navbar-theme.scss | 11 ++++++- .../ui/src/lib/navbar/navbar.component.scss | 4 ++- .../ui/src/lib/navbar/navbar.component.ts | 2 +- .../lib/user-button/_user-button-theme.scss | 20 ++++++------ .../user-button/user-button.component.scss | 8 ++--- .../lib/user-button/user-button.component.ts | 4 +-- .../src/lib/user-profile.component.ts | 2 +- 20 files changed, 91 insertions(+), 85 deletions(-) diff --git a/apps/openchallenges/app/src/_app-theme.scss b/apps/openchallenges/app/src/_app-theme.scss index ac62858f4b..5f61f101f7 100644 --- a/apps/openchallenges/app/src/_app-theme.scss +++ b/apps/openchallenges/app/src/_app-theme.scss @@ -4,8 +4,8 @@ @use 'libs/openchallenges/themes/src/palettes' as palettes; @use 'libs/openchallenges/themes/src/index' as openchallenges; -@include mat.legacy-typography-hierarchy(fonts.$lato); -@include mat.legacy-core(); +@include mat.typography-hierarchy(fonts.$lato); +@include mat.core(); $primary: mat.define-palette(palettes.$dark-blue-palette, 600); $accent: mat.define-palette(palettes.$accent-purple-palette, 400); @@ -16,9 +16,9 @@ $theme: mat.define-light-theme( primary: $primary, accent: $accent, ), - typography: ( - lato: fonts.$lato, - ), + typography: fonts.$lato, + density: 0, + is-dark: false, ) ); @@ -32,14 +32,11 @@ $theme: map.deep-merge( ) ); -// Emit theme-dependent styles for common features used across multiple -// components. -@include mat.legacy-core-theme($theme); +// Emit theme-dependent styles for common features used across multiple components. +@include mat.core-theme($theme); // Emit styles for MatButton based on `$theme`. -@include mat.legacy-button-theme($theme); -@include mat.legacy-progress-spinner-theme($theme); -@include mat.legacy-button-typography(fonts.$lato); +@include mat.button-theme($theme); // Include the theme mixins for other components you use here. @include openchallenges.theme($theme); diff --git a/apps/schematic/app/src/_app-theme.scss b/apps/schematic/app/src/_app-theme.scss index fe99140449..d589a8c004 100644 --- a/apps/schematic/app/src/_app-theme.scss +++ b/apps/schematic/app/src/_app-theme.scss @@ -1,11 +1,9 @@ @use 'sass:map'; @use '@angular/material' as mat; -@use 'libs/openchallenges/themes/src/fonts' as fonts; @use 'libs/openchallenges/themes/src/palettes' as palettes; @use 'libs/openchallenges/themes/src/index' as openchallenges; -@include mat.legacy-typography-hierarchy(fonts.$fira); -@include mat.legacy-core(); +@include mat.core(); $primary: mat.define-palette(palettes.$dark-blue-palette, 600); $accent: mat.define-palette(palettes.$accent-purple-palette, 400); @@ -16,9 +14,6 @@ $theme: mat.define-light-theme( primary: $primary, accent: $accent, ), - typography: ( - fira: fonts.$fira, - ), ) ); @@ -29,17 +24,13 @@ $theme: map.deep-merge( color: ( figma: palettes.$figma-collection, ), + density: 0, ) ); // Emit theme-dependent styles for common features used across multiple // components. -@include mat.legacy-core-theme($theme); - -// Emit styles for MatButton based on `$theme`. -// @include mat.legacy-button-theme($theme); -// @include mat.legacy-progress-spinner-theme($theme); -// @include mat.legacy-button-typography(fonts.$fira); +@include mat.core-theme($theme); // Include the theme mixins for other components you use here. // @include openchallenges.theme($theme); diff --git a/libs/openchallenges/not-found/src/lib/not-found.component.ts b/libs/openchallenges/not-found/src/lib/not-found.component.ts index 14ae0d625f..886048d683 100644 --- a/libs/openchallenges/not-found/src/lib/not-found.component.ts +++ b/libs/openchallenges/not-found/src/lib/not-found.component.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { RouterModule } from '@angular/router'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; +import { MatCardModule } from '@angular/material/card'; import { ConfigService } from '@sagebionetworks/openchallenges/config'; import { FooterComponent } from '@sagebionetworks/openchallenges/ui'; diff --git a/libs/openchallenges/org-profile/src/lib/org-profile.component.ts b/libs/openchallenges/org-profile/src/lib/org-profile.component.ts index 0f71544a1f..d398a44495 100644 --- a/libs/openchallenges/org-profile/src/lib/org-profile.component.ts +++ b/libs/openchallenges/org-profile/src/lib/org-profile.component.ts @@ -40,8 +40,6 @@ import { } from '@sagebionetworks/openchallenges/util'; import { CommonModule } from '@angular/common'; import { MatIconModule } from '@angular/material/icon'; -// import { MatTabsModule } from '@angular/material/tabs'; -import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs'; import { OrgProfileChallengesComponent } from './org-profile-challenges/org-profile-challenges.component'; import { OrgProfileMembersComponent } from './org-profile-members/org-profile-members.component'; import { OrgProfileOverviewComponent } from './org-profile-overview/org-profile-overview.component'; @@ -55,7 +53,6 @@ import { getSeoData } from './org-profile-seo-data'; imports: [ CommonModule, RouterModule, - MatTabsModule, MatIconModule, OrgProfileOverviewComponent, OrgProfileChallengesComponent, diff --git a/libs/openchallenges/signup/src/lib/signup.component.html b/libs/openchallenges/signup/src/lib/signup.component.html index 479ea7ddb4..7793e8ec52 100644 --- a/libs/openchallenges/signup/src/lib/signup.component.html +++ b/libs/openchallenges/signup/src/lib/signup.component.html @@ -10,14 +10,17 @@

Join Us on OpenChallenges!

+ Email {{ getEmailErrorMessage() }} + Username {{ getUsernameErrorMessage() }} + Password {{ getPasswordErrorMessage() }} diff --git a/libs/openchallenges/signup/src/lib/signup.component.scss b/libs/openchallenges/signup/src/lib/signup.component.scss index a930dc4dcf..46da55f584 100644 --- a/libs/openchallenges/signup/src/lib/signup.component.scss +++ b/libs/openchallenges/signup/src/lib/signup.component.scss @@ -8,7 +8,7 @@ main { } .register-container { min-width: 320px; - max-width: 440px; + max-width: 460px; width: 100% } .title { @@ -25,10 +25,14 @@ main { display: flex; flex-direction: column; } +::ng-deep .mat-mdc-text-field-wrapper { + align-items: center !important; +} mat-form-field.new-username, mat-form-field.new-password, mat-form-field.new-email { height: 70px; + margin-bottom: 16px; } input.mat-input-element { padding: 10px 0; @@ -38,7 +42,6 @@ input.mat-input-element { flex-direction: column; text-align: center; } - .alternative { margin-top: 68px; display: flex; diff --git a/libs/openchallenges/signup/src/lib/signup.component.ts b/libs/openchallenges/signup/src/lib/signup.component.ts index d75ec75fdb..fc82fafb03 100644 --- a/libs/openchallenges/signup/src/lib/signup.component.ts +++ b/libs/openchallenges/signup/src/lib/signup.component.ts @@ -11,10 +11,10 @@ import { // import { MatFormFieldModule } from '@angular/material/form-field'; // import { MatInputModule } from '@angular/material/input'; import { Router, RouterModule } from '@angular/router'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; -import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; -import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; import { UserCreateRequest, UserService, diff --git a/libs/openchallenges/styles/src/lib/_general.scss b/libs/openchallenges/styles/src/lib/_general.scss index d6d7f6f5a2..581ced70f1 100644 --- a/libs/openchallenges/styles/src/lib/_general.scss +++ b/libs/openchallenges/styles/src/lib/_general.scss @@ -107,7 +107,7 @@ span.text-grey a { .btn-group button, .btn-group a { margin: 5px; - padding: 3px 32px; + padding: 21px 32px !important; } // SEARCH PAGES diff --git a/libs/openchallenges/themes/src/_fonts.scss b/libs/openchallenges/themes/src/_fonts.scss index a0b9009c04..f4f0388601 100644 --- a/libs/openchallenges/themes/src/_fonts.scss +++ b/libs/openchallenges/themes/src/_fonts.scss @@ -1,19 +1,16 @@ @use '@angular/material' as mat; -@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); -$fira: mat.define-typography-config( - $font-family: "'Fira Sans', sans-serif", -); $lato: mat.define-typography-config( - $headline-5: mat.define-typography-level(46px, 56px, 700, "'Lato', sans-serif"), - $headline-6: mat.define-typography-level(40px, 50px, 700, "'Lato', sans-serif"), - $subtitle-1: mat.define-typography-level(28px, 38px, 700, "'Lato', sans-serif", -0.1px), - $subtitle-2: mat.define-typography-level(18px, 30px, 400, "'Lato', sans-serif", -0.1px), - $body-1: mat.define-typography-level(21px, 36px, 400, "'Lato', sans-serif", -0.1px), - $body-2: mat.define-typography-level(16px, 26px, 400, "'Lato', sans-serif"), - $caption: mat.define-typography-level(14px, 21px, 400, "'Lato', sans-serif"), - $button: mat.define-typography-level(16px, 18px, 400, "'Lato', sans-serif"), + $font-family: "'Lato', sans-serif", + $headline-5: mat.define-typography-level(46px, 56px, 700), + $headline-6: mat.define-typography-level(40px, 50px, 700), + $subtitle-1: mat.define-typography-level(28px, 38px, 700, $letter-spacing: -0.1px), + $subtitle-2: mat.define-typography-level(20px, 32px, 400, $letter-spacing: -0.1px), + $body-1: mat.define-typography-level(21px, 36px, 400, $letter-spacing: -0.1px), + $body-2: mat.define-typography-level(16px, 26px, 400), + $caption: mat.define-typography-level(14px, 21px, 400), + $button: mat.define-typography-level(16px, 18px, 700), ); diff --git a/libs/openchallenges/ui/src/_lib-theme.scss b/libs/openchallenges/ui/src/_lib-theme.scss index ff4f86c868..78ba7a718d 100644 --- a/libs/openchallenges/ui/src/_lib-theme.scss +++ b/libs/openchallenges/ui/src/_lib-theme.scss @@ -6,6 +6,7 @@ @use './lib/organization-card/organization-card-theme' as organization-card; @use './lib/paginator/paginator-theme' as paginator; @use './lib/person-card/person-card-theme' as person-card; +@use './lib/discord-button/discord-button-theme' as discord-button; @mixin theme($theme) { @include button-github.theme($theme); @@ -16,4 +17,5 @@ @include organization-card.theme($theme); @include paginator.theme($theme); @include person-card.theme($theme); + @include discord-button.theme($theme); } diff --git a/libs/openchallenges/ui/src/lib/button-github/button-github.component.ts b/libs/openchallenges/ui/src/lib/button-github/button-github.component.ts index 44d7c85c17..9823231339 100644 --- a/libs/openchallenges/ui/src/lib/button-github/button-github.component.ts +++ b/libs/openchallenges/ui/src/lib/button-github/button-github.component.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; @Component({ selector: 'openchallenges-button-github', diff --git a/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss b/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss index ed50c1a960..892c1888b0 100644 --- a/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss +++ b/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss @@ -6,13 +6,16 @@ $primary: map.get($config, primary); $accent: map.get($config, accent); $warn: map.get($config, warn); - $background: map.get($config, background); - $foreground: map.get($config, foreground); // add color-related scss here + .docs-button { + color: white !important; + } } -@mixin typography($theme) {} +@mixin typography($theme) { + $typography-config: mat.get-typography-config($theme); +} @mixin theme($theme) { $color-config: mat.get-color-config($theme); diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html index b068149e54..83485bc112 100644 --- a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html +++ b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html @@ -1,15 +1,17 @@ - - - {{ label }} - +
+ + + {{ label }} + +
diff --git a/libs/openchallenges/ui/src/lib/navbar/_navbar-theme.scss b/libs/openchallenges/ui/src/lib/navbar/_navbar-theme.scss index dcc21bc232..24cbe7bd02 100644 --- a/libs/openchallenges/ui/src/lib/navbar/_navbar-theme.scss +++ b/libs/openchallenges/ui/src/lib/navbar/_navbar-theme.scss @@ -9,10 +9,14 @@ openchallenges-navbar { color: mat.get-color-from-palette($primary, default-contrast); - + .sage-navbar { background: mat.get-color-from-palette($primary, 600); } + // Overwrite color specified by .mdc-button + .navbar-item { + color: white !important; + } .navbar-item:hover, .navbar-item:active, .navbar-item:focus { @@ -23,6 +27,11 @@ @mixin typography($theme) { $typography-config: mat.get-typography-config($theme); + + // Overwrite line-height specified by .mdc-button + .navbar-item { + line-height: 18px !important; + } } @mixin theme($theme) { diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.scss b/libs/openchallenges/ui/src/lib/navbar/navbar.component.scss index 535d16a22a..87a24a5484 100644 --- a/libs/openchallenges/ui/src/lib/navbar/navbar.component.scss +++ b/libs/openchallenges/ui/src/lib/navbar/navbar.component.scss @@ -13,7 +13,9 @@ padding: 8px 16px; box-shadow: 1px 5px 18px 0px rgba(0, 0, 0, 0.24); - > .mat-button { + > .mat-mdc-button { + padding: 0 16px !important; + &:last-child { margin-left: auto; } diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts b/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts index 0a706f1a19..d482b8ceb3 100644 --- a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts +++ b/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts @@ -1,10 +1,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { Avatar } from '../avatar/avatar'; import { EMPTY_AVATAR } from '../avatar/mock-avatars'; import { MenuItem } from '../user-button/menu-item'; +import { MatButtonModule } from '@angular/material/button'; import { UserButtonComponent } from '../user-button/user-button.component'; import { DiscordButtonComponent } from '../discord-button/discord-button.component'; import { NavbarSection } from './navbar-section'; diff --git a/libs/openchallenges/ui/src/lib/user-button/_user-button-theme.scss b/libs/openchallenges/ui/src/lib/user-button/_user-button-theme.scss index 2078a2ffdb..80572f055b 100644 --- a/libs/openchallenges/ui/src/lib/user-button/_user-button-theme.scss +++ b/libs/openchallenges/ui/src/lib/user-button/_user-button-theme.scss @@ -9,27 +9,27 @@ $warn: map.get($config, 'warn'); .user-button { - background-color: mat.get-color-from-palette($accent, 300); + background-color: mat.get-color-from-palette($accent, 300) !important; + color: white !important; } .user-dropdown { - background-color: #fff; + background-color: #fff !important; } - button.mat-menu-item{ - background-color: #fff; - transition: 0.3s; + button.mat-mdc-menu-item{ + background-color: #fff !important; + transition: 0.3s !important; } - button.mat-menu-item:hover { - background-color: mat.get-color-from-palette($primary, 100);; + button.mat-mdc-menu-item:hover { + background-color: mat.get-color-from-palette($primary, 100) !important; } } @mixin typography($theme) { - button.mat-menu-item{ - font-size: 15px; - font-family: 'Lato'; + button.mat-mdc-menu-item{ + font-size: 15px !important; } } diff --git a/libs/openchallenges/ui/src/lib/user-button/user-button.component.scss b/libs/openchallenges/ui/src/lib/user-button/user-button.component.scss index 6c242f2872..34da2e7df9 100644 --- a/libs/openchallenges/ui/src/lib/user-button/user-button.component.scss +++ b/libs/openchallenges/ui/src/lib/user-button/user-button.component.scss @@ -1,6 +1,6 @@ .user-button { height: 100%; - width:200px; + width: 200px; margin: 3px; padding: 5px 3px; @@ -17,16 +17,16 @@ width: 100% } -button.mat-menu-item { +button.mat-mdc-menu-item { padding-right: 122px; } @media only screen and (max-width: 855px) { .user-button { - width:100%; + width: 100%; div { justify-content: center; - span{ + span { padding-left: 8px; } } diff --git a/libs/openchallenges/ui/src/lib/user-button/user-button.component.ts b/libs/openchallenges/ui/src/lib/user-button/user-button.component.ts index 466e6eab12..f97ead456f 100644 --- a/libs/openchallenges/ui/src/lib/user-button/user-button.component.ts +++ b/libs/openchallenges/ui/src/lib/user-button/user-button.component.ts @@ -3,10 +3,10 @@ import { Avatar } from '../avatar/avatar'; import { EMPTY_AVATAR } from '../avatar/mock-avatars'; import { MenuItem } from './menu-item'; import { CommonModule } from '@angular/common'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu'; +import { MatMenuModule } from '@angular/material/menu'; import { RouterModule } from '@angular/router'; import { AvatarComponent } from '../avatar/avatar.component'; diff --git a/libs/openchallenges/user-profile/src/lib/user-profile.component.ts b/libs/openchallenges/user-profile/src/lib/user-profile.component.ts index 6ccddbad68..da28d4b2f5 100644 --- a/libs/openchallenges/user-profile/src/lib/user-profile.component.ts +++ b/libs/openchallenges/user-profile/src/lib/user-profile.component.ts @@ -41,7 +41,7 @@ // import { CommonModule } from '@angular/common'; // import { MatIconModule } from '@angular/material/icon'; // // import { MatTabsModule } from '@angular/material/tabs'; -// import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs'; +// import { MatTabsModule } from '@angular/material/tabs'; // import { UserProfileChallengesComponent } from './user-profile-challenges/user-profile-challenges.component'; // import { UserProfileOverviewComponent } from './user-profile-overview/user-profile-overview.component'; // import { UserProfileStarredComponent } from './user-profile-starred/user-profile-starred.component';