(core) Replace questionnaire for new users with a popup asking for just their primary use-case.

Summary:
- WelcomeQuestions implements the new popup.
- Popup shows up on any doc-list page, the first time the user visits one after
  signing up and setting their name.
- Submits responses to the same "New User Questions" doc, which has been
  changed to accept two new columns (ChoiceList of use_cases, and Text for
  use_other).
- Improve modals on mobile along the way.

Test Plan: Added browser tests and tested manually

Reviewers: alexmojaki

Reviewed By: alexmojaki

Subscribers: jarek

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

app/client/ui2018/IconList.ts

@@ -97,7 +97,17 @@ export type IconName = "ChartArea" |
   "Warning" |
   "Widget" |
   "Wrap" |
-  "Zoom";
+  "Zoom" |
+  "UseChart" |
+  "UseEducate" |
+  "UseFinance" |
+  "UseHr" |
+  "UseMedia" |
+  "UseMonitor" |
+  "UseOther" |
+  "UseProduct" |
+  "UseSales" |
+  "UseScience";
 
 export const IconList: IconName[] = ["ChartArea",
   "ChartBar",
@@ -198,4 +208,14 @@ export const IconList: IconName[] = ["ChartArea",
   "Warning",
   "Widget",
   "Wrap",
-  "Zoom"];
+  "Zoom",
+  "UseChart",
+  "UseEducate",
+  "UseFinance",
+  "UseHr",
+  "UseMedia",
+  "UseMonitor",
+  "UseOther",
+  "UseProduct",
+  "UseSales",
+  "UseScience"];

app/client/ui2018/modals.ts

@@ -2,7 +2,7 @@ import {FocusLayer} from 'app/client/lib/FocusLayer';
 import * as Mousetrap from 'app/client/lib/Mousetrap';
 import {reportError} from 'app/client/models/errors';
 import {bigBasicButton, bigPrimaryButton, cssButton} from 'app/client/ui2018/buttons';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+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, MultiHolder, Observable, styled} from 'grainjs';
@@ -347,6 +347,13 @@ const cssModalDialog = styled('div', `
   &-fixed-wide {
     width: 600px;
   }
+  @media ${mediaSmall} {
+    & {
+      width: unset;
+      min-width: unset;
+      padding: 24px 16px;
+    }
+  }
 `);
 
 export const cssModalTitle = styled('div', `
@@ -381,6 +388,7 @@ const cssModalBacker = styled('div', `
   height: 100%;
   top: 0;
   left: 0;
+  padding: 16px;
   z-index: 999;
   background-color: ${colors.backdrop};
   overflow-y: auto;