(core) Update design of empty docs home page, and add a "Manage Team" button.

Summary:
- Remove the empty-folder icon
- Add an "Invite team members" button for owners on empty team sites
- Add a "Browse Templates" button for all other cases on empty sites
- Update intro text for team, including a link to Sprouts
- Update intro text for personal/anon.
- Include a Free/Pro tag for team sites (for now, only "Free")
- Add a "Manage Team" button for owners on home page of all team sites.
- Polished the UI of UserManager: add a transition for the background, and
  delay the appearance of the spinner for fast loads.

Test Plan: Fixed up the HomeIntro tests; added test case for Manage Team button

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3459

app/client/ui2018/buttons.ts

@@ -39,7 +39,8 @@ export const cssButton = styled('button', `
 
   &-large {
     font-weight: 500;
-    padding: 12px 24px;
+    padding: 10px 24px;
+    min-height: 40px;
   }
 
   &-primary {

app/client/ui2018/cssVars.ts

@@ -43,6 +43,7 @@ export const colors = {
 
   lighterBlue: new CustomProp('color-lighter-blue', '#87b2f9'),
   lightBlue: new CustomProp('color-light-blue', '#3B82F6'),
+  orange: new CustomProp('color-orange', '#F9AE41'),
 
   cursor: new CustomProp('color-cursor', '#16B378'),   // cursor is lightGreen
   selection: new CustomProp('color-selection', 'rgba(22,179,120,0.15)'),
@@ -74,6 +75,7 @@ export const vars = {
   xsmallFontSize:   new CustomProp('x-small-font-size',   '10px'),
   smallFontSize:    new CustomProp('small-font-size',     '11px'),
   mediumFontSize:   new CustomProp('medium-font-size',    '13px'),
+  introFontSize:    new CustomProp('intro-font-size',     '14px'),    // feels friendlier
   largeFontSize:    new CustomProp('large-font-size',     '16px'),
   xlargeFontSize:   new CustomProp('x-large-font-size',   '18px'),
   xxlargeFontSize:  new CustomProp('xx-large-font-size',  '20px'),

app/client/ui2018/modals.ts

@@ -5,7 +5,8 @@ import {bigBasicButton, bigPrimaryButton, cssButton} from 'app/client/ui2018/but
 import {colors, mediaSmall, testId, vars} from 'app/client/ui2018/cssVars';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {waitGrainObs} from 'app/common/gutil';
-import {Computed, Disposable, dom, DomContents, DomElementArg, input, MultiHolder, Observable, styled} from 'grainjs';
+import {Computed, Disposable, dom, DomContents, DomElementArg, input, keyframes,
+  MultiHolder, Observable, styled} from 'grainjs';
 
 // IModalControl is passed into the function creating the body of the modal.
 export interface IModalControl {
@@ -466,6 +467,10 @@ export const cssModalButtons = styled('div', `
   }
 `);
 
+const cssFadeIn = keyframes(`
+  from {background-color: transparent}
+`);
+
 const cssModalBacker = styled('div', `
   position: fixed;
   display: flex;
@@ -478,6 +483,8 @@ const cssModalBacker = styled('div', `
   z-index: 999;
   background-color: ${colors.backdrop};
   overflow-y: auto;
+  animation-name: ${cssFadeIn};
+  animation-duration: 0.4s;
 `);
 
 const cssSpinner = styled('div', `