From 714a42bc92090028616b6b1d4d29e7e7bdd651d1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 May 2017 16:45:12 +0100
Subject: [PATCH] Tweak colors for better contrast on Windows (#2180)

---
 packages/react-dev-utils/eslintFormatter.js   |  4 +--
 packages/react-scripts/scripts/start.js       | 33 ++++++++++++-------
 .../scripts/utils/createWebpackCompiler.js    |  6 ++--
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js
index 2e2debbddac..a051b9c5b0e 100644
--- a/packages/react-dev-utils/eslintFormatter.js
+++ b/packages/react-dev-utils/eslintFormatter.js
@@ -45,9 +45,9 @@ function formatter(results) {
       messages = messages.filter(m => m[2] === 'error');
     }
 
-    // add color to messageTypes
+    // add color to rule keywords
     messages.forEach(m => {
-      m[3] = m[2] === 'error' ? chalk.red(m[3]) : chalk.yellow(m[3]);
+      m[4] = m[2] === 'error' ? chalk.red(m[4]) : chalk.yellow(m[4]);
       m.splice(2, 1);
     });
 
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index e5768fbbd12..fb53543aa5d 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -55,22 +55,35 @@ const HOST = process.env.HOST || '0.0.0.0';
 function run(port) {
   const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 
-  const formatUrl = hostname =>
-    url.format({ protocol, hostname, port, pathname: '/' });
+  const formatUrl = hostname => url.format({
+    protocol,
+    hostname,
+    port,
+    pathname: '/',
+  });
+  const prettyPrintUrl = hostname => url.format({
+    protocol,
+    hostname,
+    port: chalk.bold(port),
+    pathname: '/',
+  });
 
   const isUnspecifiedAddress = HOST === '0.0.0.0' || HOST === '::';
-  let prettyHost, lanAddress;
+  let prettyHost, lanAddress, prettyLanUrl;
   if (isUnspecifiedAddress) {
     prettyHost = 'localhost';
     try {
       lanAddress = address.ip();
+      if (lanAddress) {
+        prettyLanUrl = prettyPrintUrl(lanAddress);
+      }
     } catch (_e) {
       // ignored
     }
   } else {
     prettyHost = HOST;
   }
-  const prettyUrl = formatUrl(prettyHost);
+  const prettyLocalUrl = prettyPrintUrl(prettyHost);
 
   // Create a webpack compiler that is configured with custom messages.
   const compiler = createWebpackCompiler(
@@ -85,15 +98,11 @@ function run(port) {
       );
       console.log();
 
-      if (isUnspecifiedAddress && lanAddress) {
-        console.log(
-          `  ${chalk.bold('Local:')}            ${chalk.cyan(prettyUrl)}`
-        );
-        console.log(
-          `  ${chalk.bold('On Your Network:')}  ${chalk.cyan(formatUrl(lanAddress))}`
-        );
+      if (prettyLanUrl) {
+        console.log(`  ${chalk.bold('Local:')}            ${prettyLocalUrl}`);
+        console.log(`  ${chalk.bold('On Your Network:')}  ${prettyLanUrl}`);
       } else {
-        console.log(`  ${chalk.cyan(prettyUrl)}`);
+        console.log(`  ${prettyLocalUrl}`);
       }
 
       console.log();
diff --git a/packages/react-scripts/scripts/utils/createWebpackCompiler.js b/packages/react-scripts/scripts/utils/createWebpackCompiler.js
index 008ee303a92..a3adeee618c 100644
--- a/packages/react-scripts/scripts/utils/createWebpackCompiler.js
+++ b/packages/react-scripts/scripts/utils/createWebpackCompiler.js
@@ -104,13 +104,13 @@ module.exports = function createWebpackCompiler(config, onReadyCallback) {
       // Teach some ESLint tricks.
       console.log(
         'Search for the ' +
-          chalk.underline('rule keywords') +
+          chalk.underline(chalk.yellow('rule keywords')) +
           ' to learn more about each warning.'
       );
       console.log(
         'To ignore, add ' +
-          chalk.yellow('// eslint-disable-next-line') +
-          ' to the previous line.'
+          chalk.cyan('// eslint-disable-next-line') +
+          ' to the line before.'
       );
       console.log();
     }