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
Sage-Bionetworks · Oct 31, 2023 · de45fe6 · de45fe6
1 parent 73442f9
commit de45fe6
Show file tree

Hide file tree

Showing 20 changed files with 91 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -10,14 +10,17 @@ <h3>Join Us on OpenChallenges!</h3>
     </div>
     <form class="form-container" [formGroup]="newUserForm" novalidate>
       <mat-form-field class="new-email" appearance="outline">
+        <mat-label>Email</mat-label>
         <input matInput placeholder="Email" type="email" formControlName="email" />
         <mat-error *ngIf="email?.invalid">{{ getEmailErrorMessage() }} </mat-error>
       </mat-form-field>
       <mat-form-field class="new-username" appearance="outline">
+        <mat-label>Username</mat-label>
         <input matInput placeholder="Username" type="text" formControlName="username" />
         <mat-error *ngIf="username?.invalid">{{ getUsernameErrorMessage() }} </mat-error>
       </mat-form-field>
       <mat-form-field class="new-password" appearance="outline">
+        <mat-label>Password</mat-label>
         <input matInput placeholder="Password" type="password" formControlName="password" />
         <mat-error *ngIf="password?.invalid">{{ getPasswordErrorMessage() }} </mat-error>
       </mat-form-field>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,15 +1,17 @@
-<a
-  mat-button
-  class="docs-button"
-  [href]="href"
-  aria-label="OpenChallenges Discord server"
-  target="_blank"
-  rel="noreferrer"
->
-  <img
-    alt="OpenChallenges Discord server"
-    class="discord-logo"
-    src="/openchallenges-assets/images/discord-icon.svg"
-  />
-  {{ label }}
-</a>
+<div class="mat-typography">
+  <a
+    mat-button
+    class="docs-button"
+    [href]="href"
+    aria-label="OpenChallenges Discord server"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <img
+      alt="OpenChallenges Discord server"
+      class="discord-logo"
+      src="/openchallenges-assets/images/discord-icon.svg"
+    />
+    {{ label }}
+  </a>
+</div>
diff --git 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
@@ -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
@@ -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
@@ -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;
   }
 }