(core) Change default team logo

Summary:
Also fixes a bug that prevented drag and drop from working
in BillingLogoEditor, and tweaks the hover state of AppHeader
to only activate when the cursor is over the dropdown menu, and
not the logo.

Test Plan:
Manual.
1. Wide logo tests with url http://localhost:8080/o/docs?__themeOrg=fieldlink
2. Avatar on home screen for personal site
3. Avatar on doc screen for personal site
4. Avatar on doc screen with hidden left drawer on doc page
5. Same tests but with personal image
6. Same tests but with custom logo uploaded
7. All above tests but with dark theme
8. All above but on mobile.

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/ui/AppHeader.ts

@@ -16,7 +16,7 @@ import {Computed, Disposable, dom, DomContents, styled} from 'grainjs';
 import {makeT} from 'app/client/lib/localization';
 import {getGristConfig} from 'app/common/urlUtils';
 import {makeTestId} from 'app/client/lib/domUtils';
-import {createTeamImage, createUserImage, cssUserImage} from 'app/client/ui/UserImage';
+import {createUserImage, cssUserImage} from 'app/client/ui/UserImage';
 
 const t = makeT('AppHeader');
 const testId = makeTestId('test-dm-');
@@ -89,9 +89,7 @@ export class AppHeader extends Disposable {
                             : createUserImage(this._appModel.currentValidUser, 'medium', variant());
 
     // Team avatar is shown only for team sites (even for anonymous users).
-    const teamAvatar = () => !this._currentOrg
-                            ? cssAppLogo.cls('-grist-logo')
-                            : createTeamImage(this._currentOrg, 'medium', variant());
+    const teamAvatar = () => cssAppLogo.cls('-grist-logo');
 
     // Depending on site the avatar is either personal or team.
     const avatar = () => this._appModel.isPersonal
@@ -285,6 +283,7 @@ const cssAppHeader = styled('div._cssAppHeader', `
   background-color: ${theme.leftPanelBg};
   padding: 0px;
   padding: 8px;
+
   .${cssLeftPane.className}-open & {
     padding: 8px 16px;
   }
@@ -305,10 +304,10 @@ const cssAppHeaderBox = styled('div._cssAppHeaderBox', `
   height: 100%;
   overflow: hidden;
   background-color: ${theme.appHeaderBg};
-  border: 1px solid ${theme.appHeaderBorder};
   border-radius: 4px;
-  &:hover {
-    background-color: ${theme.appHeaderHoverBg};
+  overflow: hidden;
+  &:hover{
+    --middle-border-color: ${theme.appHeaderBorderHover};
   }
   .${cssAppHeader.className}-widelogo & {
     border: none !important;
@@ -326,6 +325,11 @@ const cssAppLogo = styled('a._cssAppLogo', `
   background-color: inherit;
   background-size: cover;
 
+  border: 1px solid ${theme.appHeaderBorder};
+  border-radius: 4px;
+  overflow: hidden;
+  border-right-color: var(--middle-border-color, ${theme.appHeaderBorder});
+
   &-grist-logo {
     background-image: var(--icon-GristLogo);
     background-color: ${vars.logoBg};
@@ -339,14 +343,44 @@ const cssAppLogo = styled('a._cssAppLogo', `
     padding: 8px;
     border-right: none !important;
     background-size: contain;
+    border: 0px !important;
   }
   .${cssLeftPane.className}-open .${cssAppHeader.className}-widelogo & {
     background-image: var(--icon-GristWideLogo, var(--icon-GristLogo));
     background-size: contain;
   }
   &:hover {
+    border-color: ${theme.appHeaderBorderHover};
     text-decoration: none;
   }
+  .${cssLeftPane.className}-open & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`);
+
+const cssOrg = styled('div._cssOrg', `
+  display: none;
+  flex-grow: 1;
+  flex-basis: 0px;
+  overflow: hidden;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+  font-weight: 500;
+
+  border: 1px solid ${theme.appHeaderBorder};
+  border-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0px;
+
+  &:hover {
+    border-color: ${theme.appHeaderBorderHover};
+  }
+  .${cssLeftPane.className}-open & {
+    display: flex;
+  }
 `);
 
 const cssDropdownIcon = styled(icon, `
@@ -361,32 +395,24 @@ const cssSpacer = styled('div', `
   display: block;
 `);
 
-const cssOrg = styled('div._cssOrg', `
-  display: none;
-  flex-grow: 1;
-  flex-basis: 0px;
-  overflow: hidden;
-  align-items: center;
-  cursor: pointer;
-  height: 100%;
-  font-weight: 500;
-  .${cssLeftPane.className}-open & {
-    display: flex;
-    border-left: 1px solid ${theme.appHeaderBorder};
-  }
-`);
-
 const cssOrgLink = styled('a.cssOrgLink', `
   display: none;
   flex-grow: 1;
   align-items: center;
-  max-width: calc(100% - 48px);
+  max-width: calc(100% - 32px);
   cursor: pointer;
   height: 100%;
   font-weight: 500;
   color: ${theme.text};
   user-select: none;
 
+
+  border: 1px solid ${theme.appHeaderBorder};
+  border-radius: 4px;
+  border-left-width: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
   &, &:hover, &:focus {
     text-decoration: none;
   }

app/client/ui/UserImage.ts

@@ -5,16 +5,6 @@ import {icon} from 'app/client/ui2018/icons';
 
 export type Size = 'small' | 'medium' | 'large';
 
-interface OrgProperties {
-  name: string;
-  domain: string|null;
-}
-
-/** Helper wrapper around OrgProfile that converts it to UserProfile */
-function OrgUser(org: OrgProperties): UserProfile {
-  return {name: org.name, email: org.domain || ''};
-}
-
 /**
  * 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.
@@ -45,13 +35,6 @@ export function createUserImage(
   );
 }
 
-/**
- * Returns a DOM element showing team's initials as a circular icon.
- */
-export function createTeamImage(org: OrgProperties, size: Size, ...args: DomElementArg[]): HTMLElement {
-  return createUserImage(OrgUser(org), size, ...args);
-}
-
 /**
  * Extracts initials from a user, e.g. a FullUser. E.g. "Foo Bar" is turned into "FB", and
  * "foo@example.com" into just "f".

app/client/ui2018/cssVars.ts

@@ -907,7 +907,7 @@ export const theme = {
   /* App Header */
   appHeaderBg: new CustomProp('theme-app-header-bg', undefined, colors.light),
   appHeaderBorder: new CustomProp('theme-app-header-border', undefined, colors.mediumGreyOpaque),
-  appHeaderHoverBg: new CustomProp('theme-app-header-hover-bg', undefined, colors.hover),
+  appHeaderBorderHover: new CustomProp('theme-app-header-border-hover', undefined, colors.slate),
 };
 
 const cssColors = values(colors).map(v => v.decl()).join('\n');

app/common/ThemePrefs-ti.ts

@@ -452,8 +452,8 @@ export const ThemeColors = t.iface([], {
   "markdown-cell-light-border": "string",
   "markdown-cell-medium-border": "string",
   "app-header-bg": "string",
-  "app-header-hover-bg": "string",
   "app-header-border": "string",
+  "app-header-border-hover": "string",
 });
 
 const exportedTypeSuite: t.ITypeSuite = {

app/common/ThemePrefs.ts

@@ -592,8 +592,8 @@ export interface ThemeColors {
 
   /* App Header */
   'app-header-bg': string;
-  'app-header-hover-bg': string;
   'app-header-border': string;
+  'app-header-border-hover': string;
 }
 
 export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>;

app/common/themes/GristDark.ts

@@ -571,6 +571,6 @@ export const GristDark: ThemeColors = {
 
   /* App Header */
   'app-header-bg': '#32323F',
-  'app-header-border': '#FFFFFF00',
-  'app-header-hover-bg': 'rgba(111,111,125,0.6)',
+  'app-header-border': '#32323f',
+  'app-header-border-hover': '#78788c',
 };

app/common/themes/GristLight.ts

@@ -572,5 +572,5 @@ export const GristLight: ThemeColors = {
   /* App header */
   'app-header-bg': 'var(--grist-theme-page-panels-main-panel-bg)',
   'app-header-border': 'var(--grist-theme-menu-border)',
-  'app-header-hover-bg': 'var(--grist-theme-hover)',
+  'app-header-border-hover': '#B0B0B0',
 };