refactor(docs-infra): minor refactorings/style changes (#42396)

This commit includes some minor refactorings and style changes as a
follow-up to PR #41129. (The changes were minor enough that didn't
warrant blocking the PR.)

PR Close #42396

aio/src/app/app.module.ts

@@ -39,10 +39,10 @@ import { WindowToken, windowProvider } from 'app/shared/window';
 
 import { CustomElementsModule } from 'app/custom-elements/custom-elements.module';
 import { SharedModule } from 'app/shared/shared.module';
+import { ThemeToggleComponent } from 'app/shared/theme-picker/theme-toggle.component';
 import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
 
-import {environment} from '../environments/environment';
-import { ThemeToggleComponent } from './shared/theme-picker/theme-toggle.component';
+import { environment } from '../environments/environment';
 
 // These are the hardcoded inline svg sources to be used by the `<mat-icon>` component.
 // tslint:disable: max-line-length
@@ -171,7 +171,7 @@ export const svgIconProviders = [
     SearchBoxComponent,
     NotificationComponent,
     TopMenuComponent,
-    ThemeToggleComponent
+    ThemeToggleComponent,
   ],
   providers: [
     Deployment,

aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ThemeStorage, ThemeToggleComponent } from './theme-toggle.component';
 
@@ -7,18 +6,18 @@ class FakeThemeStorage implements ThemeStorage {
   fakeStorage: string | null = null;
 
   getThemePreference(): string | null {
-      return this.fakeStorage;
+    return this.fakeStorage;
   }
 
   setThemePreference(isDark: boolean): void {
-      this.fakeStorage = String(isDark);
+    this.fakeStorage = String(isDark);
   }
 }
 
-let themeStorage: ThemeStorage;
-
 // Verify that FakeThemeStorage behaves like ThemeStorage would
 describe('FakeThemeStorage', () => {
+  let themeStorage: ThemeStorage;
+
   beforeEach(() => {
     themeStorage = new FakeThemeStorage();
   });
@@ -39,23 +38,19 @@ describe('FakeThemeStorage', () => {
 });
 
 
-let component: ThemeToggleComponent;
-let fixture: ComponentFixture<ThemeToggleComponent>;
-let debugElement: DebugElement;
-
 describe('ThemeToggleComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ThemeToggleComponent ],
-      providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ],
-    })
-    .compileComponents();
-  });
+  let component: ThemeToggleComponent;
+  let fixture: ComponentFixture<ThemeToggleComponent>;
 
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ThemeToggleComponent ],
+      providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ],
+    });
+
     fixture = TestBed.createComponent(ThemeToggleComponent);
     component = fixture.componentInstance;
-    debugElement = fixture.debugElement;
+
     fixture.detectChanges();
   });
 
@@ -81,12 +76,13 @@ describe('ThemeToggleComponent', () => {
   });
 
   it('should have the correct aria-label', () => {
-    expect(component.getToggleLabel()).toBe(`Switch to dark mode`);
+    expect(component.getToggleLabel()).toBe('Switch to dark mode');
     component.toggleTheme();
-    expect(component.getToggleLabel()).toBe(`Switch to light mode`);
+    expect(component.getToggleLabel()).toBe('Switch to light mode');
   });
-});
 
-function getToggleButton(): HTMLButtonElement {
-  return debugElement.query(By.css('button')).nativeElement;
-}
+  // Helpers
+  function getToggleButton(): HTMLButtonElement {
+    return fixture.debugElement.query(By.css('button')).nativeElement;
+  }
+});

aio/src/styles/0-base/_typography-theme.scss

@@ -16,18 +16,17 @@
     color: if($is-dark-theme, constants.$offwhite, constants.$deepgray);
   }
 
-  h6 {
-    color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);
-  }
-
   h2 {
     border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
   }
 
+  h6 {
+    color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);
+  }
+
   p,
   ol,
   ul,
-  ol,
   li,
   input,
   a {

aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss

@@ -13,10 +13,6 @@
 
   section#intro {
     color: constants.$white;
-
-    .hero-logo {
-      background-image: url(/assets/images/logos/angular/angular.svg);
-    }
   }
 
   .announcement-bar {

aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss

@@ -46,6 +46,10 @@ section#intro {
   margin: 0 auto -32px;
   padding: 48px 0 0;
 
+  .hero-logo {
+    background-image: url(/assets/images/logos/angular/angular.svg);
+  }
+
   @media (max-width: 780px) {
     flex-direction: column;
     justify-content: center;

aio/src/styles/1-layouts/top-menu/_top-menu.scss

@@ -203,24 +203,16 @@ mat-toolbar.app-toolbar {
     flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
     height: 100%;
 
-    @media screen and (max-width: 350px) {
-      a[title="GitHub"] {
-        display: none;
-      }
-    }
-
-    a[title="Twitter"], a[title="YouTube"] {
-      @media screen and (max-width: 420px) {
-        display: none;
-      }
-    }
-
     a {
       display: flex;
       align-items: center;
       padding: 0;
       margin: 24px 8px;
 
+      &:hover {
+        opacity: 0.8;
+      }
+
       &:focus {
         outline-offset: 8px;
       }
@@ -230,8 +222,16 @@ mat-toolbar.app-toolbar {
         padding: 0;
       }
 
-      &:hover {
-        opacity: 0.8;
+      @media screen and (max-width: 420px) {
+        &:not([title="GitHub"]) {
+          display: none;
+        }
+      }
+
+      @media screen and (max-width: 350px) {
+        &[title="GitHub"] {
+          display: none;
+        }
       }
 
       img {