Updated layout of the Chat header (#5618)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

plugins/chunter-resources/src/components/DirectIcon.svelte

@@ -41,7 +41,7 @@
   let avatarSize = size
 
   $: if (size === 'small') {
-    avatarSize = 'tiny'
+    avatarSize = 'x-small'
   }
 
   function getAccountByPerson (accountById: IdMap<PersonAccount>, person: Person): Account | undefined {

plugins/chunter-resources/src/components/Header.svelte

@@ -72,11 +72,6 @@
       />
       <div class="antiHSpacer x2" />
     {/if}
-    {#if withFilters}
-      <div class="mr-2">
-        <ChannelMessagesFilter bind:selectedFilters={filters} />
-      </div>
-    {/if}
     <slot />
     {#if titleKind === 'breadcrumbs'}
       <Breadcrumbs
@@ -91,7 +86,7 @@
       />
     {:else}
       {#if icon}
-        <div class="ac-header__icon">
+        <div class="ac-header__icon pl-2">
           <Icon {icon} size={'small'} {iconProps} />
         </div>
       {/if}
@@ -108,6 +103,9 @@
     <div class="ac-header__description over-underline" style="flex: 1" title={description}>{description}</div>
   {/if}
 </div>
+{#if withFilters}
+  <ChannelMessagesFilter bind:selectedFilters={filters} />
+{/if}
 {#if canOpen && object}
   <Button
     icon={view.icon.Open}

plugins/chunter-resources/src/components/PinnedMessages.svelte

@@ -13,10 +13,9 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { eventToHTMLElement, Label, ModernButton, showPopup } from '@hcengineering/ui'
+  import { eventToHTMLElement, Label, ModernButton, showPopup, Icon } from '@hcengineering/ui'
   import PinnedMessagesPopup from './PinnedMessagesPopup.svelte'
   import { createQuery } from '@hcengineering/presentation'
-  import { DocNotifyContext } from '@hcengineering/notification'
   import activity, { ActivityMessage } from '@hcengineering/activity'
   import { Class, Doc, Ref } from '@hcengineering/core'
   import view from '@hcengineering/view'
@@ -43,19 +42,9 @@
 </script>
 
 {#if pinnedMessagesCount > 0}
-  <div class="mr-2">
+  <div class="antiHSpacer x2" />
-    <ModernButton
+  <ModernButton size={'extra-small'} on:click={openMessagesPopup}>
-      icon={view.icon.Pin}
+    <Icon icon={view.icon.Pin} size={'x-small'} />
-      size="small"
+    <span class="text-sm"><Label label={chunter.string.PinnedCount} params={{ count: pinnedMessagesCount }} /></span>
-      label={chunter.string.PinnedCount}
+  </ModernButton>
-      labelParams={{ count: pinnedMessagesCount }}
-      on:click={openMessagesPopup}
-    />
-  </div>
 {/if}
-
-<style lang="scss">
-  .container {
-    padding-left: 2.5rem;
-  }
-</style>

plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte

@@ -70,8 +70,8 @@
   <Header icon={activity.icon.Bookmark} intlLabel={chunter.string.Saved} titleKind="breadcrumbs" />
 </div>
 
-<div class="body h-full w-full">
+<div class="body h-full w-full clear-mins">
-  <Scroller padding="0.75rem 0.5rem">
+  <Scroller padding={'.75rem .5rem'} bottomPadding={'.75rem'}>
     {#if savedMessages.length > 0 || savedAttachments.length > 0}
       {#each savedMessages as message}
         {#if message.$lookup?.attachedTo}