Invert colors of compiling indicator (#13995)

Hi,

This PR inverts the colors for the compiling indicator, closes #13952.

The second commit makes the styling consistent with the prerender indicator (height and border)

From:
![before](https://user-images.githubusercontent.com/32001471/84236653-df640080-aaef-11ea-8532-a5d65cab5cc3.gif)

To:
![after](https://user-images.githubusercontent.com/32001471/84247287-c6fbe200-aaff-11ea-9eff-a16c42a7b625.gif)



 

packages/next/client/dev/dev-build-watcher.js

@@ -104,8 +104,8 @@ function createContainer(prefix) {
             y2="100%"
             id="${prefix}linear-gradient"
           >
-            <stop stop-color="#FFFFFF" offset="0%" />
-            <stop stop-color="#000000" offset="100%" />
+            <stop stop-color="#000000" offset="0%" />
+            <stop stop-color="#FFFFFF" offset="100%" />
           </linearGradient>
         </defs>
         <g id="${prefix}icon-group" fill="none" stroke="url(#${prefix}linear-gradient)" stroke-width="18">
@@ -126,8 +126,9 @@ function createCss(prefix) {
       bottom: 10px;
       right: 30px;
 
-      background: #fff;
-      color: #000;
+      border-radius: 3px;
+      background: #000;
+      color: #fff;
       font: initial;
       cursor: initial;
       letter-spacing: initial;
@@ -135,7 +136,7 @@ function createCss(prefix) {
       text-transform: initial;
       visibility: initial;
 
-      padding: 8px 10px;
+      padding: 7px 10px 8px 10px;
       align-items: center;
       box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.12);