(core) Adds new view as banner

Summary:
Diff removes view-as pill in the document breadcrumbs and add new view-as banner.

Note: Banners are still missing mechanism to handle several banners. As of now both doc-usage and view-as banners could show up at the same time.

Test Plan: Refactored existing test.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

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

app/client/ui/UserImage.ts

@@ -1,6 +1,7 @@
 import {colors, theme} from 'app/client/ui2018/cssVars';
 import {FullUser} from 'app/common/LoginSessionAPI';
 import {dom, DomElementArg, styled} from 'grainjs';
+import {icon} from 'app/client/ui2018/icons';
 
 export type Size = 'small' | 'medium' | 'large';
 
@@ -8,10 +9,11 @@ export type Size = 'small' | 'medium' | 'large';
  * Returns a DOM element showing a circular icon with a user's picture, or the user's initials if
  * picture is missing. Also varies the color of the circle when using initials.
  */
-export function createUserImage(user: FullUser|null, size: Size, ...args: DomElementArg[]): HTMLElement {
+export function createUserImage(user: FullUser|'exampleUser'|null, size: Size, ...args: DomElementArg[]): HTMLElement {
   let initials: string;
   return cssUserImage(
     cssUserImage.cls('-' + size),
+    (user === 'exampleUser') ? [cssUserImage.cls('-example'), cssExampleUserIcon('EyeShow')] :
     (!user || user.anonymous) ? cssUserImage.cls('-anon') :
     [
       (user.picture ? cssUserPicture({src: user.picture}, dom.on('error', (ev, el) => dom.hideElem(el, true))) : null),
@@ -113,6 +115,11 @@ export const cssUserImage = styled('div', `
   &-reduced {
     font-size: var(--reduced-font-size);
   }
+
+  &-example {
+    background-color: ${colors.slate};
+    border: 1px solid ${colors.slate};
+  }
 `);
 
 const cssUserPicture = styled('img', `
@@ -124,3 +131,10 @@ const cssUserPicture = styled('img', `
   border-radius: 100px;
   box-sizing: content-box;    /* keep the border outside of the size of the image */
 `);
+
+const cssExampleUserIcon = styled(icon, `
+  background-color: white;
+  width: 45px;
+  height: 45px;
+  transform: scaleY(0.75);
+`);