Cosmetic and font updates

apps/cns-website/public/assets/content/amatria/data.yaml

@@ -53,7 +53,7 @@ content:
           - component: ActionCard
             variant: outlined
             image: assets/content/amatria/images/denrites.png
-            tagline: Dendrite
+            tagline: Dendrites
             content:
               - component: Markdown
                 data: Each _Amatria_ Dendrite has one light sensor (the eye) and actuators, such as lights and a strand of shape memory alloy, that makes the sculpture move. Software controls the sensor and actuators. Dendrite fields were built in the [2017 ISE Summer Camp](https://cns.iu.edu/assets/content/amatria/2017-iu-summer-camp-dendrite.pdf).

apps/cns-website/src/app/components/footer/footer.component.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
-@use 'utils' as utils;
-@use 'vars' as vars;
+@use 'utils';
+@use 'vars';
 
 :host {
   display: flex;
@@ -40,7 +40,7 @@
     .logo {
       height: 3rem;
       padding: 4px;
-      border-radius: 0.25rem;
+      border-radius: vars.$corner-extra-small;
 
       ::ng-deep svg {
         height: 2.5rem;
@@ -58,7 +58,7 @@
   }
 
   .privacy-container {
-    @include utils.use-font(label, medium);
+    @include utils.use-font(body, medium);
     display: flex;
     flex-direction: column;
     align-items: center;

apps/cns-website/src/app/components/footer/funding/funding.component.scss

@@ -1,4 +1,5 @@
-@use 'vars' as vars;
+@use 'vars';
+@use 'utils';
 
 :host {
   display: flex;
@@ -8,8 +9,7 @@
   justify-content: flex-end;
 
   .title {
-    font: vars.$label-medium;
-    letter-spacing: vars.$label-medium-tracking;
+    @include utils.use-font(body, medium);
   }
 
   .funders {

apps/cns-website/src/app/components/footer/static-data/funders.json

@@ -5,7 +5,7 @@
       "id": "nsf",
       "name": "National Science Foundation",
       "link": "https://www.nsf.gov/",
-      "image": "assets/logo/nsf.svg"
+      "image": "assets/logo/nsf_gray.svg"
     },
     {
       "id": "nih",

apps/cns-website/src/app/components/header/header.component.scss

@@ -49,7 +49,7 @@ $z-index: 900;
     justify-content: center;
     height: 2.5rem;
     padding: 0.25rem;
-    border-radius: 0.25rem;
+    border-radius: vars.$corner-extra-small;
     color: vars.$on-surface;
 
     ::ng-deep svg {
@@ -64,20 +64,20 @@ $z-index: 900;
   .menu-button {
     @include mat.button-overrides(
       (
-        text-label-text-font: vars.$label-large-font,
-        text-label-text-size: vars.$label-large-size,
-        text-label-text-weight: vars.$label-large-weight,
-        text-label-text-tracking: vars.$label-large-tracking,
+        text-label-text-font: vars.$title-medium-font,
+        text-label-text-size: vars.$title-medium-size,
+        text-label-text-weight: vars.$title-medium-weight,
+        text-label-text-tracking: vars.$title-medium-tracking,
         text-horizontal-padding: 0.625rem,
       )
     );
 
     @include mat.button-toggle-overrides(
       (
-        label-text-font: vars.$label-large-font,
-        label-text-size: vars.$label-large-size,
-        label-text-weight: vars.$label-large-weight,
-        label-text-tracking: vars.$label-large-tracking,
+        label-text-font: vars.$title-medium-font,
+        label-text-size: vars.$title-medium-size,
+        label-text-weight: vars.$title-medium-weight,
+        label-text-tracking: vars.$title-medium-tracking,
       )
     );
 

apps/cns-website/src/app/components/header/mega-menu/mega-menu.component.scss

@@ -6,7 +6,7 @@
   display: flex;
   min-width: 40rem;
   max-width: 81.25rem;
-  border-radius: 0.5rem;
+  border-radius: vars.$corner-small;
   overflow: hidden;
   width: calc(100vw);
 
@@ -18,7 +18,7 @@
 
   .featured-link {
     width: 100%;
-    border-radius: 0.5rem;
+    border-radius: vars.$corner-small;
     overflow: hidden;
     height: fit-content;
   }
@@ -30,7 +30,7 @@
   }
 
   .featured-image {
-    border-radius: 0.5rem;
+    border-radius: vars.$corner-small;
   }
 
   .featured-bottom {
@@ -40,7 +40,7 @@
     min-height: 3.5rem;
     background: vars.$surface-bright;
     border: 0.0625rem solid vars.$outline-variant;
-    border-radius: 0.5rem;
+    border-radius: vars.$corner-small;
     height: auto;
 
     ::ng-deep .mdc-button__label {
@@ -61,10 +61,6 @@
     justify-content: center;
     width: 12.5rem;
 
-    .label {
-      @include utils.use-font(label, large);
-    }
-
     .tagline {
       @include utils.use-font(label, medium);
       color: vars.$on-surface-variant;
@@ -125,7 +121,7 @@
     min-height: 2.75rem;
     justify-content: start;
     padding: 0.5rem 0.75rem;
-    border-radius: 0.5rem;
+    border-radius: vars.$corner-small;
     height: auto;
   }
 

apps/cns-website/src/app/components/header/mobile-menu/mobile-menu.component.scss

@@ -60,12 +60,6 @@ $category-inner-horizontal-padding: 0.75rem;
           container-text-color: vars.$on-surface,
           header-collapsed-state-height: $category-height,
           header-expanded-state-height: $category-height,
-          header-text-color: vars.$on-surface,
-          header-text-font: vars.$title-medium-font,
-          header-text-size: vars.$title-medium-size,
-          header-text-weight: vars.$title-medium-weight,
-          header-text-line-height: vars.$title-medium-line-height,
-          header-text-tracking: vars.$title-medium-tracking,
         )
       );
 

apps/cns-website/src/app/pages/archive-redirect/archive-redirect.component.scss

@@ -35,7 +35,7 @@
     color: vars.$on-surface-variant;
     margin-bottom: 2rem;
     text-align: center;
-    @include utils.use-font(title, medium);
+    @include utils.use-font(body, large);
   }
 
   .copy-url:has(+ .card) {
@@ -49,7 +49,7 @@
     max-width: 360px;
     padding: 2rem;
     border: 1px solid vars.$outline-variant;
-    border-radius: 0.75rem;
+    border-radius: vars.$corner-medium;
 
     &.large {
       max-width: 28rem;
@@ -68,7 +68,7 @@
     .spinner-text {
       color: vars.$on-surface-variant;
       text-align: center;
-      @include utils.use-font(title, medium);
+      @include utils.use-font(body, large);
 
       .line-1 {
         margin-bottom: 1rem;

apps/cns-website/src/app/pages/current-team/current-team.component.html

@@ -20,7 +20,7 @@
         aria-label="Select team"
         hraFeature="team"
         hraModelChangeEvent
-        hraButtonToggleSize="medium"
+        hraButtonToggleSize="large"
         [ngModel]="store.team()"
         (ngModelChange)="store.setTeam($event)"
       >
@@ -56,7 +56,7 @@
   </mat-sidenav>
 
   <mat-sidenav-content id="main-content" role="main" tabindex="-1">
-    <ng-scrollbar hraScrollOverflowFade>
+    <ng-scrollbar>
       <div class="content">
         <div class="search-bar">
           <hra-search-filter

apps/cns-website/src/app/pages/current-team/current-team.component.scss

@@ -1,6 +1,6 @@
-@use 'vars' as vars;
-@use 'utils';
 @use '@angular/material' as mat;
+@use 'vars';
+@use 'utils';
 
 :host {
   display: block;
@@ -31,21 +31,6 @@
         .group-by {
           width: 100%;
 
-          @include mat.form-field-overrides(
-            (
-              filled-active-indicator-color: vars.$on-surface,
-              filled-container-color: vars.$surface-container-high,
-              filled-focus-active-indicator-color: vars.$on-surface,
-              filled-hover-label-text-color: vars.$on-surface-variant,
-              filled-label-text-color: vars.$on-surface-variant,
-              filled-label-text-font: vars.$label-medium-font,
-              filled-label-text-size: vars.$label-medium-size,
-              filled-label-text-weight: vars.$label-medium-weight,
-              filled-label-text-tracking: vars.$label-medium-tracking,
-              leading-icon-color: vars.$on-surface,
-            )
-          );
-
           @include mat.select-overrides(
             (
               enabled-trigger-text-color: vars.$on-surface,
@@ -74,11 +59,11 @@
         width: 100%;
         max-width: 81.25rem;
         z-index: 10;
-        padding: 2rem 1.25rem;
+        padding: 1.5rem 1.25rem 2rem;
         background: vars.$background;
 
         @media (min-width: 640px) {
-          padding: 2rem 2.5rem;
+          padding: 1.5rem 2.5rem 2rem;
         }
       }
 

apps/cns-website/src/app/pages/landing-page/landing-page.component.scss

@@ -48,7 +48,7 @@
     max-width: 31.5rem;
     text-align: center;
     color: vars.$on-surface;
-    @include utils.use-font(body, xl);
+    @include utils.use-font(body, large);
   }
 
   .content-filter {

apps/cns-website/src/app/pages/people-profile/contact-info/contact-info.component.scss

@@ -11,6 +11,7 @@
   @media (min-width: 640px) {
     background: vars.$surface-container-low;
     padding: 2rem;
+    padding-top: 2.5rem;
     max-width: 18.75rem;
     flex: 1;
     min-height: 100%;

apps/cns-website/src/app/pages/research-page/research-page.component.html

@@ -64,7 +64,7 @@
       (searchChange)="store.setSearch($event)"
     />
 
-    <ng-scrollbar hraScrollOverflowFade>
+    <ng-scrollbar>
       <div class="content" hraFeature="result">
         @if (store.numFilteredItems() === 0) {
           <hra-no-results-indicator hraFeature="no-results" (clearFilters)="store.resetFilters()" />

apps/cns-website/src/app/pages/research-page/research-page.component.scss

@@ -1,6 +1,6 @@
-@use 'utils';
-@use 'vars' as vars;
 @use '@angular/material' as mat;
+@use 'utils';
+@use 'vars';
 
 :host {
   display: block;
@@ -41,7 +41,7 @@
     position: sticky;
     top: 0;
     z-index: 10;
-    margin-top: 2rem;
+    margin-top: 1.5rem;
     margin-bottom: 2rem;
   }