Update Telegram and Email layouts. Fix Channels. (#1639)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
2024-12-22 02:51:54 +03:00 · 2022-05-05 11:29:46 +03:00 · 2022-05-05 11:29:46 +03:00 · c2766b4e19
commit c2766b4e19
parent b0fd3e6b50
38 changed files with 1174 additions and 592 deletions
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@ -109,6 +109,9 @@
  --toggle-on-bg-color: #5e6ad2;
  --toggle-on-bg-hover: #828fff;

+  --incoming-msg: rgba(67, 67, 72, .3);
+  --outcoming-msg: rgba(67, 67, 72, .6);
+
  --theme-bg-color: #18181e;
  --theme-bg-selection: #282830;
  --theme-bg-checked: #262b39;
@ -125,8 +128,6 @@
  --theme-border-modal: rgba(0, 0, 0, .2);
  --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
  --theme-chat-divider: rgb(36, 36, 41);
-  --theme-incoming-msg: rgba(67, 67, 72, .3);
-  --theme-outcoming-msg: rgba(67, 67, 72, .6);

  --theme-card-bg: #282830;
  --theme-card-bg-dark: rgba(222, 222, 240, .1);
@ -250,6 +251,9 @@
  --toggle-on-bg-color: #6e79d6;
  --toggle-on-bg-hover: #535db3;

+  --incoming-msg: rgba(67, 67, 72, .3);
+  --outcoming-msg: rgba(67, 67, 72, .6);
+
  --theme-bg-color: #FFFFFF;
  --theme-bg-selection: #F1F1F4;
  --theme-menu-color: #E7E7E7;
@ -264,8 +268,6 @@
  --theme-border-modal: rgba(0, 0, 0, .2);
  --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
  --theme-chat-divider: rgb(233, 233, 233);
-  --theme-incoming-msg: rgba(67, 67, 72, .3);
-  --theme-outcoming-msg: rgba(67, 67, 72, .6);

  --theme-card-bg: #FFF;
  --theme-card-bg-dark: rgba(255, 255, 255, .3);
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@ -116,6 +116,15 @@ p:last-child { margin-block-end: 0; }
  float: left;
 }

+input.search {
+  margin: 0;
+  color: #d6d6d6;
+  border: none;
+  caret-color: var(--caret-color);
+
+  &.padding { padding: .625rem .75rem; }
+}
+
 /* Flex */
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
@ -374,6 +383,7 @@ p:last-child { margin-block-end: 0; }
 .px-2 { padding: 0 .5rem; }
 .px-3 { padding: 0 .75rem; }
 .px-4 { padding: 0 1rem; }
+.py-4 { padding: 1rem 0; }
 .py-10 { padding: 2.5rem 0; }

 .p-1 { padding: .25rem; }
@ -606,6 +616,11 @@ a.no-line {
  background-color: var(--theme-bg-accent-color);
  &:hover { background-color: var(--theme-menu-divider); }
 }
+.scroll-divider-color::-webkit-scrollbar-thumb {
+  background-color: var(--divider-color);
+  &:horizontal { border-radius: .25rem .25rem 0 0; }
+  &:hover { background-color: var(--popup-bg-hover); }
+}

 /* Backgrounds & Colors */
 .background-body-color { background-color: var(--body-color); }
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@ -209,23 +209,23 @@

 /* Basic */
 .antiTitle {
-  .icon-wrapper,
-  .title-wrapper {
+  .icon-wrapper, &.icon-wrapper,
+  .title-wrapper, &.title-wrapper {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
  }
-  .title-wrapper {
+  .title-wrapper, &.title-wrapper {
    flex-direction: column;
    flex-grow: 1;
  }
-  .icon-wrapper { align-items: center; }
+  .icon-wrapper, &.icon-wrapper { align-items: center; }

-  .wrapped-icon {
+  .wrapped-icon, &.wrapped-icon {
    margin-right: .75rem;
    color: var(--content-color);
  }
-  .wrapped-title {
+  .wrapped-title, &.wrapped-title {
    min-width: 0;
    font-weight: 500;
    font-size: 1rem;
@ -236,7 +236,7 @@
    white-space: nowrap;
    user-select: none;
  }
-  .wrapped-subtitle {
+  .wrapped-subtitle, &.wrapped-subtitle {
    min-width: 0;
    font-size: 0.75rem;
    color: var(--dark-color);
@ -249,5 +249,7 @@
    -webkit-line-clamp: 2;
    line-clamp: 2;
    user-select: none;
+
+    b { color: var(--content-color); }
  }
 }
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@ -425,6 +425,9 @@
  }
 }

+// THead background-color in Tooltip
+.popup-tooltip .antiTable .scroller-thead { background-color: var(--accent-bg-color); }
+
 // Hide row menu in Tooltip
 .popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; }

--- a/packages/ui/lang/en.json
+++ b/packages/ui/lang/en.json
@ -32,6 +32,7 @@
    "MinutesAfter": "{minutes, plural, =1 {in a minute} other {in # minutes}}",
    "HoursAfter": "{hours, plural, =1 {in an hour} other {in # hours}}",
    "DaysAfter": "{days, plural, =1 {in a day} other {in # days}}",
-    "NoActionsDefined": "No actions applicable"
+    "NoActionsDefined": "No actions applicable",
+    "Incoming": "Incoming"
  }
 }
--- a/packages/ui/lang/ru.json
+++ b/packages/ui/lang/ru.json
@ -32,6 +32,7 @@
    "MinutesAfter": "{minutes, plural, =1 {через минуту} other {через # минут}}",
    "HoursAfter": "{hours, plural, =1 {через час} other {через # часа}}",
    "DaysAfter": "{days, plural, =1 {через день} other {через # дней}}",
-    "NoActionsDefined": "Нет доступных действий"
+    "NoActionsDefined": "Нет доступных действий",
+    "Incoming": "Входящие"
  }
 }
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@ -74,6 +74,7 @@
  on:click
  on:focus
  on:blur
+  on:mousemove
 >
  {#if icon && !loading}
    <div
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@ -47,7 +47,7 @@
    <div class="popupPanel-title__content"><slot name="title" /></div>
    <div class="buttons-group xsmall-gap">
      <slot name="utils" />
-      {#if asideFloat}
+      {#if asideFloat && $$slots.aside && isAside}
        {#if $$slots.utils}<div class="buttons-divider" />{/if}
        <Button
          icon={IconDetails}
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@ -32,6 +32,7 @@
  let isScrolling: boolean = false
  let dY: number
  let belowContent: number | undefined = undefined
+  let beforeContent: number | undefined = undefined
  let scrolling: boolean = autoscroll
  let firstScroll: boolean = autoscroll

@ -74,6 +75,7 @@
  }

  const onScroll = (event: MouseEvent): void => {
+    scrolling = false
    if (isScrolling && divBar && divScroll) {
      const rectScroll = divScroll.getBoundingClientRect()
      let Y = event.clientY - dY
@ -97,6 +99,7 @@
    isScrolling = false
  }
  const onScrollStart = (event: MouseEvent): void => {
+    scrolling = false
    const el: HTMLElement = event.currentTarget as HTMLElement
    if (el && divScroll) {
      dY = event.clientY - el.getBoundingClientRect().y
@ -110,35 +113,37 @@

  const checkFade = (): void => {
    if (divScroll) {
-      const t = divScroll.scrollTop
-      const b = divScroll.scrollHeight - divScroll.clientHeight - t
-      if (t > 0 && b > 0) mask = 'both'
-      else if (t > 0) mask = 'bottom'
-      else if (b > 0) mask = 'top'
+      beforeContent = divScroll.scrollTop
+      belowContent = divScroll.scrollHeight - divScroll.clientHeight - beforeContent
+      if (beforeContent > 1 && belowContent > 1) mask = 'both'
+      else if (beforeContent > 1) mask = 'bottom'
+      else if (belowContent > 1) mask = 'top'
      else mask = 'none'
+
+      if (scrolling && divScroll.scrollHeight - divScroll.clientHeight - divScroll.scrollTop > 10 && !firstScroll) {
+        scrolling = false
+      }
+      if (!scrolling && belowContent && belowContent <= 10) scrolling = true
    }
    checkBack()
    if (!isScrolling) checkBar()
-    if (scrolling && belowContent && belowContent > 1) {
-      divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
-    }
  }

  const observer = new IntersectionObserver(() => checkFade(), { root: null, threshold: 0.1 })

-  $: if (autoscroll && !scrolling && belowContent && belowContent < 1 && divScroll) {
-    divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
-    scrolling = true
+  const scrollDown = (): void => {
+    divScroll.scrollTop = divScroll.scrollHeight
  }
-  $: if (scrolling && divScroll && divScroll.scrollHeight - divScroll.scrollTop - divScroll.clientHeight < 5) {
-    divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
-  }
-
+  $: if (scrolling && belowContent && belowContent > 10) scrollDown()
  onMount(() => {
    if (divScroll && divBox) {
      divScroll.addEventListener('scroll', checkFade)
      const tempEl = divBox.querySelector('*') as HTMLElement
      if (tempEl) observer.observe(tempEl)
+      if (scrolling) {
+        scrollDown()
+        firstScroll = false
+      }
      checkFade()
    }
    if (divBack) checkBack()
@ -150,27 +155,14 @@
    if (divScroll && divBox) {
      const tempEl = divBox.querySelector('*') as HTMLElement
      if (tempEl) observer.observe(tempEl)
-      if (scrolling) divScroll.scrollTop = divScroll.scrollHeight - divScroll.clientHeight
-      belowContent = divScroll.scrollHeight - divScroll.clientHeight - divScroll.scrollTop
+      if (scrolling) scrollDown()
      checkFade()
    }
  })

  let divWidth: number = 0
-  const _resize = (): void => {
-    checkFade()
-  }
+  const _resize = (): void => checkFade()
  $: if (divWidth) _resize()
-
-  const _scroll = (ev: Event): void => {
-    if (ev.type === 'scroll') {
-      firstScroll ? (firstScroll = false) : (scrolling = false)
-      if (ev.target) {
-        const el: HTMLElement = ev.target as HTMLElement
-        if (el.scrollHeight - el.scrollTop - el.clientHeight < 5) scrolling = true
-      }
-    }
-  }
 </script>

 <svelte:window on:resize={_resize} />
@ -178,7 +170,6 @@
  <div
    bind:this={divScroll}
    bind:clientWidth={divWidth}
-    on:scroll={_scroll}
    class="scroll relative"
    class:tableFade
    class:antiNav-topFade={mask === 'top'}
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@ -121,6 +121,7 @@
    closeTooltip()
  }

+  let timeout: number
  const whileShow = (ev: MouseEvent): void => {
    if ($tooltip.element && tooltipHTML) {
      const rectP = tooltipHTML.getBoundingClientRect()
@ -129,10 +130,20 @@
      const inTrigger: boolean = ev.x >= rect.left && ev.x <= rect.right && ev.y >= rect.top && ev.y <= rect.bottom
      const inPopup: boolean =
        ev.x >= rectP.left && ev.x <= rectP.right && ev.y >= rectP.top - dT && ev.y <= rectP.bottom + dB
+
+      clearTimeout(timeout)
      if (tooltipSW) {
-        if (!inTrigger) hideTooltip()
+        if (!inTrigger) {
+          timeout = setTimeout(() => {
+            hideTooltip()
+          }, 100)
+        }
      } else {
-        if (!(inTrigger || inPopup)) hideTooltip()
+        if (!(inTrigger || inPopup)) {
+          timeout = setTimeout(() => {
+            hideTooltip()
+          }, 100)
+        }
      }
    }
  }
@ -148,7 +159,7 @@
  }}
 />
 {#if $tooltip.component}
-  <div class="popup-tooltip antiPopup" bind:clientWidth={clWidth} bind:this={tooltipHTML}>
+  <div class="popup-tooltip" class:doublePadding={$tooltip.label} bind:clientWidth={clWidth} bind:this={tooltipHTML}>
    {#if $tooltip.label}<div class="fs-title mb-4">
        <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
      </div>{/if}
@ -179,14 +190,18 @@
    position: fixed;
    display: flex;
    flex-direction: column;
-    padding: 1rem;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-tooltip-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    padding: 0.5rem;
+    color: var(--caption-color);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
    border-radius: 0.75rem;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    user-select: none;
    z-index: 10000;
+
+    &.doublePadding {
+      padding: 1rem;
+    }
  }

  .nub {
@ -203,12 +218,12 @@
      height: 7px;
    }
    &::before {
-      background-color: var(--theme-tooltip-color);
+      background-color: var(--accent-bg-color);
      clip-path: url('#nub-bg');
      z-index: 1;
    }
    &::after {
-      background-color: var(--theme-bg-accent-color);
+      background-color: var(--divider-color);
      clip-path: url('#nub-border');
      z-index: 2;
    }
@ -265,9 +280,9 @@
    position: fixed;
    padding: 0.5rem 0.75rem;
    text-align: center;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-tooltip-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    color: var(--caption-color);
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
    border-radius: 0.75rem;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    user-select: none;
@ -281,12 +296,12 @@
      height: 7px;
    }
    &::before {
-      background-color: var(--theme-tooltip-color);
+      background-color: var(--accent-bg-color);
      clip-path: url('#nub-bg');
      z-index: 1;
    }
    &::after {
-      background-color: var(--theme-bg-accent-color);
+      background-color: var(--divider-color);
      clip-path: url('#nub-border');
      z-index: 2;
    }
@ -302,7 +317,7 @@
      bottom: 100%;
      &::after,
      &::before {
-        bottom: -7px;
+        bottom: -6px;
        transform: rotate(180deg);
      }
    }
--- a/packages/ui/src/plugin.ts
+++ b/packages/ui/src/plugin.ts
@ -57,7 +57,8 @@ export default plugin(uiId, {
    MinutesAfter: '' as IntlString,
    HoursAfter: '' as IntlString,
    DaysAfter: '' as IntlString,
-    NoActionsDefined: '' as IntlString
+    NoActionsDefined: '' as IntlString,
+    Incoming: '' as IntlString
  },
  metadata: {
    DefaultApplication: '' as Metadata<AnyComponent>
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@ -178,7 +178,7 @@ export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignmen
    show = false
    newProps.left = newProps.right = newProps.top = newProps.bottom = ''
    newProps.maxHeight = newProps.height = ''
-    newProps.maxWidth = newProps.width = ''
+    newProps.maxWidth = newProps.width = newProps.minWidth = ''
    if (typeof element !== 'string') {
      const result = fitPopupPositionedElement(modalHTML, element, newProps)
      applyStyle(newProps, modalHTML)
@ -198,8 +198,8 @@ export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignmen
    } else if (element === 'float') {
      newProps.top = 'calc(var(--status-bar-height) + .25rem)'
      newProps.bottom = '.25rem'
+      newProps.minWidth = '40rem'
      newProps.width = '40%'
-      newProps.maxWidth = '60%'
      newProps.right = '.25rem'
      show = true
    } else if (element === 'account') {
--- a/plugins/activity-assets/src/tsdoc-metadata.json
+++ b/plugins/activity-assets/src/tsdoc-metadata.json
@ -1,11 +1,11 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.19.2"
-    }
-  ]
-}
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.23.0"
+    }
+  ]
+}
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@ -14,12 +14,16 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
  import type { Attachment } from '@anticrm/attachment'
-  import { showPopup, closeTooltip } from '@anticrm/ui'
+  import { showPopup, closeTooltip, Icon, IconClose } from '@anticrm/ui'
  import { PDFViewer, getFileUrl } from '@anticrm/presentation'
  import filesize from 'filesize'

  export let value: Attachment
+  export let removable: boolean = false
+
+  const dispatch = createEventDispatcher()

  const maxLenght: number = 16
  const trimFilename = (fname: string): string =>
@ -36,7 +40,7 @@
  }
 </script>

-<div class="flex-row-center">
+<div class="flex-row-center attachment-container">
  {#if openEmbedded(value.type)}
    <div
      class="flex-center icon"
@ -46,11 +50,33 @@
      }}
    >
      {iconLabel(value.name)}
+      {#if removable}
+        <div
+          class="remove-btn"
+          on:click|preventDefault={() => {
+            dispatch('remove')
+          }}
+        >
+          <Icon icon={IconClose} size={'medium'} />
+        </div>
+      {/if}
    </div>
  {:else}
-    <a class="no-line" href={getFileUrl(value.file)} download={value.name}
-      ><div class="flex-center icon">{iconLabel(value.name)}</div></a
-    >
+    <a class="no-line" href={getFileUrl(value.file)} download={value.name}>
+      <div class="flex-center icon">
+        {iconLabel(value.name)}
+        {#if removable}
+          <div
+            class="remove-btn"
+            on:click|preventDefault={() => {
+              dispatch('remove')
+            }}
+          >
+            <Icon icon={IconClose} size={'medium'} />
+          </div>
+        {/if}
+      </div>
+    </a>
  {/if}
  <div class="flex-col info">
    {#if openEmbedded(value.type)}
@ -72,17 +98,38 @@

 <style lang="scss">
  .icon {
+    position: relative;
    flex-shrink: 0;
    margin-right: 1rem;
    width: 2rem;
    height: 2rem;
    font-weight: 500;
    font-size: 0.625rem;
-    color: var(--primary-button-color);
-    background-color: var(--primary-button-enabled);
+    color: var(--white-color);
+    background-color: var(--primary-bg-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    cursor: pointer;
+
+    .remove-btn {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--primary-bg-hover);
+      border-radius: 0.5rem;
+      opacity: 0;
+    }
+  }
+  .attachment-container {
+    margin-right: 1rem;
+    &:hover .remove-btn {
+      opacity: 1;
+    }
  }

  .name {
--- a/plugins/contact-resources/src/components/ChannelEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelEditor.svelte
@ -16,10 +16,12 @@
  import { createEventDispatcher, onMount } from 'svelte'
  import type { IntlString } from '@anticrm/platform'
  import { translate } from '@anticrm/platform'
-  import { Button, Icon, IconClose, IconBlueCheck, IconArrowRight } from '@anticrm/ui'
+  import { Button, IconClose, closeTooltip, IconBlueCheck } from '@anticrm/ui'
+  import IconCopy from './icons/Copy.svelte'

  export let value: string = ''
  export let placeholder: IntlString
+  export let editable: boolean = false

  const dispatch = createEventDispatcher()
  let input: HTMLInputElement
@ -31,38 +33,55 @@
  })
 </script>

-<div class="selectPopup relative">
-  <div class="header no-border">
-    <div class="flex-between flex-grow pr-2">
-      <div class="flex-grow">
-        <input
-          bind:this={input}
-          type="text"
-          bind:value
-          placeholder={phTraslate}
-          style="width: 100%;"
-          on:keypress={(ev) => {
-            if (ev.key === 'Enter') dispatch('close', value)
-          }}
-          on:keydown={(ev) => {
-            if (ev.key === 'ArrowLeft' && ev.altKey) dispatch('update', 'left')
-            if (ev.key === 'ArrowRight' && ev.altKey) dispatch('update', 'right')
-          }}
-          on:change
-        />
-      </div>
-      <div class="buttons-group small-gap">
-        <div
-          class="clear-btn show"
-          on:click={() => {
-            dispatch('close', value)
-          }}
-        >
-          <div class="icon"><Icon icon={IconClose} size={'inline'} /></div>
-        </div>
-        <Button kind={'transparent'} size={'small'} icon={IconArrowRight} on:click={() => dispatch('update', 'open')} />
-        <Button kind={'transparent'} size={'small'} icon={IconBlueCheck} on:click={() => dispatch('close', value)} />
-      </div>
-    </div>
-  </div>
+<div class="buttons-group xsmall-gap">
+  {#if editable}
+    <input
+      bind:this={input}
+      class="search"
+      type="text"
+      bind:value
+      placeholder={phTraslate}
+      style="width: 100%;"
+      on:keypress={(ev) => {
+        if (ev.key === 'Enter') {
+          dispatch('update', value)
+          closeTooltip()
+        }
+      }}
+      on:change
+    />
+    <Button
+      kind={'transparent'}
+      size={'small'}
+      icon={IconClose}
+      disabled={value === ''}
+      on:click={() => {
+        if (input) {
+          value = ''
+          input.focus()
+        }
+      }}
+    />
+  {:else}
+    <span>{value}</span>
+  {/if}
+  <Button
+    kind={'transparent'}
+    size={'small'}
+    icon={IconCopy}
+    on:click={() => {
+      navigator.clipboard.writeText(value)
+    }}
+  />
+  {#if editable}
+    <Button
+      kind={'transparent'}
+      size={'small'}
+      icon={IconBlueCheck}
+      on:click={() => {
+        dispatch('update', value)
+        closeTooltip()
+      }}
+    />
+  {/if}
 </div>
--- a/plugins/contact-resources/src/components/ChannelsDropdown.svelte
+++ b/plugins/contact-resources/src/components/ChannelsDropdown.svelte
@ -19,7 +19,7 @@
  import contact from '@anticrm/contact'
  import type { AttachedData, Doc, Ref, Timestamp } from '@anticrm/core'
  import type { Asset, IntlString } from '@anticrm/platform'
-  import { AnyComponent, showPopup, Button, Menu, closePopup } from '@anticrm/ui'
+  import { AnyComponent, showPopup, Button, Menu, showTooltip, closeTooltip, eventToHTMLElement } from '@anticrm/ui'
  import type { Action, ButtonKind, ButtonSize } from '@anticrm/ui'
  import presentation from '@anticrm/presentation'
  import { getChannelProviders } from '../utils'
@ -108,6 +108,7 @@
  let actions: Action[] = []
  let addBtn: HTMLButtonElement
  const btns: HTMLButtonElement[] = []
+  let anchor: HTMLElement

  function filterUndefined (channels: AttachedData<Channel>[]): AttachedData<Channel>[] {
    return channels.filter((channel) => channel.value !== undefined && channel.value.length > 0)
@ -145,118 +146,60 @@
    updateMenu()
  }

-  const editChannel = (channel: Item, n: number, ev: MouseEvent): void => {
-    showPopup(
-      ChannelEditor,
-      { value: channel.value, placeholder: channel.placeholder },
-      ev.target as HTMLElement,
-      (result) => {
-        if (result !== undefined) {
-          if (result === null || result === '') displayItems = dropItem(n)
-          else displayItems[n].value = result
-          saveItems()
-          if (displayItems.length < providers.size && addBtn) addBtn.click()
-        }
-      },
-      (result) => {
-        if (result !== undefined) {
-          if (result === 'left') {
-            closePopup()
-            if (displayItems[n].value === '') {
-              displayItems = dropItem(n)
-              saveItems()
-            }
-            if (n === 0) {
-              if (addBtn) addBtn.click()
-              else btns[displayItems.length - 1].click()
-            } else btns[n - 1].click()
-          } else if (result === 'right') {
-            closePopup()
-            if (displayItems[n].value === '') {
-              displayItems = dropItem(n)
-              saveItems()
-            }
-            if (n === displayItems.length - 1) {
-              if (addBtn) addBtn.click()
-              else btns[0].click()
-            } else btns[n + 1].click()
-          } else if (result === 'open') {
-            closePopup()
-            dispatch('open', { presenter: channel.presenter })
-          }
-        }
-      }
-    )
-  }
  const showMenu = (ev: MouseEvent): void => {
-    showPopup(
-      Menu,
-      { actions },
-      ev.target as HTMLElement,
-      () => {},
+    showPopup(Menu, { actions }, ev.target as HTMLElement)
+  }
+
+  const editChannel = (el: HTMLElement, n: number, item: Item): void => {
+    showTooltip(
+      undefined,
+      el,
+      undefined,
+      ChannelEditor,
+      { value: item.value, placeholder: item.placeholder, editable },
+      anchor,
      (result) => {
-        if (result !== undefined && displayItems.length > 0) {
-          if (result === 'left') {
-            closePopup()
-            btns[displayItems.length - 1].click()
-          } else if (result === 'right') {
-            closePopup()
-            btns[0].click()
-          }
+        if (result.detail !== undefined) {
+          if (result.detail === '') displayItems = dropItem(n)
+          else displayItems[n].value = result.detail
+          saveItems()
        }
      }
    )
  }
-  let copied: boolean = false
+  const _focus = (ev: Event, n: number, item: Item): void => {
+    const el = ev.target as HTMLButtonElement
+    if (el) editChannel(el, n, item)
+  }
 </script>

 <div
+  bind:this={anchor}
  class="{displayItems.length === 0 ? 'clear-mins' : 'buttons-group'} {kind === 'no-border'
    ? 'xsmall-gap'
    : 'xxsmall-gap'}"
  class:short={displayItems.length > 4 && length === 'short'}
 >
  {#each displayItems as item, i}
-    {#if item.value === ''}
-      <Button
-        icon={item.icon}
-        {kind}
-        {size}
-        {shape}
-        click={item.value === ''}
-        on:click={(ev) => {
-          if (editable) editChannel(item, i, ev)
-        }}
-      />
-    {:else}
-      <div class="tooltip-container">
-        <div class="tooltip">
-          {item.value}{#if copied}<span class="ml-1 text-sm dark-color">(copied)</span>{/if}
-        </div>
-        <Button
-          bind:input={btns[i]}
-          icon={item.icon}
-          {kind}
-          {size}
-          {shape}
-          highlight={item.integration || item.notification}
-          on:click={(ev) => {
-            if (editable) {
-              editChannel(item, i, ev)
-            } else {
-              dispatch('open', item)
-              if (!copied) {
-                navigator.clipboard.writeText(item.value)
-                copied = true
-                setTimeout(() => {
-                  copied = false
-                }, 1000)
-              }
-            }
-          }}
-        />
-      </div>
-    {/if}
+    <Button
+      bind:input={btns[i]}
+      icon={item.icon}
+      {kind}
+      {size}
+      {shape}
+      highlight={item.integration || item.notification}
+      on:mousemove={(ev) => {
+        _focus(ev, i, item)
+      }}
+      on:focus={(ev) => {
+        _focus(ev, i, item)
+      }}
+      on:click={(ev) => {
+        if (editable) editChannel(eventToHTMLElement(ev), i, item)
+        else closeTooltip()
+        dispatch('open', item)
+      }}
+    />
  {/each}
  {#if actions.length > 0 && editable}
    <Button
@ -270,43 +213,3 @@
    />
  {/if}
 </div>
-
-<style lang="scss">
-  .tooltip-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 0;
-    min-height: 0;
-    width: min-content;
-
-    .tooltip {
-      overflow: hidden;
-      position: absolute;
-      padding: 0.25rem 0.5rem;
-      bottom: 100%;
-      left: 50%;
-      width: auto;
-      min-width: 0;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      background-color: var(--accent-bg-color);
-      border: 1px solid var(--button-border-color);
-      border-radius: 0.25rem;
-      transform-origin: center center;
-      transform: translate(-50%, -0.25rem) scale(0.9);
-      opacity: 0;
-      box-shadow: var(--accent-shadow);
-      transition-property: transform, opacity;
-      transition-duration: 0.15s;
-      transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      pointer-events: none;
-      z-index: 1000;
-    }
-    &:hover .tooltip {
-      transform: translate(-50%, -0.5rem) scale(1);
-      opacity: 1;
-    }
-  }
-</style>
--- a/plugins/contact-resources/src/components/ChannelsEditor.svelte
+++ b/plugins/contact-resources/src/components/ChannelsEditor.svelte
@ -16,10 +16,10 @@
 <script lang="ts">
  import type { Class, Doc, Ref } from '@anticrm/core'
  import { createQuery, getClient } from '@anticrm/presentation'
-  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
+  import { ButtonKind, ButtonSize, closeTooltip } from '@anticrm/ui'

  import { ChannelProvider, Channel } from '@anticrm/contact'
-  import { showPanel } from '@anticrm/ui'
+  import { showPopup } from '@anticrm/ui'
  import contact from '../plugin'
  import ChannelsDropdown from './ChannelsDropdown.svelte'

@ -108,7 +108,8 @@
    if (ev.detail.presenter !== undefined && Array.isArray(channels)) {
      const channel = channels[0]
      if (channel !== undefined) {
-        showPanel(ev.detail.presenter, channel.attachedTo, channel.attachedToClass, 'float')
+        closeTooltip()
+        showPopup(ev.detail.presenter, { _id: channel.attachedTo, _class: channel.attachedToClass }, 'float')
      }
    }
  }
--- a/plugins/contact-resources/src/components/ChannelsPresenter.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
@ -17,7 +17,7 @@
  import type { Channel } from '@anticrm/contact'
  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
  import ChannelsDropdown from './ChannelsDropdown.svelte'
-  import { showPanel } from '@anticrm/ui'
+  import { showPopup } from '@anticrm/ui'

  export let value: Channel[] | Channel | null

@ -31,7 +31,7 @@
    if (ev.detail.presenter !== undefined && Array.isArray(value)) {
      const channel = value[0]
      if (channel !== undefined) {
-        showPanel(ev.detail.presenter, channel.attachedTo, channel.attachedToClass, 'float')
+        showPopup(ev.detail.presenter, { _id: channel.attachedTo, _class: channel.attachedToClass }, 'float')
      }
    }
  }
--- a/plugins/gmail-assets/lang/en.json
+++ b/plugins/gmail-assets/lang/en.json
@ -18,6 +18,7 @@
    "Reply": "Reply",
    "Subject": "Subject",
    "Send": "Send",
+    "NewMessage": "New message",
    "NewMessageTo": "New message to",
    "Cancel": "Cancel",
    "SubjectPlaceholder": "Message subject",
--- a/plugins/gmail-assets/lang/ru.json
+++ b/plugins/gmail-assets/lang/ru.json
@ -18,7 +18,8 @@
    "Reply": "Ответить",
    "Subject": "Тема",
    "Send": "Отправить",
-    "NewMessageTo": "Новое сообщение to",
+    "NewMessage": "Новое сообщение",
+    "NewMessageTo": "Новое сообщение для",
    "Cancel": "Отменить",
    "SubjectPlaceholder": "Тема сообщения",
    "CopyPlaceholder": "Копия",
--- a/plugins/gmail-assets/src/tsdoc-metadata.json
+++ b/plugins/gmail-assets/src/tsdoc-metadata.json
@ -1,11 +1,11 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.19.2"
-    }
-  ]
-}
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.23.0"
+    }
+  ]
+}
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@ -19,12 +19,13 @@
  import gmail from '../plugin'
  import { Channel, Contact, EmployeeAccount, formatName } from '@anticrm/contact'
  import contact from '@anticrm/contact'
-  import { ActionIcon, IconShare, Button, ScrollBox, showPopup, Icon, Label, eventToHTMLElement } from '@anticrm/ui'
+  import plugin, { IconShare, Button, Tooltip, showPopup, Icon, Label, eventToHTMLElement, Scroller } from '@anticrm/ui'
  import { getCurrentAccount, Ref, SortingOrder, Space } from '@anticrm/core'
  import setting from '@anticrm/setting'
  import Connect from './Connect.svelte'
  import Messages from './Messages.svelte'
  import { NotificationClientImpl } from '@anticrm/notification-resources'
+  import IconInbox from './icons/Inbox.svelte'

  export let object: Contact
  export let channel: Channel
@ -121,56 +122,43 @@
  }
 </script>

-<div class="flex-between header">
+<div class="popupPanel-body__main-header bottom-divider">
  {#if selectable}
    <div class="flex-between w-full">
-      <span>{selected.size} <Label label={gmail.string.MessagesSelected} /></span>
+      <span><b>{selected.size}</b> <Label label={gmail.string.MessagesSelected} /></span>
      <div class="flex">
        <div>
-          <Button label={gmail.string.Cancel} size={'small'} on:click={clear} />
+          <Button label={gmail.string.Cancel} on:click={clear} />
        </div>
        <div class="ml-3">
-          <Button
-            label={gmail.string.PublishSelected}
-            size={'small'}
-            kind={'primary'}
-            disabled={!selected.size}
-            on:click={share}
-          />
+          <Button label={gmail.string.PublishSelected} kind={'primary'} disabled={!selected.size} on:click={share} />
        </div>
      </div>
    </div>
  {:else if enabled}
-    <div class="flex-center icon"><Icon icon={contact.icon.Email} size="small" /></div>
-    <div class="flex-grow flex-col">
-      <div class="fs-title">Gmail</div>
-      <div class="text-sm content-dark-color"><Label label={gmail.string.YouAnd} /> {formatName(object.name)}</div>
-    </div>
-    <div class="mr-3">
+    <div class="flex-between">
      <Button
        label={gmail.string.CreateMessage}
-        size={'small'}
        kind={'primary'}
        on:click={() => {
          newMessage = true
        }}
      />
+      <Tooltip label={gmail.string.ShareMessages}>
+        <Button
+          icon={IconShare}
+          kind={'transparent'}
+          on:click={async () => {
+            selectable = !selectable
+          }}
+        />
+      </Tooltip>
    </div>
-    <ActionIcon
-      icon={IconShare}
-      size={'medium'}
-      label={gmail.string.ShareMessages}
-      direction={'bottom'}
-      action={async () => {
-        selectable = !selectable
-      }}
-    />
  {:else}
-    <div class="flex-center">
+    <div class="flex-center flex-grow">
      <Button
        label={gmail.string.Connect}
        kind={'primary'}
-        size={'small'}
        on:click={(e) => {
          showPopup(Connect, {}, eventToHTMLElement(e))
        }}
@ -178,35 +166,16 @@
    </div>
  {/if}
 </div>
-<div class="h-full right-content">
-  <ScrollBox vertical stretch>
-    {#if messages}
+<Scroller>
+  <div class="popupPanel-body__main-content py-4 clear-mins flex-no-shrink">
+    {#if messages && messages.length > 0}
      <Messages messages={convertMessages(messages, accounts)} {selectable} bind:selected on:select />
+      <div class="clear-mins h-4 flex-no-shrink" />
+    {:else}
+      <div class="flex-col-center justify-center h-full">
+        <Icon icon={IconInbox} size={'full'} />
+        <div class="mt-4 fs-bold dark-color"><Label label={plugin.string.Incoming} /></div>
+      </div>
    {/if}
-  </ScrollBox>
-</div>
-
-<style lang="scss">
-  .header {
-    flex-shrink: 0;
-    padding: 0 6rem 0 2.5rem;
-    height: 4rem;
-    color: var(--theme-content-accent-color);
-    border-bottom: 1px solid var(--theme-zone-bg);
-
-    .icon {
-      flex-shrink: 0;
-      margin-right: 1rem;
-      width: 2.25rem;
-      height: 2.25rem;
-      color: var(--theme-caption-color);
-      background-color: var(--primary-button-enabled);
-      border-radius: 50%;
-    }
-  }
-
-  .right-content {
-    flex-grow: 1;
-    padding: 1.5rem 0;
-  }
-</style>
+  </div>
+</Scroller>
--- a/plugins/gmail-resources/src/components/FullMessage.svelte
+++ b/plugins/gmail-resources/src/components/FullMessage.svelte
@ -17,7 +17,7 @@
  import { SharedMessage } from '@anticrm/gmail'
  import Button from '@anticrm/ui/src/components/Button.svelte'
  import { createEventDispatcher } from 'svelte'
-  import { IconArrowLeft, Label } from '@anticrm/ui'
+  import { IconArrowLeft, Label, Scroller } from '@anticrm/ui'
  import gmail from '../plugin'
  import FullMessageContent from './FullMessageContent.svelte'
  import { createQuery } from '@anticrm/presentation'
@ -48,89 +48,76 @@
  $: user = currentMessage.incoming ? currentMessage.receiver : currentMessage.sender
 </script>

-<div class="flex-between clear-mins header">
-  <div
-    class="flex-center icon"
-    on:click={() => {
-      dispatch('close')
-    }}
-  >
-    <IconArrowLeft size="medium" />
-  </div>
-  <div class="flex-grow flex-col mr-4 min-w-0">
-    <div class="fs-title overflow-label">{currentMessage.subject}</div>
-    <div class="text-sm content-dark-color overflow-label">
-      <Label label={currentMessage.incoming ? gmail.string.From : gmail.string.To} />
-      {title}
+<div class="popupPanel-body__main-header bottom-divider">
+  <div class="flex-between">
+    <div class="buttons-group">
+      <Button
+        icon={IconArrowLeft}
+        kind={'transparent'}
+        on:click={() => {
+          dispatch('close')
+        }}
+      />
+      <div class="flex-grow flex-col">
+        <span>{currentMessage.subject}</span>
+        <span class="content-accent-color">
+          <Label label={currentMessage.incoming ? gmail.string.From : gmail.string.To} />
+          <b>{title}</b>
+        </span>
+      </div>
+    </div>
+    <div class="buttons-group small-gap">
+      <Button
+        label={gmail.string.Reply}
+        size={'small'}
+        kind={'primary'}
+        on:click={() => {
+          newMessage = true
+        }}
+      />
    </div>
  </div>
-  <div class="mr-3">
-    <Button
-      label={gmail.string.Reply}
-      size={'small'}
-      kind={'primary'}
-      on:click={() => {
-        newMessage = true
-      }}
-    />
-  </div>
 </div>
-<div class="flex-col clear-mins content">
-  <Label label={currentMessage.incoming ? gmail.string.To : gmail.string.From} />
-  {user}
-  {#if currentMessage.copy?.length}
-    <Label label={gmail.string.Copy} />: {currentMessage.copy.join(', ')}
-  {/if}
-  {#if attachments.length}
-    <div class="flex-row-center list mt-2">
-      {#each attachments as attachment}
-        <div class="item flex">
-          <AttachmentPresenter value={attachment} />
-        </div>
-      {/each}
+<Scroller>
+  <div class="popupPanel-body__main-content py-4">
+    <Label label={currentMessage.incoming ? gmail.string.To : gmail.string.From} />
+    {user}
+    {#if currentMessage.copy?.length}
+      <Label label={gmail.string.Copy} />: {currentMessage.copy.join(', ')}
+    {/if}
+    {#if attachments.length}
+      <div class="flex-row-center list mt-2">
+        {#each attachments as attachment}
+          <div class="item flex">
+            <AttachmentPresenter value={attachment} />
+          </div>
+        {/each}
+      </div>
+    {/if}
+    <div class="flex-col content clear-mins">
+      <FullMessageContent content={currentMessage.content} />
    </div>
-  {/if}
-  <div class="flex-col h-full clear-mins mt-4">
-    <FullMessageContent content={currentMessage.content} />
  </div>
-</div>
+</Scroller>

 <style lang="scss">
-  .header {
-    flex-shrink: 0;
-    padding: 0 6rem 0 2.5rem;
-    height: 4rem;
-    color: var(--theme-content-accent-color);
-    border-bottom: 1px solid var(--theme-zone-bg);
+  .list {
+    padding: 0.5rem;
+    color: var(--theme-caption-color);
+    overflow-x: auto;
+    overflow-y: hidden;
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 0.25rem;

-    .icon {
-      flex-shrink: 0;
-      margin-right: 1rem;
-      width: 2.25rem;
-      height: 2.25rem;
-      color: var(--theme-caption-color);
-      border-radius: 50%;
-      cursor: pointer;
+    .item + .item {
+      padding-left: 1rem;
+      border-left: 1px solid var(--divider-color);
    }
  }
-
  .content {
-    flex-grow: 1;
-    padding: 1.5rem 2.5rem;
-
-    .list {
-      padding: 1rem;
-      color: var(--theme-caption-color);
-      overflow-x: auto;
-      overflow-y: hidden;
-      background-color: var(--theme-bg-accent-color);
-      border: 1px solid var(--theme-bg-accent-color);
-      border-radius: 0.75rem;
-
-      .item + .item {
-        padding-left: 1rem;
-        border-left: 1px solid var(--theme-bg-accent-color);
-      }
-    }
+    margin-top: 1rem;
+    background-color: var(--incoming-msg);
+    border-radius: 0.25rem;
  }
 </style>
--- a/plugins/gmail-resources/src/components/FullMessageContent.svelte
+++ b/plugins/gmail-resources/src/components/FullMessageContent.svelte
@ -22,11 +22,13 @@
 <style lang="scss">
  iframe {
    overflow: auto;
-    border: none;
-    border-radius: 0.5rem;
    height: 100%;
-    background-color: #fff;
-    color: #1f212b;
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 0.875rem;
+    background-color: #ffffffc0;
+    border: none;
+    border-radius: 0.25rem;

    :global(a) {
      font: inherit;
--- a/plugins/gmail-resources/src/components/Main.svelte
+++ b/plugins/gmail-resources/src/components/Main.svelte
@ -15,15 +15,16 @@
 -->
 <script lang="ts">
  import { Ref, Doc, Class } from '@anticrm/core'
-  import contact, { Channel } from '@anticrm/contact'
+  import contact, { Channel, formatName } from '@anticrm/contact'
  import { SharedMessage } from '@anticrm/gmail'
  import NewMessage from './NewMessage.svelte'
  import FullMessage from './FullMessage.svelte'
  import Chats from './Chats.svelte'
  import { createQuery, getClient } from '@anticrm/presentation'
  import { NotificationClientImpl } from '@anticrm/notification-resources'
-  import { Panel } from '@anticrm/panel'
+  import { Panel, Icon, Label } from '@anticrm/ui'
  import { createEventDispatcher } from 'svelte'
+  import gmail from '../plugin'

  export let _id: Ref<Doc>
  export let _class: Ref<Class<Doc>>
@ -71,16 +72,24 @@

 {#if channel && object}
  <Panel
-    icon={contact.icon.Email}
-    title={'Email'}
-    withoutActivity
-    {object}
-    isHeader={false}
+    isHeader={true}
    isAside={false}
    on:close={() => {
      dispatch('close')
    }}
  >
+    <svelte:fragment slot="title">
+      <div class="antiTitle icon-wrapper">
+        <div class="wrapped-icon"><Icon icon={contact.icon.Email} size={'medium'} /></div>
+        <div class="title-wrapper">
+          <span class="wrapped-title">Email</span>
+          <span class="wrapped-subtitle">
+            <Label label={gmail.string.YouAnd} />
+            <b>{formatName(object.name)}</b>
+          </span>
+        </div>
+      </div>
+    </svelte:fragment>
    {#if newMessage}
      <NewMessage {object} {channel} {currentMessage} on:close={back} />
    {:else if currentMessage}
--- a/plugins/gmail-resources/src/components/Message.svelte
+++ b/plugins/gmail-resources/src/components/Message.svelte
@ -34,21 +34,20 @@
    dispatch('select', message)
  }}
 >
-  {#if selectable}
-    <div class="mr-4"><CheckBox circle primary bind:checked={selected} /></div>
-  {/if}
  <div class="flex-col message" class:selected>
    <div class="flex-between text-sm mb-1">
-      <div class="content-trans-color overflow-label mr-4">
-        <Label label={gmail.string.From} /><span class="content-accent-color">{message.sender}</span>
+      <div class="dark-color overflow-label mr-4">
+        <Label label={gmail.string.From} />
+        <span class="content-accent-color">{message.sender}</span>
      </div>
-      <div class="content-trans-color flex">
+      <div class="dark-color flex">
        <AttachmentsPresenter value={message} />
-        {getTime(message.sendOn)}
+        <span class="content-accent-color">{getTime(message.sendOn)}</span>
      </div>
    </div>
-    <div class="content-trans-color text-sm overflow-label mr-4 mb-4">
-      <Label label={gmail.string.To} /><span class="content-accent-color">{message.receiver}</span>
+    <div class="dark-color text-sm overflow-label mr-4 mb-4">
+      <Label label={gmail.string.To} />
+      <span class="content-accent-color">{message.receiver}</span>
    </div>
    <div class="fs-title overflow-label mb-1">
      {message.subject}
@ -57,18 +56,22 @@
      {message.textContent}
    </div>
  </div>
+  {#if selectable}
+    <div class="ml-4"><CheckBox circle primary bind:checked={selected} /></div>
+  {/if}
 </div>

 <style lang="scss">
  .message-conatiner {
-    margin: 0 1.5rem;
+    flex-shrink: 0;
+    margin: 0.25rem 0;
    cursor: pointer;
  }

  .message {
    padding: 1rem;
    min-width: 0;
-    background-color: var(--theme-incoming-msg);
+    background-color: var(--incoming-msg);
    border-radius: 0.75rem;
    white-space: nowrap;
    flex-grow: 1;
--- a/plugins/gmail-resources/src/components/Messages.svelte
+++ b/plugins/gmail-resources/src/components/Messages.svelte
@ -15,7 +15,6 @@
 -->
 <script lang="ts">
  import type { SharedMessage } from '@anticrm/gmail'
-  import { Grid } from '@anticrm/ui'
  import MessageView from './Message.svelte'
  import { Ref } from '@anticrm/core'
  import { createEventDispatcher } from 'svelte'
@ -40,17 +39,15 @@
  }
 </script>

-<Grid column={1} rowGap={0.5}>
-  {#if messages}
-    {#each messages as message (message._id)}
-      <MessageView
-        {message}
-        {selectable}
-        selected={selected.has(message._id)}
-        on:select={() => {
-          select(message._id)
-        }}
-      />
-    {/each}
-  {/if}
-</Grid>
+{#if messages}
+  {#each messages as message (message._id)}
+    <MessageView
+      {message}
+      {selectable}
+      selected={selected.has(message._id)}
+      on:select={() => {
+        select(message._id)
+      }}
+    />
+  {/each}
+{/if}
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@ -22,7 +22,7 @@
  import { getResource, setPlatformStatus, unknownError } from '@anticrm/platform'
  import { createQuery, getClient } from '@anticrm/presentation'
  import { TextEditor } from '@anticrm/text-editor'
-  import { ActionIcon, IconArrowLeft, IconAttachment, IconClose, Label } from '@anticrm/ui'
+  import { Scroller, IconArrowLeft, IconAttachment, Label } from '@anticrm/ui'
  import Button from '@anticrm/ui/src/components/Button.svelte'
  import EditBox from '@anticrm/ui/src/components/EditBox.svelte'
  import { createEventDispatcher } from 'svelte'
@ -147,161 +147,125 @@
  style="display: none"
  on:change={fileSelected}
 />
-<div class="flex-between clear-mins header">
-  <div
-    class="flex-center icon"
-    on:click={() => {
-      dispatch('close')
-    }}
-  >
-    <IconArrowLeft size="medium" />
-  </div>
-  <div class="flex-grow flex-col">
-    <div class="fs-title">Gmail</div>
-    <div class="text-sm content-dark-color overflow-label">
-      <Label label={plugin.string.NewMessageTo} />
-      <span class="content-accent-color">{formatName(object.name)} ({channel.value})</span>
+<div class="popupPanel-body__main-header bottom-divider">
+  <div class="flex-between">
+    <div class="buttons-group">
+      <Button
+        icon={IconArrowLeft}
+        kind={'transparent'}
+        on:click={() => {
+          dispatch('close')
+        }}
+      />
+      <div class="flex-grow flex-col">
+        <Label label={plugin.string.NewMessage} />
+        <span class="content-accent-color"><b>{formatName(object.name)} ({channel.value})</b></span>
+      </div>
    </div>
-  </div>
-  <div class="mr-3 flex-row-center">
-    <div class="mr-2">
-      <ActionIcon
+    <div class="buttons-group small-gap">
+      <Button
        icon={IconAttachment}
-        size={'small'}
-        action={() => {
+        kind={'transparent'}
+        on:click={() => {
          inputFile.click()
        }}
      />
+      <Button label={plugin.string.Send} kind={'primary'} on:click={sendMsg} />
    </div>
-    <Button label={plugin.string.Send} size={'small'} kind={'primary'} on:click={sendMsg} />
  </div>
 </div>
-<div
-  class="flex-col clear-mins right-content"
-  on:dragover|preventDefault={() => {}}
-  on:dragleave={() => {}}
-  on:drop|preventDefault|stopPropagation={fileDrop}
->
-  <div class="mb-2">
-    <EditBox
-      label={plugin.string.Subject}
-      bind:value={obj.subject}
-      placeholder={plugin.string.SubjectPlaceholder}
-      maxWidth={'min-content'}
-    />
-  </div>
-  <div>
-    <EditBox
-      label={plugin.string.Copy}
-      bind:value={copy}
-      placeholder={plugin.string.CopyPlaceholder}
-      maxWidth={'min-content'}
-    />
-  </div>
-  {#if attachments.length}
-    <div class="flex-row-center list mt-2">
-      {#each attachments as attachment}
-        <div class="item flex">
-          <AttachmentPresenter value={attachment} />
-          <div class="remove">
-            <ActionIcon
-              icon={IconClose}
-              action={() => {
-                removeAttachment(attachment)
+<Scroller>
+  <div
+    class="popupPanel-body__main-content py-4"
+    on:dragover|preventDefault={() => {}}
+    on:dragleave={() => {}}
+    on:drop|preventDefault|stopPropagation={fileDrop}
+  >
+    <div class="mb-2">
+      <EditBox
+        label={plugin.string.Subject}
+        bind:value={obj.subject}
+        placeholder={plugin.string.SubjectPlaceholder}
+        maxWidth={'min-content'}
+      />
+    </div>
+    <div>
+      <EditBox
+        label={plugin.string.Copy}
+        bind:value={copy}
+        placeholder={plugin.string.CopyPlaceholder}
+        maxWidth={'min-content'}
+      />
+    </div>
+    {#if attachments.length}
+      <div class="flex-row-center list mt-2 scroll-divider-color">
+        {#each attachments as attachment}
+          <div class="item flex-row-center flex-no-shrink">
+            <AttachmentPresenter
+              value={attachment}
+              removable
+              on:remove={(result) => {
+                if (result !== undefined) removeAttachment(attachment)
              }}
-              size="small"
            />
          </div>
-        </div>
-      {/each}
+        {/each}
+      </div>
+    {/if}
+    <div class="input mt-4 clear-mins">
+      <TextEditor bind:this={editor} bind:content={obj.content} on:blur={editor.submit} />
    </div>
-  {/if}
-  <div class="input mt-4 clear-mins">
-    <TextEditor bind:this={editor} bind:content={obj.content} on:blur={editor.submit} />
  </div>
-</div>
+</Scroller>

 <style lang="scss">
-  .header {
-    flex-shrink: 0;
-    padding: 0 6rem 0 2.5rem;
-    height: 4rem;
-    color: var(--theme-content-accent-color);
-    border-bottom: 1px solid var(--theme-zone-bg);
+  .list {
+    padding: 0.5rem;
+    color: var(--theme-caption-color);
+    overflow-x: auto;
+    overflow-y: hidden;
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 0.25rem;

-    .icon {
-      flex-shrink: 0;
-      margin-right: 1rem;
-      width: 2.25rem;
-      height: 2.25rem;
-      color: var(--theme-caption-color);
-      border-radius: 50%;
-      cursor: pointer;
+    .item + .item {
+      padding-left: 1rem;
+      border-left: 1px solid var(--divider-color);
    }
  }

-  .right-content {
-    flex-grow: 1;
-    padding: 1.5rem 2.5rem;
+  .input {
+    overflow: auto;
+    padding: 1rem;
+    background-color: var(--outcoming-msg);
+    color: #d6d6d6;
+    caret-color: var(--caret-color);
+    min-height: 0;
+    height: calc(100% - 12rem);
+    border-radius: 0.25rem;

-    .list {
-      padding: 1rem;
-      color: var(--theme-caption-color);
-      overflow-x: auto;
-      overflow-y: hidden;
-      background-color: var(--theme-bg-accent-color);
-      border: 1px solid var(--theme-bg-accent-color);
-      border-radius: 0.75rem;
-
-      .item + .item {
-        padding-left: 1rem;
-        border-left: 1px solid var(--theme-bg-accent-color);
-      }
-
-      .item {
-        .remove {
-          visibility: hidden;
-        }
-      }
-
-      .item:hover {
-        .remove {
-          visibility: visible;
-        }
-      }
+    :global(.ProseMirror) {
+      min-height: 0;
+      max-height: 100%;
+      height: auto;
    }

-    .input {
-      overflow: auto;
-      padding: 1rem;
-      background-color: #fff;
-      color: #1f212b;
-      height: 100%;
-      border-radius: 0.5rem;
-
-      :global(.ProseMirror) {
-        min-height: 0;
-        max-height: 100%;
-        height: 100%;
-      }
-
-      :global(a) {
-        font: inherit;
-        font-weight: 500;
-        text-decoration: initial;
+    :global(a) {
+      font: inherit;
+      font-weight: 500;
+      text-decoration: initial;
+      color: initial;
+      outline: initial;
+      &:hover {
+        color: initial;
+        text-decoration: initial;
+      }
+      &:active {
+        color: initial;
+        text-decoration: initial;
+      }
+      &:visited {
        color: initial;
-        outline: initial;
-        &:hover {
-          color: initial;
-          text-decoration: initial;
-        }
-        &:active {
-          color: initial;
-          text-decoration: initial;
-        }
-        &:visited {
-          color: initial;
-        }
      }
    }
  }
--- a/plugins/gmail-resources/src/components/SharedMessages.svelte
+++ b/plugins/gmail-resources/src/components/SharedMessages.svelte
@ -35,7 +35,7 @@

 <style lang="scss">
  .container {
-    padding: 1.25rem 0 1.5rem;
+    padding: 1rem;
    background-color: var(--theme-bg-accent-color);
    border: 1px solid var(--theme-bg-accent-color);
    border-radius: 0.75rem;
--- a/plugins/gmail-resources/src/components/icons/Inbox.svelte
+++ b/plugins/gmail-resources/src/components/icons/Inbox.svelte
@ -0,0 +1,637 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<svg viewBox="0 0 102 98" width="102" height="98" fill="none">
+  <mask id="A" fill="#fff">
+    <path
+      d="M6 67h1v1H6v-1zm2 0h1v1H8v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zM3 65h1v1H3v-1zm2 0h1v1H5v-1zm2 0h1v1H7v-1zm2 0h1v1H9v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm50 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zM5 69h1v1H5v-1zm2 0h1v1H7v-1zm2 0h1v1H9v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zM6 71h1v1H6v-1zm2 0h1v1H8v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zM7 73h1v1H7v-1zm2 0h1v1H9v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zM8 75h1v1H8v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zM9 77h1v1H9v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm22 0h1v1h-1v-1zm-25-2h1v1h-1v-1zm27 6h1v1h-1v-1zm2 0h1v1h-1v-1zm-1 2h1v1h-1v-1zm-24 4h1v1h-1v-1zM8 79h1v1H8v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1z"
+    />
+    <path
+      d="M9 81h1v1H9v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-25 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-25 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-25 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm32 0h1v1h-1v-1zm-28 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm1 2h1v1h-1v-1zm-28 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm5 2h1v1h-1v-1zm-28 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm3 2h1v1h-1v-1zm-28 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-58-4h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1z"
+    />
+    <path
+      d="M37 89h1v1h-1v-1zm2 0h1v1h-1v-1zm-23 2h1v1h-1v-1zm-2 0h1v1h-1v-1zm-2 0h1v1h-1v-1zm-1-2h1v1h-1v-1zm9 6h1v1h-1v-1zm-5-2h1v1h-1v-1zM7 77h1v1H7v-1zM4 67h1v1H4v-1zm14 24h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-25 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-21 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm45-28h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm23 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1z"
+    />
+    <path
+      d="M80 77h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-1 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm1-2h-1v1h1v-1zm-2 0h-1v1h1v-1zm3-2h-1v1h1v-1zm1-2h-1v1h1v-1zm1-2h-1v1h1v-1zm4-4h-1v1h1v-1zm20 12h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm23 2h-1v1h1v-1zm2 0h-1v1h1v-1zm-3 2h-1v1h1v-1zm2 0h-1v1h1v-1zm-5 2h-1v1h1v-1zm2-4h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm23 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1z"
+    />
+    <path
+      d="M60 93h-1v1h1v-1zm21 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm8-16h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm25 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm27 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm27 2h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1zm-2 0h-1v1h1v-1z"
+    />
+  </mask>
+  <g mask="url(#A)" stroke="url(#B)" stroke-width="2">
+    <path d="M6 67h1v1H6v-1z" />
+    <path d="M8 67h1v1H8v-1z" />
+    <path d="M10 67h1v1h-1v-1z" />
+    <path d="M12 67h1v1h-1v-1z" />
+    <path d="M14 67h1v1h-1v-1z" />
+    <path d="M16 67h1v1h-1v-1z" />
+    <path d="M18 67h1v1h-1v-1z" />
+    <path d="M20 67h1v1h-1v-1z" />
+    <path d="M22 67h1v1h-1v-1z" />
+    <path d="M24 67h1v1h-1v-1z" />
+    <path d="M26 67h1v1h-1v-1z" />
+    <path d="M28 67h1v1h-1v-1z" />
+    <path d="M3 65h1v1H3v-1z" />
+    <path d="M5 65h1v1H5v-1z" />
+    <path d="M7 65h1v1H7v-1z" />
+    <path d="M9 65h1v1H9v-1z" />
+    <path d="M11 65h1v1h-1v-1z" />
+    <path d="M13 65h1v1h-1v-1z" />
+    <path d="M15 65h1v1h-1v-1z" />
+    <path d="M17 65h1v1h-1v-1z" />
+    <path d="M19 65h1v1h-1v-1z" />
+    <path d="M21 65h1v1h-1v-1z" />
+    <path d="M23 65h1v1h-1v-1z" />
+    <path d="M25 65h1v1h-1v-1z" />
+    <path d="M75 65h1v1h-1v-1z" />
+    <path d="M77 65h1v1h-1v-1z" />
+    <path d="M79 65h1v1h-1v-1z" />
+    <path d="M81 65h1v1h-1v-1z" />
+    <path d="M83 65h1v1h-1v-1z" />
+    <path d="M85 65h1v1h-1v-1z" />
+    <path d="M87 65h1v1h-1v-1z" />
+    <path d="M89 65h1v1h-1v-1z" />
+    <path d="M91 65h1v1h-1v-1z" />
+    <path d="M93 65h1v1h-1v-1z" />
+    <path d="M95 65h1v1h-1v-1z" />
+    <path d="M97 65h1v1h-1v-1z" />
+    <path d="M5 69h1v1H5v-1z" />
+    <path d="M7 69h1v1H7v-1z" />
+    <path d="M9 69h1v1H9v-1z" />
+    <path d="M11 69h1v1h-1v-1z" />
+    <path d="M13 69h1v1h-1v-1z" />
+    <path d="M15 69h1v1h-1v-1z" />
+    <path d="M17 69h1v1h-1v-1z" />
+    <path d="M19 69h1v1h-1v-1z" />
+    <path d="M21 69h1v1h-1v-1z" />
+    <path d="M23 69h1v1h-1v-1z" />
+    <path d="M25 69h1v1h-1v-1z" />
+    <path d="M27 69h1v1h-1v-1z" />
+    <path d="M29 69h1v1h-1v-1z" />
+    <path d="M31 69h1v1h-1v-1z" />
+    <path d="M6 71h1v1H6v-1z" />
+    <path d="M8 71h1v1H8v-1z" />
+    <path d="M10 71h1v1h-1v-1z" />
+    <path d="M12 71h1v1h-1v-1z" />
+    <path d="M14 71h1v1h-1v-1z" />
+    <path d="M16 71h1v1h-1v-1z" />
+    <path d="M18 71h1v1h-1v-1z" />
+    <path d="M20 71h1v1h-1v-1z" />
+    <path d="M22 71h1v1h-1v-1z" />
+    <path d="M24 71h1v1h-1v-1z" />
+    <path d="M26 71h1v1h-1v-1z" />
+    <path d="M28 71h1v1h-1v-1z" />
+    <path d="M30 71h1v1h-1v-1z" />
+    <path d="M32 71h1v1h-1v-1z" />
+    <path d="M7 73h1v1H7v-1z" />
+    <path d="M9 73h1v1H9v-1z" />
+    <path d="M11 73h1v1h-1v-1z" />
+    <path d="M13 73h1v1h-1v-1z" />
+    <path d="M15 73h1v1h-1v-1z" />
+    <path d="M17 73h1v1h-1v-1z" />
+    <path d="M19 73h1v1h-1v-1z" />
+    <path d="M21 73h1v1h-1v-1z" />
+    <path d="M23 73h1v1h-1v-1z" />
+    <path d="M25 73h1v1h-1v-1z" />
+    <path d="M27 73h1v1h-1v-1z" />
+    <path d="M29 73h1v1h-1v-1z" />
+    <path d="M31 73h1v1h-1v-1z" />
+    <path d="M33 73h1v1h-1v-1z" />
+    <path d="M8 75h1v1H8v-1z" />
+    <path d="M10 75h1v1h-1v-1z" />
+    <path d="M12 75h1v1h-1v-1z" />
+    <path d="M14 75h1v1h-1v-1z" />
+    <path d="M16 75h1v1h-1v-1z" />
+    <path d="M18 75h1v1h-1v-1z" />
+    <path d="M20 75h1v1h-1v-1z" />
+    <path d="M22 75h1v1h-1v-1z" />
+    <path d="M24 75h1v1h-1v-1z" />
+    <path d="M26 75h1v1h-1v-1z" />
+    <path d="M28 75h1v1h-1v-1z" />
+    <path d="M30 75h1v1h-1v-1z" />
+    <path d="M32 75h1v1h-1v-1z" />
+    <path d="M34 75h1v1h-1v-1z" />
+    <path d="M9 77h1v1H9v-1z" />
+    <path d="M11 77h1v1h-1v-1z" />
+    <path d="M13 77h1v1h-1v-1z" />
+    <path d="M15 77h1v1h-1v-1z" />
+    <path d="M17 77h1v1h-1v-1z" />
+    <path d="M19 77h1v1h-1v-1z" />
+    <path d="M21 77h1v1h-1v-1z" />
+    <path d="M23 77h1v1h-1v-1z" />
+    <path d="M25 77h1v1h-1v-1z" />
+    <path d="M27 77h1v1h-1v-1z" />
+    <path d="M29 77h1v1h-1v-1z" />
+    <path d="M31 77h1v1h-1v-1z" />
+    <path d="M33 77h1v1h-1v-1z" />
+    <path d="M35 77h1v1h-1v-1z" />
+    <path d="M37 77h1v1h-1v-1z" />
+    <path d="M39 77h1v1h-1v-1z" />
+    <path d="M61 77h1v1h-1v-1z" />
+    <path d="M36 75h1v1h-1v-1z" />
+    <path d="M63 81h1v1h-1v-1z" />
+    <path d="M65 81h1v1h-1v-1z" />
+    <path d="M64 83h1v1h-1v-1z" />
+    <path d="M40 87h1v1h-1v-1z" />
+    <path d="M8 79h1v1H8v-1z" />
+    <path d="M10 79h1v1h-1v-1z" />
+    <path d="M12 79h1v1h-1v-1z" />
+    <path d="M14 79h1v1h-1v-1z" />
+    <path d="M16 79h1v1h-1v-1z" />
+    <path d="M18 79h1v1h-1v-1z" />
+    <path d="M20 79h1v1h-1v-1z" />
+    <path d="M22 79h1v1h-1v-1z" />
+    <path d="M24 79h1v1h-1v-1z" />
+    <path d="M26 79h1v1h-1v-1z" />
+    <path d="M28 79h1v1h-1v-1z" />
+    <path d="M30 79h1v1h-1v-1z" />
+    <path d="M32 79h1v1h-1v-1z" />
+    <path d="M34 79h1v1h-1v-1z" />
+    <path d="M9 81h1v1H9v-1z" />
+    <path d="M11 81h1v1h-1v-1z" />
+    <path d="M13 81h1v1h-1v-1z" />
+    <path d="M15 81h1v1h-1v-1z" />
+    <path d="M17 81h1v1h-1v-1z" />
+    <path d="M19 81h1v1h-1v-1z" />
+    <path d="M21 81h1v1h-1v-1z" />
+    <path d="M23 81h1v1h-1v-1z" />
+    <path d="M25 81h1v1h-1v-1z" />
+    <path d="M27 81h1v1h-1v-1z" />
+    <path d="M29 81h1v1h-1v-1z" />
+    <path d="M31 81h1v1h-1v-1z" />
+    <path d="M33 81h1v1h-1v-1z" />
+    <path d="M35 81h1v1h-1v-1z" />
+    <path d="M10 83h1v1h-1v-1z" />
+    <path d="M12 83h1v1h-1v-1z" />
+    <path d="M14 83h1v1h-1v-1z" />
+    <path d="M16 83h1v1h-1v-1z" />
+    <path d="M18 83h1v1h-1v-1z" />
+    <path d="M20 83h1v1h-1v-1z" />
+    <path d="M22 83h1v1h-1v-1z" />
+    <path d="M24 83h1v1h-1v-1z" />
+    <path d="M26 83h1v1h-1v-1z" />
+    <path d="M28 83h1v1h-1v-1z" />
+    <path d="M30 83h1v1h-1v-1z" />
+    <path d="M32 83h1v1h-1v-1z" />
+    <path d="M34 83h1v1h-1v-1z" />
+    <path d="M36 83h1v1h-1v-1z" />
+    <path d="M11 85h1v1h-1v-1z" />
+    <path d="M13 85h1v1h-1v-1z" />
+    <path d="M15 85h1v1h-1v-1z" />
+    <path d="M17 85h1v1h-1v-1z" />
+    <path d="M19 85h1v1h-1v-1z" />
+    <path d="M21 85h1v1h-1v-1z" />
+    <path d="M23 85h1v1h-1v-1z" />
+    <path d="M25 85h1v1h-1v-1z" />
+    <path d="M27 85h1v1h-1v-1z" />
+    <path d="M29 85h1v1h-1v-1z" />
+    <path d="M31 85h1v1h-1v-1z" />
+    <path d="M33 85h1v1h-1v-1z" />
+    <path d="M35 85h1v1h-1v-1z" />
+    <path d="M37 85h1v1h-1v-1z" />
+    <path d="M12 87h1v1h-1v-1z" />
+    <path d="M14 87h1v1h-1v-1z" />
+    <path d="M16 87h1v1h-1v-1z" />
+    <path d="M18 87h1v1h-1v-1z" />
+    <path d="M20 87h1v1h-1v-1z" />
+    <path d="M22 87h1v1h-1v-1z" />
+    <path d="M24 87h1v1h-1v-1z" />
+    <path d="M26 87h1v1h-1v-1z" />
+    <path d="M28 87h1v1h-1v-1z" />
+    <path d="M30 87h1v1h-1v-1z" />
+    <path d="M32 87h1v1h-1v-1z" />
+    <path d="M34 87h1v1h-1v-1z" />
+    <path d="M36 87h1v1h-1v-1z" />
+    <path d="M38 87h1v1h-1v-1z" />
+    <path d="M70 87h1v1h-1v-1z" />
+    <path d="M42 87h1v1h-1v-1z" />
+    <path d="M44 87h1v1h-1v-1z" />
+    <path d="M46 87h1v1h-1v-1z" />
+    <path d="M48 87h1v1h-1v-1z" />
+    <path d="M50 87h1v1h-1v-1z" />
+    <path d="M52 87h1v1h-1v-1z" />
+    <path d="M54 87h1v1h-1v-1z" />
+    <path d="M56 87h1v1h-1v-1z" />
+    <path d="M58 87h1v1h-1v-1z" />
+    <path d="M60 87h1v1h-1v-1z" />
+    <path d="M62 87h1v1h-1v-1z" />
+    <path d="M64 87h1v1h-1v-1z" />
+    <path d="M66 87h1v1h-1v-1z" />
+    <path d="M68 87h1v1h-1v-1z" />
+    <path d="M69 89h1v1h-1v-1z" />
+    <path d="M41 89h1v1h-1v-1z" />
+    <path d="M43 89h1v1h-1v-1z" />
+    <path d="M45 89h1v1h-1v-1z" />
+    <path d="M47 89h1v1h-1v-1z" />
+    <path d="M49 89h1v1h-1v-1z" />
+    <path d="M51 89h1v1h-1v-1z" />
+    <path d="M53 89h1v1h-1v-1z" />
+    <path d="M55 89h1v1h-1v-1z" />
+    <path d="M57 89h1v1h-1v-1z" />
+    <path d="M59 89h1v1h-1v-1z" />
+    <path d="M61 89h1v1h-1v-1z" />
+    <path d="M63 89h1v1h-1v-1z" />
+    <path d="M65 89h1v1h-1v-1z" />
+    <path d="M67 89h1v1h-1v-1z" />
+    <path d="M72 91h1v1h-1v-1z" />
+    <path d="M44 91h1v1h-1v-1z" />
+    <path d="M46 91h1v1h-1v-1z" />
+    <path d="M48 91h1v1h-1v-1z" />
+    <path d="M50 91h1v1h-1v-1z" />
+    <path d="M52 91h1v1h-1v-1z" />
+    <path d="M54 91h1v1h-1v-1z" />
+    <path d="M56 91h1v1h-1v-1z" />
+    <path d="M58 91h1v1h-1v-1z" />
+    <path d="M60 91h1v1h-1v-1z" />
+    <path d="M62 91h1v1h-1v-1z" />
+    <path d="M64 91h1v1h-1v-1z" />
+    <path d="M66 91h1v1h-1v-1z" />
+    <path d="M68 91h1v1h-1v-1z" />
+    <path d="M70 91h1v1h-1v-1z" />
+    <path d="M73 93h1v1h-1v-1z" />
+    <path d="M45 93h1v1h-1v-1z" />
+    <path d="M47 93h1v1h-1v-1z" />
+    <path d="M49 93h1v1h-1v-1z" />
+    <path d="M51 93h1v1h-1v-1z" />
+    <path d="M53 93h1v1h-1v-1z" />
+    <path d="M55 93h1v1h-1v-1z" />
+    <path d="M57 93h1v1h-1v-1z" />
+    <path d="M59 93h1v1h-1v-1z" />
+    <path d="M61 93h1v1h-1v-1z" />
+    <path d="M63 93h1v1h-1v-1z" />
+    <path d="M65 93h1v1h-1v-1z" />
+    <path d="M67 93h1v1h-1v-1z" />
+    <path d="M69 93h1v1h-1v-1z" />
+    <path d="M71 93h1v1h-1v-1z" />
+    <path d="M13 89h1v1h-1v-1z" />
+    <path d="M15 89h1v1h-1v-1z" />
+    <path d="M17 89h1v1h-1v-1z" />
+    <path d="M19 89h1v1h-1v-1z" />
+    <path d="M21 89h1v1h-1v-1z" />
+    <path d="M23 89h1v1h-1v-1z" />
+    <path d="M25 89h1v1h-1v-1z" />
+    <path d="M27 89h1v1h-1v-1z" />
+    <path d="M29 89h1v1h-1v-1z" />
+    <path d="M31 89h1v1h-1v-1z" />
+    <path d="M33 89h1v1h-1v-1z" />
+    <path d="M35 89h1v1h-1v-1z" />
+    <path d="M37 89h1v1h-1v-1z" />
+    <path d="M39 89h1v1h-1v-1z" />
+    <path d="M16 91h1v1h-1v-1z" />
+    <path d="M14 91h1v1h-1v-1z" />
+    <path d="M12 91h1v1h-1v-1z" />
+    <path d="M11 89h1v1h-1v-1z" />
+    <path d="M20 95h1v1h-1v-1z" />
+    <path d="M15 93h1v1h-1v-1z" />
+    <path d="M7 77h1v1H7v-1z" />
+    <path d="M4 67h1v1H4v-1z" />
+    <path d="M18 91h1v1h-1v-1z" />
+    <path d="M20 91h1v1h-1v-1z" />
+    <path d="M22 91h1v1h-1v-1z" />
+    <path d="M24 91h1v1h-1v-1z" />
+    <path d="M26 91h1v1h-1v-1z" />
+    <path d="M28 91h1v1h-1v-1z" />
+    <path d="M30 91h1v1h-1v-1z" />
+    <path d="M32 91h1v1h-1v-1z" />
+    <path d="M34 91h1v1h-1v-1z" />
+    <path d="M36 91h1v1h-1v-1z" />
+    <path d="M38 91h1v1h-1v-1z" />
+    <path d="M40 91h1v1h-1v-1z" />
+    <path d="M42 91h1v1h-1v-1z" />
+    <path d="M17 93h1v1h-1v-1z" />
+    <path d="M19 93h1v1h-1v-1z" />
+    <path d="M21 93h1v1h-1v-1z" />
+    <path d="M23 93h1v1h-1v-1z" />
+    <path d="M25 93h1v1h-1v-1z" />
+    <path d="M27 93h1v1h-1v-1z" />
+    <path d="M29 93h1v1h-1v-1z" />
+    <path d="M31 93h1v1h-1v-1z" />
+    <path d="M33 93h1v1h-1v-1z" />
+    <path d="M35 93h1v1h-1v-1z" />
+    <path d="M37 93h1v1h-1v-1z" />
+    <path d="M39 93h1v1h-1v-1z" />
+    <path d="M41 93h1v1h-1v-1z" />
+    <path d="M43 93h1v1h-1v-1z" />
+    <path d="M22 95h1v1h-1v-1z" />
+    <path d="M24 95h1v1h-1v-1z" />
+    <path d="M26 95h1v1h-1v-1z" />
+    <path d="M28 95h1v1h-1v-1z" />
+    <path d="M30 95h1v1h-1v-1z" />
+    <path d="M32 95h1v1h-1v-1z" />
+    <path d="M34 95h1v1h-1v-1z" />
+    <path d="M36 95h1v1h-1v-1z" />
+    <path d="M38 95h1v1h-1v-1z" />
+    <path d="M40 95h1v1h-1v-1z" />
+    <path d="M42 95h1v1h-1v-1z" />
+    <path d="M44 95h1v1h-1v-1z" />
+    <path d="M46 95h1v1h-1v-1z" />
+    <path d="M48 95h1v1h-1v-1z" />
+    <path d="M50 95h1v1h-1v-1z" />
+    <path d="M52 95h1v1h-1v-1z" />
+    <path d="M97 67h-1v1h1v-1z" />
+    <path d="M95 67h-1v1h1v-1z" />
+    <path d="M93 67h-1v1h1v-1z" />
+    <path d="M91 67h-1v1h1v-1z" />
+    <path d="M89 67h-1v1h1v-1z" />
+    <path d="M87 67h-1v1h1v-1z" />
+    <path d="M85 67h-1v1h1v-1z" />
+    <path d="M83 67h-1v1h1v-1z" />
+    <path d="M81 67h-1v1h1v-1z" />
+    <path d="M79 67h-1v1h1v-1z" />
+    <path d="M77 67h-1v1h1v-1z" />
+    <path d="M75 67h-1v1h1v-1z" />
+    <path d="M98 69h-1v1h1v-1z" />
+    <path d="M96 69h-1v1h1v-1z" />
+    <path d="M94 69h-1v1h1v-1z" />
+    <path d="M92 69h-1v1h1v-1z" />
+    <path d="M90 69h-1v1h1v-1z" />
+    <path d="M88 69h-1v1h1v-1z" />
+    <path d="M86 69h-1v1h1v-1z" />
+    <path d="M84 69h-1v1h1v-1z" />
+    <path d="M82 69h-1v1h1v-1z" />
+    <path d="M80 69h-1v1h1v-1z" />
+    <path d="M78 69h-1v1h1v-1z" />
+    <path d="M76 69h-1v1h1v-1z" />
+    <path d="M74 69h-1v1h1v-1z" />
+    <path d="M72 69h-1v1h1v-1z" />
+    <path d="M97 71h-1v1h1v-1z" />
+    <path d="M95 71h-1v1h1v-1z" />
+    <path d="M93 71h-1v1h1v-1z" />
+    <path d="M91 71h-1v1h1v-1z" />
+    <path d="M89 71h-1v1h1v-1z" />
+    <path d="M87 71h-1v1h1v-1z" />
+    <path d="M85 71h-1v1h1v-1z" />
+    <path d="M83 71h-1v1h1v-1z" />
+    <path d="M81 71h-1v1h1v-1z" />
+    <path d="M79 71h-1v1h1v-1z" />
+    <path d="M77 71h-1v1h1v-1z" />
+    <path d="M75 71h-1v1h1v-1z" />
+    <path d="M73 71h-1v1h1v-1z" />
+    <path d="M71 71h-1v1h1v-1z" />
+    <path d="M96 73h-1v1h1v-1z" />
+    <path d="M94 73h-1v1h1v-1z" />
+    <path d="M92 73h-1v1h1v-1z" />
+    <path d="M90 73h-1v1h1v-1z" />
+    <path d="M88 73h-1v1h1v-1z" />
+    <path d="M86 73h-1v1h1v-1z" />
+    <path d="M84 73h-1v1h1v-1z" />
+    <path d="M82 73h-1v1h1v-1z" />
+    <path d="M80 73h-1v1h1v-1z" />
+    <path d="M78 73h-1v1h1v-1z" />
+    <path d="M76 73h-1v1h1v-1z" />
+    <path d="M74 73h-1v1h1v-1z" />
+    <path d="M72 73h-1v1h1v-1z" />
+    <path d="M70 73h-1v1h1v-1z" />
+    <path d="M95 75h-1v1h1v-1z" />
+    <path d="M93 75h-1v1h1v-1z" />
+    <path d="M91 75h-1v1h1v-1z" />
+    <path d="M89 75h-1v1h1v-1z" />
+    <path d="M87 75h-1v1h1v-1z" />
+    <path d="M85 75h-1v1h1v-1z" />
+    <path d="M83 75h-1v1h1v-1z" />
+    <path d="M81 75h-1v1h1v-1z" />
+    <path d="M79 75h-1v1h1v-1z" />
+    <path d="M77 75h-1v1h1v-1z" />
+    <path d="M75 75h-1v1h1v-1z" />
+    <path d="M73 75h-1v1h1v-1z" />
+    <path d="M71 75h-1v1h1v-1z" />
+    <path d="M69 75h-1v1h1v-1z" />
+    <path d="M94 77h-1v1h1v-1z" />
+    <path d="M92 77h-1v1h1v-1z" />
+    <path d="M90 77h-1v1h1v-1z" />
+    <path d="M88 77h-1v1h1v-1z" />
+    <path d="M86 77h-1v1h1v-1z" />
+    <path d="M84 77h-1v1h1v-1z" />
+    <path d="M82 77h-1v1h1v-1z" />
+    <path d="M80 77h-1v1h1v-1z" />
+    <path d="M78 77h-1v1h1v-1z" />
+    <path d="M76 77h-1v1h1v-1z" />
+    <path d="M74 77h-1v1h1v-1z" />
+    <path d="M72 77h-1v1h1v-1z" />
+    <path d="M70 77h-1v1h1v-1z" />
+    <path d="M68 77h-1v1h1v-1z" />
+    <path d="M67 79h-1v1h1v-1z" />
+    <path d="M65 79h-1v1h1v-1z" />
+    <path d="M66 77h-1v1h1v-1z" />
+    <path d="M64 77h-1v1h1v-1z" />
+    <path d="M67 75h-1v1h1v-1z" />
+    <path d="M68 73h-1v1h1v-1z" />
+    <path d="M69 71h-1v1h1v-1z" />
+    <path d="M73 67h-1v1h1v-1z" />
+    <path d="M93 79h-1v1h1v-1z" />
+    <path d="M91 79h-1v1h1v-1z" />
+    <path d="M89 79h-1v1h1v-1z" />
+    <path d="M87 79h-1v1h1v-1z" />
+    <path d="M85 79h-1v1h1v-1z" />
+    <path d="M83 79h-1v1h1v-1z" />
+    <path d="M81 79h-1v1h1v-1z" />
+    <path d="M79 79h-1v1h1v-1z" />
+    <path d="M77 79h-1v1h1v-1z" />
+    <path d="M75 79h-1v1h1v-1z" />
+    <path d="M73 79h-1v1h1v-1z" />
+    <path d="M71 79h-1v1h1v-1z" />
+    <path d="M69 79h-1v1h1v-1z" />
+    <path d="M94 81h-1v1h1v-1z" />
+    <path d="M92 81h-1v1h1v-1z" />
+    <path d="M90 81h-1v1h1v-1z" />
+    <path d="M88 81h-1v1h1v-1z" />
+    <path d="M86 81h-1v1h1v-1z" />
+    <path d="M84 81h-1v1h1v-1z" />
+    <path d="M82 81h-1v1h1v-1z" />
+    <path d="M80 81h-1v1h1v-1z" />
+    <path d="M78 81h-1v1h1v-1z" />
+    <path d="M76 81h-1v1h1v-1z" />
+    <path d="M74 81h-1v1h1v-1z" />
+    <path d="M72 81h-1v1h1v-1z" />
+    <path d="M70 81h-1v1h1v-1z" />
+    <path d="M68 81h-1v1h1v-1z" />
+    <path d="M93 83h-1v1h1v-1z" />
+    <path d="M91 83h-1v1h1v-1z" />
+    <path d="M89 83h-1v1h1v-1z" />
+    <path d="M87 83h-1v1h1v-1z" />
+    <path d="M85 83h-1v1h1v-1z" />
+    <path d="M83 83h-1v1h1v-1z" />
+    <path d="M81 83h-1v1h1v-1z" />
+    <path d="M79 83h-1v1h1v-1z" />
+    <path d="M77 83h-1v1h1v-1z" />
+    <path d="M75 83h-1v1h1v-1z" />
+    <path d="M73 83h-1v1h1v-1z" />
+    <path d="M71 83h-1v1h1v-1z" />
+    <path d="M69 83h-1v1h1v-1z" />
+    <path d="M67 83h-1v1h1v-1z" />
+    <path d="M92 85h-1v1h1v-1z" />
+    <path d="M90 85h-1v1h1v-1z" />
+    <path d="M88 85h-1v1h1v-1z" />
+    <path d="M86 85h-1v1h1v-1z" />
+    <path d="M84 85h-1v1h1v-1z" />
+    <path d="M82 85h-1v1h1v-1z" />
+    <path d="M80 85h-1v1h1v-1z" />
+    <path d="M78 85h-1v1h1v-1z" />
+    <path d="M76 85h-1v1h1v-1z" />
+    <path d="M74 85h-1v1h1v-1z" />
+    <path d="M72 85h-1v1h1v-1z" />
+    <path d="M70 85h-1v1h1v-1z" />
+    <path d="M68 85h-1v1h1v-1z" />
+    <path d="M66 85h-1v1h1v-1z" />
+    <path d="M91 87h-1v1h1v-1z" />
+    <path d="M89 87h-1v1h1v-1z" />
+    <path d="M87 87h-1v1h1v-1z" />
+    <path d="M85 87h-1v1h1v-1z" />
+    <path d="M83 87h-1v1h1v-1z" />
+    <path d="M81 87h-1v1h1v-1z" />
+    <path d="M79 87h-1v1h1v-1z" />
+    <path d="M77 87h-1v1h1v-1z" />
+    <path d="M75 87h-1v1h1v-1z" />
+    <path d="M73 87h-1v1h1v-1z" />
+    <path d="M71 87h-1v1h1v-1z" />
+    <path d="M69 87h-1v1h1v-1z" />
+    <path d="M67 87h-1v1h1v-1z" />
+    <path d="M65 87h-1v1h1v-1z" />
+    <path d="M90 89h-1v1h1v-1z" />
+    <path d="M88 89h-1v1h1v-1z" />
+    <path d="M86 89h-1v1h1v-1z" />
+    <path d="M84 89h-1v1h1v-1z" />
+    <path d="M82 89h-1v1h1v-1z" />
+    <path d="M80 89h-1v1h1v-1z" />
+    <path d="M78 89h-1v1h1v-1z" />
+    <path d="M76 89h-1v1h1v-1z" />
+    <path d="M74 89h-1v1h1v-1z" />
+    <path d="M72 89h-1v1h1v-1z" />
+    <path d="M70 89h-1v1h1v-1z" />
+    <path d="M68 89h-1v1h1v-1z" />
+    <path d="M66 89h-1v1h1v-1z" />
+    <path d="M64 89h-1v1h1v-1z" />
+    <path d="M87 91h-1v1h1v-1z" />
+    <path d="M89 91h-1v1h1v-1z" />
+    <path d="M86 93h-1v1h1v-1z" />
+    <path d="M88 93h-1v1h1v-1z" />
+    <path d="M83 95h-1v1h1v-1z" />
+    <path d="M85 91h-1v1h1v-1z" />
+    <path d="M83 91h-1v1h1v-1z" />
+    <path d="M81 91h-1v1h1v-1z" />
+    <path d="M79 91h-1v1h1v-1z" />
+    <path d="M77 91h-1v1h1v-1z" />
+    <path d="M75 91h-1v1h1v-1z" />
+    <path d="M73 91h-1v1h1v-1z" />
+    <path d="M71 91h-1v1h1v-1z" />
+    <path d="M69 91h-1v1h1v-1z" />
+    <path d="M67 91h-1v1h1v-1z" />
+    <path d="M65 91h-1v1h1v-1z" />
+    <path d="M63 91h-1v1h1v-1z" />
+    <path d="M61 91h-1v1h1v-1z" />
+    <path d="M84 93h-1v1h1v-1z" />
+    <path d="M82 93h-1v1h1v-1z" />
+    <path d="M80 93h-1v1h1v-1z" />
+    <path d="M78 93h-1v1h1v-1z" />
+    <path d="M76 93h-1v1h1v-1z" />
+    <path d="M74 93h-1v1h1v-1z" />
+    <path d="M72 93h-1v1h1v-1z" />
+    <path d="M70 93h-1v1h1v-1z" />
+    <path d="M68 93h-1v1h1v-1z" />
+    <path d="M66 93h-1v1h1v-1z" />
+    <path d="M64 93h-1v1h1v-1z" />
+    <path d="M62 93h-1v1h1v-1z" />
+    <path d="M60 93h-1v1h1v-1z" />
+    <path d="M81 95h-1v1h1v-1z" />
+    <path d="M79 95h-1v1h1v-1z" />
+    <path d="M77 95h-1v1h1v-1z" />
+    <path d="M75 95h-1v1h1v-1z" />
+    <path d="M73 95h-1v1h1v-1z" />
+    <path d="M71 95h-1v1h1v-1z" />
+    <path d="M69 95h-1v1h1v-1z" />
+    <path d="M67 95h-1v1h1v-1z" />
+    <path d="M65 95h-1v1h1v-1z" />
+    <path d="M63 95h-1v1h1v-1z" />
+    <path d="M61 95h-1v1h1v-1z" />
+    <path d="M59 95h-1v1h1v-1z" />
+    <path d="M57 95h-1v1h1v-1z" />
+    <path d="M55 95h-1v1h1v-1z" />
+    <path d="M63 79h-1v1h1v-1z" />
+    <path d="M61 79h-1v1h1v-1z" />
+    <path d="M59 79h-1v1h1v-1z" />
+    <path d="M57 79h-1v1h1v-1z" />
+    <path d="M55 79h-1v1h1v-1z" />
+    <path d="M53 79h-1v1h1v-1z" />
+    <path d="M51 79h-1v1h1v-1z" />
+    <path d="M49 79h-1v1h1v-1z" />
+    <path d="M47 79h-1v1h1v-1z" />
+    <path d="M45 79h-1v1h1v-1z" />
+    <path d="M43 79h-1v1h1v-1z" />
+    <path d="M41 79h-1v1h1v-1z" />
+    <path d="M39 79h-1v1h1v-1z" />
+    <path d="M37 79h-1v1h1v-1z" />
+    <path d="M62 81h-1v1h1v-1z" />
+    <path d="M60 81h-1v1h1v-1z" />
+    <path d="M58 81h-1v1h1v-1z" />
+    <path d="M56 81h-1v1h1v-1z" />
+    <path d="M54 81h-1v1h1v-1z" />
+    <path d="M52 81h-1v1h1v-1z" />
+    <path d="M50 81h-1v1h1v-1z" />
+    <path d="M48 81h-1v1h1v-1z" />
+    <path d="M46 81h-1v1h1v-1z" />
+    <path d="M44 81h-1v1h1v-1z" />
+    <path d="M42 81h-1v1h1v-1z" />
+    <path d="M40 81h-1v1h1v-1z" />
+    <path d="M38 81h-1v1h1v-1z" />
+    <path d="M36 81h-1v1h1v-1z" />
+    <path d="M63 83h-1v1h1v-1z" />
+    <path d="M61 83h-1v1h1v-1z" />
+    <path d="M59 83h-1v1h1v-1z" />
+    <path d="M57 83h-1v1h1v-1z" />
+    <path d="M55 83h-1v1h1v-1z" />
+    <path d="M53 83h-1v1h1v-1z" />
+    <path d="M51 83h-1v1h1v-1z" />
+    <path d="M49 83h-1v1h1v-1z" />
+    <path d="M47 83h-1v1h1v-1z" />
+    <path d="M45 83h-1v1h1v-1z" />
+    <path d="M43 83h-1v1h1v-1z" />
+    <path d="M41 83h-1v1h1v-1z" />
+    <path d="M39 83h-1v1h1v-1z" />
+    <path d="M37 83h-1v1h1v-1z" />
+    <path d="M64 85h-1v1h1v-1z" />
+    <path d="M62 85h-1v1h1v-1z" />
+    <path d="M60 85h-1v1h1v-1z" />
+    <path d="M58 85h-1v1h1v-1z" />
+    <path d="M56 85h-1v1h1v-1z" />
+    <path d="M54 85h-1v1h1v-1z" />
+    <path d="M52 85h-1v1h1v-1z" />
+    <path d="M50 85h-1v1h1v-1z" />
+    <path d="M48 85h-1v1h1v-1z" />
+    <path d="M46 85h-1v1h1v-1z" />
+    <path d="M44 85h-1v1h1v-1z" />
+    <path d="M42 85h-1v1h1v-1z" />
+    <path d="M40 85h-1v1h1v-1z" />
+    <path d="M38 85h-1v1h1v-1z" />
+  </g>
+  <g fill-rule="evenodd">
+    <path
+      d="M28.037 10.25a12.75 12.75 0 0 0-11.898 8.167L1.442 56.574a6.68 6.68 0 0 0-.184 4.32.75.75 0 0 0 .026.328L9.67 88.364a12.75 12.75 0 0 0 12.182 8.986h57.991a12.75 12.75 0 0 0 12.143-8.862l8.729-27.26-.072-.023a6.68 6.68 0 0 0-.084-4.632L85.861 18.417a12.75 12.75 0 0 0-11.898-8.167H28.037zm70.029 54.33c-1.069.733-2.37 1.17-3.807 1.17H78.405a10.46 10.46 0 0 0-9.149 5.391 14.76 14.76 0 0 1-12.912 7.609H45.151a14.21 14.21 0 0 1-12.593-7.625 10.02 10.02 0 0 0-8.878-5.375H7.741c-1.461 0-2.782-.452-3.861-1.207l7.224 23.379a11.25 11.25 0 0 0 10.749 7.929h57.991a11.25 11.25 0 0 0 10.714-7.819l7.51-23.451zM17.539 18.956a11.25 11.25 0 0 1 10.498-7.206h45.926a11.25 11.25 0 0 1 10.498 7.206l14.697 38.157c1.325 3.439-1.214 7.137-4.899 7.137H78.405a11.96 11.96 0 0 0-10.461 6.164 13.26 13.26 0 0 1-11.6 6.836H45.151a12.71 12.71 0 0 1-11.264-6.82 11.52 11.52 0 0 0-10.207-6.18H7.741c-3.685 0-6.224-3.698-4.899-7.137l14.697-38.157z"
+      fill="#8a8f98"
+    />
+    <path
+      opacity=".6"
+      d="M19.909 18.801a8.75 8.75 0 0 1 8.144-5.551h45.894a8.75 8.75 0 0 1 8.144 5.551L97.09 56.987c.966 2.46-.847 5.121-3.49 5.121H76.406a9.54 9.54 0 0 0-8.499 5.209A13.61 13.61 0 0 1 55.78 74.75h-9.006a13.15 13.15 0 0 1-11.848-7.448 9.17 9.17 0 0 0-8.261-5.194H8.402c-2.643 0-4.457-2.661-3.49-5.121L19.91 18.801zm8.144-4.051a7.25 7.25 0 0 0-6.748 4.6L6.308 57.536a2.25 2.25 0 0 0 2.094 3.072h18.264a10.67 10.67 0 0 1 9.613 6.044 11.65 11.65 0 0 0 10.496 6.598h9.006a12.11 12.11 0 0 0 10.79-6.614 11.04 11.04 0 0 1 9.835-6.028h17.193a2.25 2.25 0 0 0 2.094-3.072L80.696 19.35a7.25 7.25 0 0 0-6.748-4.6H28.054z"
+      fill="#62666D"
+    />
+  </g>
+  <defs>
+    <linearGradient id="B" x1="50.5" y1="65" x2="50.5" y2="96" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#62666D" />
+      <stop offset="1" stop-color="#3C3F44" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>
--- a/plugins/gmail-resources/src/plugin.ts
+++ b/plugins/gmail-resources/src/plugin.ts
@ -34,6 +34,7 @@ export default mergeIds(gmailId, gmail, {
    Reply: '' as IntlString,
    Subject: '' as IntlString,
    Send: '' as IntlString,
+    NewMessage: '' as IntlString,
    NewMessageTo: '' as IntlString,
    Cancel: '' as IntlString,
    SubjectPlaceholder: '' as IntlString,
--- a/plugins/telegram-assets/lang/en.json
+++ b/plugins/telegram-assets/lang/en.json
@ -21,6 +21,7 @@
    "Messages": "Messages",
    "Telegram": "Telegram",
    "TelegramIntegrationDesc": "Use telegram integration",
-    "Status": "Status"
+    "Status": "Status",
+    "YouAnd": "You and"
  }
 }
--- a/plugins/telegram-assets/lang/ru.json
+++ b/plugins/telegram-assets/lang/ru.json
@ -21,6 +21,7 @@
    "Messages": "Сообщения",
    "Telegram": "Telegram",
    "TelegramIntegrationDesc": "Подключить Telegram",
-    "Status": "Статус"
+    "Status": "Статус",
+    "YouAnd": "Вы и"
  }
 }
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@ -16,7 +16,6 @@
 <script lang="ts">
  import attachment from '@anticrm/attachment'
  import { AttachmentRefInput } from '@anticrm/attachment-resources'
-  import { Panel } from '@anticrm/panel'
  import { createEventDispatcher } from 'svelte'
  import contact, { Channel, Contact, EmployeeAccount, formatName } from '@anticrm/contact'
  import { generateId, getCurrentAccount, Ref, SortingOrder, Space, Class } from '@anticrm/core'
@ -24,7 +23,7 @@
  import { createQuery, getClient } from '@anticrm/presentation'
  import setting, { Integration } from '@anticrm/setting'
  import type { NewTelegramMessage, SharedTelegramMessage, TelegramMessage } from '@anticrm/telegram'
-  import { Button, eventToHTMLElement, IconShare, Tooltip, Scroller, showPopup } from '@anticrm/ui'
+  import { Button, eventToHTMLElement, IconShare, Tooltip, Scroller, showPopup, Panel, Icon, Label } from '@anticrm/ui'
  import telegram from '../plugin'
  import Connect from './Connect.svelte'
  import TelegramIcon from './icons/Telegram.svelte'
@ -187,20 +186,26 @@

 {#if object !== undefined}
  <Panel
-    icon={TelegramIcon}
-    title={'Telegram'}
-    withoutActivity
-    {object}
-    isHeader={false}
+    isHeader={true}
    isAside={false}
    on:close={() => {
      dispatch('close')
    }}
  >
-    <svelte:fragment slot="header">
-      You and {formatName(object.name)}
+    <svelte:fragment slot="title">
+      <div class="antiTitle icon-wrapper">
+        <div class="wrapped-icon"><Icon icon={TelegramIcon} size={'medium'} /></div>
+        <div class="title-wrapper">
+          <span class="wrapped-title">Telegram</span>
+          <span class="wrapped-subtitle">
+            <Label label={telegram.string.YouAnd} />
+            <b>{formatName(object.name)}</b>
+          </span>
+        </div>
+      </div>
+      <!-- You and {formatName(object.name)} -->
    </svelte:fragment>
-    <svelte:fragment slot="tools">
+    <svelte:fragment slot="utils">
      {#if integration === undefined}
        <Button
          label={telegram.string.Connect}
@ -257,7 +262,7 @@
          </div>
        </div>
      {:else if integration === undefined || integration.disabled}
-        <div class="flex-center h-18">No integration</div>
+        <div class="flex-center h-18" />
      {:else}
        <AttachmentRefInput
          space={telegram.space.Telegram}
--- a/plugins/telegram-resources/src/components/Message.svelte
+++ b/plugins/telegram-resources/src/components/Message.svelte
@ -132,14 +132,14 @@
    padding: 0.5rem 0.75rem;
    max-width: 66%;
    width: fit-content;
-    background-color: var(--theme-incoming-msg);
+    background-color: var(--incoming-msg);
    border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
    overflow-wrap: anywhere;
    user-select: text;
    cursor: default;

    &.outcoming {
-      background-color: var(--theme-outcoming-msg);
+      background-color: var(--outcoming-msg);
      border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
    }
    .time {
--- a/plugins/telegram-resources/src/components/SharedMessages.svelte
+++ b/plugins/telegram-resources/src/components/SharedMessages.svelte
@ -26,7 +26,7 @@

 <style lang="scss">
  .container {
-    padding: 1.25rem 0 1.5rem;
+    padding: 1rem;
    background-color: var(--theme-bg-accent-color);
    border: 1px solid var(--theme-bg-accent-color);
    border-radius: 0.75rem;
--- a/plugins/telegram-resources/src/plugin.ts
+++ b/plugins/telegram-resources/src/plugin.ts
@ -33,6 +33,7 @@ export default mergeIds(telegramId, telegram, {
    CodeDescr: '' as IntlString,
    Cancel: '' as IntlString,
    Share: '' as IntlString,
-    PublishSelected: '' as IntlString
+    PublishSelected: '' as IntlString,
+    YouAnd: '' as IntlString
  }
 })
--- a/tests/sanity/tests/settings.spec.ts
+++ b/tests/sanity/tests/settings.spec.ts
@ -31,6 +31,7 @@ test.describe('contact tests', () => {
    // Click [placeholder="john\.appleseed\@apple\.com"]
    await page.click('button:has-text("Email")')
    // Fill [placeholder="john\.appleseed\@apple\.com"]
+    await page.click('text=Edit profile John Appleseed LoPlaza >> button')
    await page.fill('[placeholder="john\\.appleseed\\@apple\\.com"]', 'wer@qwe.com')
    // Click text=Apply
    await page.click('button:nth-child(3)')