(core) Polish forms

Summary:
  - Updates styling of form submitted page.
  - Tweaks styling of checkboxes, labels, and questions on form page.
  - Adds new form 404 page.
  - Adds checkbox to not show warning again when publishing or un-publishing a form.
  - Excludes formula, hidden, and attachment columns in submitted form data.
  - Adds placeholder text to form configuration inputs.
  - Improves dark mode styling in Form widget.
  - Updates default title and description of new forms.
  - Updates styling of Form widget buttons.
  - Fixes form success text input handling.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/client/ui2018/cssVars.ts

@@ -167,6 +167,7 @@ export const theme = {
   /* Text */
   text: new CustomProp('theme-text', undefined, colors.dark),
   lightText: new CustomProp('theme-text-light', undefined, colors.slate),
+  mediumText: new CustomProp('theme-text-medium', undefined, colors.darkText),
   darkText: new CustomProp('theme-text-dark', undefined, 'black'),
   errorText: new CustomProp('theme-text-error', undefined, colors.error),
   errorTextHover: new CustomProp('theme-text-error-hover', undefined, '#BF0A31'),

app/client/ui2018/modals.ts

@@ -4,13 +4,14 @@ import {reportError} from 'app/client/models/errors';
 import {cssInput} from 'app/client/ui/cssInput';
 import {prepareForTransition, TransitionWatcher} from 'app/client/ui/transitions';
 import {bigBasicButton, bigPrimaryButton, cssButton} from 'app/client/ui2018/buttons';
+import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
 import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
+import {cssMenuElem} from 'app/client/ui2018/menus';
 import {waitGrainObs} from 'app/common/gutil';
-import {IOpenController, IPopupOptions, PopupControl, popupOpen} from 'popweasel';
 import {Computed, Disposable, dom, DomContents, DomElementArg, input, keyframes,
   MultiHolder, Observable, styled} from 'grainjs';
-import {cssMenuElem} from 'app/client/ui2018/menus';
+import {IOpenController, IPopupOptions, PopupControl, popupOpen} from 'popweasel';
 
 const t = makeT('modals');
 
@@ -339,6 +340,8 @@ export function saveModal(
 export interface ConfirmModalOptions {
   explanation?: DomElementArg,
   hideCancel?: boolean;
+  /** Defaults to true. */
+  hideDontShowAgain?: boolean;
   extraButtons?: DomContents;
   modalOptions?: IModalOptions;
   saveDisabled?: Observable<boolean>;
@@ -353,22 +356,42 @@ export interface ConfirmModalOptions {
 export function confirmModal(
   title: DomElementArg,
   btnText: DomElementArg,
-  onConfirm: () => Promise<void>,
-  {explanation, hideCancel, extraButtons, modalOptions, saveDisabled, width}: ConfirmModalOptions = {},
+  onConfirm: (dontShowAgain?: boolean) => Promise<void>,
+  options: ConfirmModalOptions = {},
 ): void {
-  return saveModal((ctl, owner): ISaveModalOptions => ({
-    title,
-    body: explanation || null,
-    saveLabel: btnText,
-    saveFunc: onConfirm,
+  const {
+    explanation,
     hideCancel,
-    width: width ?? 'normal',
+    hideDontShowAgain = true,
     extraButtons,
+    modalOptions,
     saveDisabled,
-  }), modalOptions);
+    width
+  } = options;
+  return saveModal((_ctl, owner): ISaveModalOptions => {
+    const dontShowAgain = Observable.create(owner, false);
+    return {
+      title,
+      body: [
+        explanation || null,
+        hideDontShowAgain ? null : dom('div',
+          cssDontShowAgainCheckbox(
+            dontShowAgain,
+            cssDontShowAgainCheckboxLabel(t("Don't show again")),
+            testId('modal-dont-show-again'),
+          ),
+        ),
+      ],
+      saveLabel: btnText,
+      saveFunc: () => onConfirm(hideDontShowAgain ? undefined : dontShowAgain.get()),
+      hideCancel,
+      width: width ?? 'normal',
+      extraButtons,
+      saveDisabled,
+    };
+  }, modalOptions);
 }
 
-
 /**
  * Creates a simple prompt modal (replacement for the native one).
  * Closed via clicking anywhere outside the modal or Cancel button.
@@ -669,3 +692,11 @@ export const cssAnimatedModal = styled('div', `
   animation-duration: 0.4s;
   position: relative;
 `);
+
+const cssDontShowAgainCheckbox = styled(labeledSquareCheckbox, `
+  line-height: normal;
+`);
+
+const cssDontShowAgainCheckboxLabel = styled('span', `
+  color: ${theme.lightText};
+`);