From 356d9a05379b083dd66348bc869a0f327fc25de6 Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Fri, 12 Feb 2021 15:57:24 -0500
Subject: [PATCH] docs: improve contrast of colors and body padding in
 boilerplate CSS (#40890)

Shifts colors to pass WebAIM contrast checker and adds media
query so that body padding is smaller at smaller widths.
Body padding responsiveness will help on StackBlitz and small
screens.

PR Close #40890
---
 .../examples/http/e2e/src/app.e2e-spec.ts     | 20 ++++++++++
 .../examples/toh-pt6/e2e/src/app.e2e-spec.ts  |  4 +-
 .../shared/boilerplate/common/src/styles.css  | 39 ++++++++++---------
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/aio/content/examples/http/e2e/src/app.e2e-spec.ts b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
index 6a5e78e24d..f69efa6b73 100644
--- a/aio/content/examples/http/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
@@ -29,6 +29,26 @@ const checkLogForMessage = async (message: string) => {
 };
 
 describe('Http Tests', () => {
+  // It seems that currently Chrome/ChromeDriver fail to click a button that is just outside the
+  // viewport (or maybe only partially inside the viewport) - at least in headless mode.
+  // Possible solutions:
+  // 1. Click the element via JavaScript (with something like
+  //    `browser.executeScript('arguments[0].click', elem)`).
+  // 2. Manually scroll the element into view before clicking:
+  //    https://stackoverflow.com/questions/47776774/element-is-not-clickable-at-point-in-headless-mode-but-when-we-remove-headless
+  // 3. Explicitly set the window size to a bigger size:
+  //    https://stackoverflow.com/questions/62003082/elementnotinteractableexception-element-not-interactable-element-has-zero-size
+  //
+  // Since the default 800x600 window size in headless mode (as used on CI) causes the
+  // `<app-config>` buttons to be in a position that trigger the above issue, we explicitly set the
+  // window size to 1920x1080 when in headless mode.
+  beforeAll(async () => {
+    const config = await browser.getProcessedConfig();
+    if (config.capabilities?.chromeOptions?.args?.includes('--headless')) {
+      browser.driver.manage().window().setSize(1920, 1080);
+    }
+  });
+
   beforeEach(() => browser.get(''));
 
   describe('Heroes', () => {
diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
index 1856368208..0f579dda7d 100644
--- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
@@ -193,7 +193,7 @@ describe('Tutorial part 6', () => {
 
       for (const button of buttons) {
         // Inherited styles from styles.css
-        expect(await button.getCssValue('font-family')).toBe('Arial, sans-serif');
+        expect(await button.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
         expect(await button.getCssValue('border')).toContain('none');
         expect(await button.getCssValue('padding')).toBe('1px 10px 3px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
@@ -204,7 +204,7 @@ describe('Tutorial part 6', () => {
 
       const addButton = element(by.buttonText('Add hero'));
       // Inherited styles from styles.css
-      expect(await addButton.getCssValue('font-family')).toBe('Arial, sans-serif');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
       expect(await addButton.getCssValue('border')).toContain('none');
       expect(await addButton.getCssValue('padding')).toBe('8px 24px');
       expect(await addButton.getCssValue('border-radius')).toBe('4px');
diff --git a/aio/tools/examples/shared/boilerplate/common/src/styles.css b/aio/tools/examples/shared/boilerplate/common/src/styles.css
index 442e46c1e8..1e9f1c865d 100644
--- a/aio/tools/examples/shared/boilerplate/common/src/styles.css
+++ b/aio/tools/examples/shared/boilerplate/common/src/styles.css
@@ -1,18 +1,26 @@
 /* Global Styles */
-h1 {
-  color: #369;
+* {
   font-family: Arial, Helvetica, sans-serif;
+}
+h1 {
+  color: #264D73;
   font-size: 250%;
 }
 h2, h3 {
   color: #444;
-  font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
 body {
-  margin: 2em;
+  padding: .5em;
+  max-width: 1000px;
+  margin: auto;
 }
-body, input[text], button {
+@media (min-width: 600px) {
+  body {
+    padding: 2em;
+  }
+}
+body, input[text] {
   color: #333;
   font-family: Cambria, Georgia, serif;
 }
@@ -20,12 +28,12 @@ a {
   cursor: pointer;
 }
 button {
-  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
+  color: black;
 }
 button:hover {
   background-color: #cfd8dc;
@@ -43,21 +51,16 @@ nav a {
   margin-right: 10px;
   margin-top: 10px;
   display: inline-block;
-  background-color: #eee;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
   border-radius: 4px;
 }
-nav a:visited, a:link {
-  color: #607D8B;
-}
+
 nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
+  color: white;
+  background-color:  #42545C;
 }
 nav a.active {
-  color: #039be5;
-}
-
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
+  background-color: black;
+  color: white;
 }