From 0d1139f38531d9d5f39a3e34d9eb84ea8366099b Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 31 May 2023 09:41:21 +0300
Subject: [PATCH] UBER-307,-308,-310,-311,-312: fixed activity in Inbox (#3298)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_colors.scss            |  19 ++++
 packages/theme/styles/_layouts.scss           |   1 +
 packages/theme/styles/common.scss             |   1 +
 packages/theme/styles/components.scss         |  96 +++++++++++++++++
 packages/ui/src/components/Tabs.svelte        |   3 +-
 packages/ui/src/components/TabsControl.svelte |  23 ++--
 .../src/components/ContactPresenter.svelte    |   9 +-
 .../src/components/ContactRefPresenter.svelte |   7 +-
 .../EmployeeAccountPresenter.svelte           |  11 +-
 .../EmployeeAccountRefPresenter.svelte        |   5 +-
 .../src/components/MemberPresenter.svelte     |   5 +-
 .../components/OrganizationPresenter.svelte   |   8 +-
 .../src/components/PersonRefPresenter.svelte  |   2 +
 .../src/components/DocumentPresenter.svelte   |   6 +-
 .../src/components/LeadPresenter.svelte       |   6 +-
 .../src/components/Activity.svelte            |   8 +-
 .../src/components/Inbox.svelte               |  11 +-
 .../src/components/NotificationView.svelte    | 101 +++---------------
 .../src/components/People.svelte              |  13 +--
 .../components/PeopleNotificationsView.svelte |  76 +++++++------
 .../src/components/TxView.svelte              |   8 +-
 .../components/ApplicationPresenter.svelte    |   7 +-
 .../NotificationApplicantPresenter.svelte     |  14 ++-
 .../src/components/VacancyPresenter.svelte    |  14 ++-
 .../components/review/ReviewPresenter.svelte  |   8 +-
 .../components/ComponentPresenter.svelte      |  10 +-
 .../issues/NotificationIssuePresenter.svelte  |  12 +--
 .../milestones/MilestonePresenter.svelte      |   5 +-
 .../projects/ProjectPresenter.svelte          |   5 +-
 .../src/components/ObjectPresenter.svelte     |   2 +
 30 files changed, 284 insertions(+), 212 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 2f8358f9c96..de3b67da5bb 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -142,6 +142,15 @@
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
 
+  --theme-inbox-notify: #F47758;
+  --theme-inbox-people-notify: #2B5190;
+  --theme-inbox-activity-bgcolor: #1A1A28;
+  --theme-inbox-activitymsg-bgcolor: rgba(255, 255, 255, .03);
+  --theme-inbox-activitymsg-divider: rgba(255, 255, 255, .1);
+  --theme-inbox-activitymsg-border: rgba(255, 255, 255, .03);
+  --theme-inbox-counter-bgcolor: rgba(255, 255, 255, .06);
+  --theme-inbox-people-counter-bgcolor: rgba(43, 81, 144, .1);
+
   --theme-toggle-sw-color: #fff;
   --theme-toggle-on-sw-color: #fff;
   --theme-toggle-bg-color: rgba(120, 120, 128, 0.32);
@@ -313,6 +322,16 @@
   --theme-calendar-today-bgcolor: rgba(43, 81, 144, .1);
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
+
+  --theme-inbox-notify: #F47758;
+  --theme-inbox-people-notify: #2B5190;
+  --theme-inbox-activity-bgcolor: #fff;
+  --theme-inbox-activitymsg-bgcolor: #F2F2F2;
+  --theme-inbox-activitymsg-divider: rgba(0, 0, 0, .1);
+  --theme-inbox-activitymsg-border: rgba(0, 0, 0, .03);
+  --theme-inbox-counter-bgcolor: rgba(0, 0, 0, .06);
+  --theme-inbox-people-counter-bgcolor: rgba(43, 81, 144, .1);
+
   --theme-toggle-sw-color: #fff;
   --theme-toggle-on-sw-color: #fff;
   --theme-toggle-bg-color: rgba(120, 120, 128, 0.32);
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 36720588a7b..ac9b3faf769 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -648,6 +648,7 @@ input.search {
 .min-w-8 { min-width: 2rem; }
 .min-w-9 { min-width: 2.25rem; }
 .min-w-80 { min-width: 20rem; }
+.min-w-100 { min-width: 25rem; }
 .min-w-168 { min-width: 42rem; }
 .min-w-min { min-width: min-content; }
 .min-h-0 { min-height: 0; }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 33e6d5f3f12..e41b5468c25 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -48,6 +48,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
   overflow: hidden;
   
   &.filled { background-color: var(--theme-bg-color); }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index f196767e515..b77fe3e40be 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -765,6 +765,102 @@
   }
 }
 
+/* Inbox */
+.inbox-activity {
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  background-color: var(--theme-inbox-activity-bgcolor);
+
+  &__container {
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    min-width: 0;
+    min-height: 0;
+    font-size: .8125rem;
+    border: 1px solid transparent;
+    outline: none;
+
+    &:not(.selected) {
+      margin: 0 1.75rem;
+      cursor: pointer;
+    }
+
+    .crop-presenter,
+    .inline-presenter { margin: -.3125rem 0; }
+
+    .inbox-activity__content {
+      display: flex;
+      flex-direction: column;
+      // flex-grow: 1;
+      color: var(--theme-caption-color);
+
+      &.shrink { padding: .75rem 0; }
+      &:not(.shrink) { padding: 1rem 0; }
+      &.read {
+        opacity: .6;
+
+        .time { color: var(--theme-content-color); }
+      }
+    }
+    
+    .time { color: var(--theme-halfcontent-color); }
+    .notify {
+      position: absolute;
+      top: 1rem;
+      left: -1.125rem;
+      height: 0.5rem;
+      width: 0.5rem;
+      background-color: var(--theme-inbox-notify);
+      border-radius: 50%;
+
+      &.people { background-color: var(--theme-inbox-counter-bgcolor); }
+    }
+    .counter {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 1.375rem;
+      width: 1.375rem;
+      color: var(--theme-dark-color);
+      background-color: var(--theme-inbox-counter-bgcolor);
+      border-radius: 50%;
+
+      &.float {
+        position: absolute;
+        top: .5625rem;
+        right: 0;
+      }
+      &.people {
+        color: var(--theme-inbox-people-notify);
+        background-color: var(--theme-inbox-counter-bgcolor);
+      }
+    }
+    .arrow {
+      position: absolute;
+      top: 1.125rem;
+      right: 0;
+    }
+
+    &:last-child:not(.selected) { border-bottom: 1px solid var(--theme-inbox-activitymsg-divider); }
+    &:not(.selected) + &:not(.selected) { border-top-color: var(--theme-inbox-activitymsg-divider); }
+
+    &.selected {
+      margin: 0 0.5rem;
+      background-color: var(--theme-inbox-activitymsg-bgcolor);
+      border: 1px solid var(--theme-inbox-activitymsg-border);
+      border-radius: 0.25rem;
+
+      .notify { left: .125rem; }
+      .inbox-activity__content { padding: 1rem 1.25rem; }
+      .counter.float { right: 1.25rem; }
+      .arrow { right: 1.25rem; }
+    }
+  }
+}
+
 /* ListView - global style */
 .list-container .category-container .categoryHeader.subLevel.closed {
   border-radius: 0 0 0.25rem 0.25rem;
diff --git a/packages/ui/src/components/Tabs.svelte b/packages/ui/src/components/Tabs.svelte
index 9f5017f0dad..892b221fffc 100644
--- a/packages/ui/src/components/Tabs.svelte
+++ b/packages/ui/src/components/Tabs.svelte
@@ -20,10 +20,11 @@
   export let model: TabModel
   export let selected = 0
   export let withPadding: boolean = false
+  export let noMargin: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 </script>
 
-<TabsControl {model} {withPadding} {size} bind:selected>
+<TabsControl {model} {withPadding} {noMargin} {size} bind:selected>
   <svelte:fragment slot="rightButtons">
     {#if $$slots.rightButtons}
       <div class="flex">
diff --git a/packages/ui/src/components/TabsControl.svelte b/packages/ui/src/components/TabsControl.svelte
index 161247a89d4..5f45d636d55 100644
--- a/packages/ui/src/components/TabsControl.svelte
+++ b/packages/ui/src/components/TabsControl.svelte
@@ -19,10 +19,17 @@
   export let model: TabBase[]
   export let selected = 0
   export let withPadding: boolean = false
+  export let noMargin: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 </script>
 
-<div class="flex-stretch container" class:small={size === 'small'} class:pr-4={withPadding} class:pl-4={withPadding}>
+<div
+  class="flex-stretch tabs-container"
+  class:small={size === 'small'}
+  class:pr-4={withPadding}
+  class:pl-4={withPadding}
+  class:noMargin
+>
   {#each model as tab, i}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
@@ -47,15 +54,17 @@
 <slot name="content" {selected} />
 
 <style lang="scss">
-  .container {
+  .tabs-container {
     flex-shrink: 0;
     flex-wrap: nowrap;
-    margin-bottom: 0.5rem;
     width: 100%;
     height: 4.5rem;
     align-items: center;
-    border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
+    &:not(.noMargin) {
+      margin-bottom: 0.5rem;
+    }
     &.small {
       height: 3.25rem;
 
@@ -66,18 +75,18 @@
 
     .tab {
       height: 4.5rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
       cursor: pointer;
       user-select: none;
 
       &.selected {
         border-top: 0.125rem solid transparent;
         border-bottom: 0.125rem solid var(--theme-tablist-plain-color);
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         cursor: default;
       }
       &:not(.selected):hover {
-        color: var(--accent-color);
+        color: var(--theme-content-color);
       }
     }
     .tab + .tab {
diff --git a/plugins/contact-resources/src/components/ContactPresenter.svelte b/plugins/contact-resources/src/components/ContactPresenter.svelte
index faa2c007de0..8babf70a31f 100644
--- a/plugins/contact-resources/src/components/ContactPresenter.svelte
+++ b/plugins/contact-resources/src/components/ContactPresenter.svelte
@@ -24,7 +24,8 @@
 
   export let value: Contact
   export let inline: boolean = false
-  export let disabled = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
   export let maxWidth = ''
 
   function isPerson (value: Contact): boolean {
@@ -42,9 +43,9 @@
 </script>
 
 {#if isEmployee(value)}
-  <EmployeePresenter {disabled} value={toEmployee(value)} {inline} />
+  <EmployeePresenter {disabled} value={toEmployee(value)} {inline} {accent} />
 {:else if isPerson(value)}
-  <PersonPresenter {disabled} {value} {inline} />
+  <PersonPresenter {disabled} {value} {inline} {accent} />
 {:else}
-  <OrganizationPresenter value={toOrg(value)} {inline} {maxWidth} />
+  <OrganizationPresenter value={toOrg(value)} {inline} {accent} {maxWidth} />
 {/if}
diff --git a/plugins/contact-resources/src/components/ContactRefPresenter.svelte b/plugins/contact-resources/src/components/ContactRefPresenter.svelte
index 6ce078f9672..1d8a4177478 100644
--- a/plugins/contact-resources/src/components/ContactRefPresenter.svelte
+++ b/plugins/contact-resources/src/components/ContactRefPresenter.svelte
@@ -21,9 +21,10 @@
   import ContactPresenter from './ContactPresenter.svelte'
 
   export let value: Ref<Contact>
-  export let disabled = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
   export let maxWidth = ''
-  export let inline = false
+  export let inline: boolean = false
 
   let doc: Contact | undefined
   const query = createQuery()
@@ -31,5 +32,5 @@
 </script>
 
 {#if doc}
-  <ContactPresenter value={doc} {disabled} {maxWidth} {inline} />
+  <ContactPresenter value={doc} {disabled} {maxWidth} {inline} {accent} />
 {/if}
diff --git a/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte b/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
index e7e158a07e1..916ecf5bb23 100644
--- a/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
@@ -24,8 +24,9 @@
 
   export let value: Account
   export let avatarSize: IconSize = 'x-small'
-  export let disabled = false
-  export let inline = false
+  export let disabled: boolean = false
+  export let inline: boolean = false
+  export let accent: boolean = false
 
   $: employee = $employeeByIdStore.get((value as EmployeeAccount).employee)
 
@@ -35,11 +36,13 @@
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   {#if employee}
-    <EmployeePresenter value={employee} {disabled} {inline} {avatarSize} />
+    <EmployeePresenter value={employee} {disabled} {inline} {accent} {avatarSize} />
   {:else}
     <div class="flex-row-center">
       <Avatar size={avatarSize} />
-      <span class="overflow-label user" use:tooltip={{ label: valueLabel }}><Label label={valueLabel} /></span>
+      <span class="overflow-label user" class:fs-bold={accent} use:tooltip={{ label: valueLabel }}>
+        <Label label={valueLabel} />
+      </span>
     </div>
   {/if}
 {/if}
diff --git a/plugins/contact-resources/src/components/EmployeeAccountRefPresenter.svelte b/plugins/contact-resources/src/components/EmployeeAccountRefPresenter.svelte
index db9c3f20a87..ee14bc74788 100644
--- a/plugins/contact-resources/src/components/EmployeeAccountRefPresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeAccountRefPresenter.svelte
@@ -22,8 +22,9 @@
 
   export let value: Ref<EmployeeAccount>
   export let avatarSize: IconSize = 'x-small'
-  export let disabled = false
-  export let inline = false
+  export let disabled: boolean = false
+  export let inline: boolean = false
+  export let accent: boolean = false
 
   $: account = $employeeAccountByIdStore.get(value)
 </script>
diff --git a/plugins/contact-resources/src/components/MemberPresenter.svelte b/plugins/contact-resources/src/components/MemberPresenter.svelte
index 76ba035f642..c7404e5aafe 100644
--- a/plugins/contact-resources/src/components/MemberPresenter.svelte
+++ b/plugins/contact-resources/src/components/MemberPresenter.svelte
@@ -22,14 +22,15 @@
   export let value: Member
   export let disabled: boolean = false
   export let inline: boolean = false
+  export let accent: boolean = false
 
   const contactRef = getClient().findOne(contact.class.Contact, { _id: value.contact })
 </script>
 
-<DocNavLink object={value} {inline} {disabled} noUnderline={disabled}>
+<DocNavLink object={value} {inline} {disabled} {accent} noUnderline={disabled}>
   {#await contactRef then ct}
     {#if ct}
-      <ContactPresenter disabled={true} value={ct} {inline} />
+      <ContactPresenter disabled={true} value={ct} {inline} {accent} />
     {/if}
   {/await}
 </DocNavLink>
diff --git a/plugins/contact-resources/src/components/OrganizationPresenter.svelte b/plugins/contact-resources/src/components/OrganizationPresenter.svelte
index 5495cda4827..51e622ff723 100644
--- a/plugins/contact-resources/src/components/OrganizationPresenter.svelte
+++ b/plugins/contact-resources/src/components/OrganizationPresenter.svelte
@@ -22,13 +22,15 @@
 
   export let value: Organization
   export let inline: boolean = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
   export let maxWidth = ''
 </script>
 
 {#if value}
-  <DocNavLink {inline} object={value}>
+  <DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
     <div
-      class="flex-presenter overflow-label"
+      class="flex-presenter"
       style:max-width={maxWidth}
       class:inline-presenter={inline}
       use:tooltip={{ label: getEmbeddedLabel(value.name) }}
@@ -36,7 +38,7 @@
       {#if !inline}
         <div class="icon circle"><Company size={'small'} /></div>
       {/if}
-      <span class="label">{value.name}</span>
+      <span class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
     </div>
   </DocNavLink>
 {/if}
diff --git a/plugins/contact-resources/src/components/PersonRefPresenter.svelte b/plugins/contact-resources/src/components/PersonRefPresenter.svelte
index 0fc39ccce01..82a43daad67 100644
--- a/plugins/contact-resources/src/components/PersonRefPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonRefPresenter.svelte
@@ -25,6 +25,7 @@
   export let inline = false
   export let enlargedText = false
   export let disabled = false
+  export let accent: boolean = false
   export let shouldShowAvatar = true
   export let shouldShowName = true
   export let shouldShowPlaceholder = false
@@ -57,4 +58,5 @@
   {enlargedText}
   {disabled}
   {inline}
+  {accent}
 />
diff --git a/plugins/document-resources/src/components/DocumentPresenter.svelte b/plugins/document-resources/src/components/DocumentPresenter.svelte
index 56da9cb616c..16376aa9f1b 100644
--- a/plugins/document-resources/src/components/DocumentPresenter.svelte
+++ b/plugins/document-resources/src/components/DocumentPresenter.svelte
@@ -21,7 +21,9 @@
   import document from '../plugin'
 
   export let value: WithLookup<Document>
-  export let inline = false
+  export let inline: boolean = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
 </script>
 
 {#if value}
@@ -35,6 +37,6 @@
         <Icon icon={document.icon.Document} size={'small'} />
       </div>
     {/if}
-    <span class="label">{value.name}-{value.version}</span>
+    <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span>
   </a>
 {/if}
diff --git a/plugins/lead-resources/src/components/LeadPresenter.svelte b/plugins/lead-resources/src/components/LeadPresenter.svelte
index 134e6e43693..bd262a73a03 100644
--- a/plugins/lead-resources/src/components/LeadPresenter.svelte
+++ b/plugins/lead-resources/src/components/LeadPresenter.svelte
@@ -21,17 +21,19 @@
 
   export let value: Lead
   export let inline: boolean = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
 </script>
 
 {#if value}
-  <DocNavLink object={value} {inline}>
+  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
     <div class="flex-presenter" class:inline-presenter={inline}>
       {#if !inline}
         <div class="icon">
           <Icon icon={lead.icon.Lead} size={'small'} />
         </div>
       {/if}
-      <span class="label nowrap">LEAD-{value.number}</span>
+      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>LEAD-{value.number}</span>
     </div>
   </DocNavLink>
 {/if}
diff --git a/plugins/notification-resources/src/components/Activity.svelte b/plugins/notification-resources/src/components/Activity.svelte
index c14591537ba..cf7cec1fcd8 100644
--- a/plugins/notification-resources/src/components/Activity.svelte
+++ b/plugins/notification-resources/src/components/Activity.svelte
@@ -118,7 +118,7 @@
     mode: 'browser'
   }}
 />
-<div class="clear-mins container">
+<div class="inbox-activity">
   <Scroller>
     {#if loading}
       <Loading />
@@ -136,9 +136,3 @@
     {/if}
   </Scroller>
 </div>
-
-<style lang="scss">
-  .container {
-    margin-top: -0.5rem;
-  }
-</style>
diff --git a/plugins/notification-resources/src/components/Inbox.svelte b/plugins/notification-resources/src/components/Inbox.svelte
index adeae658325..c8e320a8624 100644
--- a/plugins/notification-resources/src/components/Inbox.svelte
+++ b/plugins/notification-resources/src/components/Inbox.svelte
@@ -82,9 +82,9 @@
   let selectedTab = 0
 </script>
 
-<div class="flex h-full">
+<div class="flex-row-top h-full">
   {#if visibileNav}
-    <div class="antiPanel-component border-right filled indent aside inbox">
+    <div class="antiPanel-component border-right indent aside min-w-100">
       {#if selectedEmployee === undefined}
         <Tabs
           bind:selected={selectedTab}
@@ -94,6 +94,7 @@
             selectedEmployee = e.detail
           }}
           withPadding
+          noMargin
           size="small"
         >
           <svelte:fragment slot="rightButtons">
@@ -118,9 +119,3 @@
     {/if}
   </div>
 </div>
-
-<style lang="scss">
-  .inbox {
-    min-width: 20rem;
-  }
-</style>
diff --git a/plugins/notification-resources/src/components/NotificationView.svelte b/plugins/notification-resources/src/components/NotificationView.svelte
index 8827347f806..b67fc42568d 100644
--- a/plugins/notification-resources/src/components/NotificationView.svelte
+++ b/plugins/notification-resources/src/components/NotificationView.svelte
@@ -67,97 +67,30 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if doc}
-  <div class="container cursor-pointer" class:selected>
-    <div class="notify" class:hidden={newTxes === 0} />
+  <div class="inbox-activity__container" class:selected>
+    {#if newTxes > 0 && !selected}<div class="notify" />{/if}
     <div
-      class="clear-mins content bottom-divider"
+      class="inbox-activity__content clear-mins"
       class:read={newTxes === 0}
       on:contextmenu|preventDefault={showMenu}
       on:click
     >
-      <div class="w-full">
-        <div class="flex-between">
-          {#if presenter}
-            <svelte:component this={presenter} value={doc} inline />
-          {/if}
-          {#if newTxes > 0}
-            <div class="counter">
-              {newTxes}
-            </div>
-          {/if}
-        </div>
-        <div class="flex-between mt-2">
-          {#if tx}
-            <TxView {tx} {viewlets} objectId={value.attachedTo} />
-          {/if}
-          <div class="time">
-            <TimeSince value={tx?.modifiedOn} />
-          </div>
+      <div class="flex-row-center flex-no-shrink mr-8">
+        {#if presenter}
+          <svelte:component this={presenter} value={doc} inline accent />
+        {/if}
+        {#if newTxes > 0 && !selected}
+          <div class="counter float">{newTxes}</div>
+        {/if}
+      </div>
+      <div class="flex-between flex-baseline mt-3">
+        {#if tx}
+          <TxView {tx} {viewlets} objectId={value.attachedTo} />
+        {/if}
+        <div class="time">
+          <TimeSince value={tx?.modifiedOn} />
         </div>
       </div>
     </div>
   </div>
 {/if}
-
-<style lang="scss">
-  .time {
-    align-self: flex-end;
-    margin-bottom: 0.25rem;
-  }
-
-  .container {
-    margin-right: 0.5rem;
-    margin-left: 0.5rem;
-    display: flex;
-    border-radius: 0.25rem;
-    flex-grow: 1;
-
-    &:hover {
-      background-color: var(--highlight-hover);
-    }
-    &.selected {
-      background-color: var(--highlight-select);
-
-      &:hover {
-        background-color: var(--highlight-select-hover);
-      }
-    }
-
-    .content {
-      margin-right: 0.5rem;
-      display: flex;
-      flex-grow: 1;
-      padding: 0.5rem 0;
-      color: var(--theme-caption-color);
-
-      &.read {
-        opacity: 0.6;
-      }
-    }
-  }
-
-  .notify {
-    height: 0.5rem;
-    width: 0.5rem;
-    min-width: 0.5rem;
-    margin-top: 0.75rem;
-    margin-right: 0.5rem;
-    background-color: #2b5190;
-    border-radius: 50%;
-    &.hidden {
-      opacity: 0;
-    }
-  }
-
-  .counter {
-    display: flex;
-    align-self: flex-start;
-    align-items: center;
-    justify-content: center;
-    height: 1.25rem;
-    width: 1.25rem;
-    color: #2b5190;
-    background-color: var(--theme-calendar-today-bgcolor);
-    border-radius: 50%;
-  }
-</style>
diff --git a/plugins/notification-resources/src/components/People.svelte b/plugins/notification-resources/src/components/People.svelte
index e06d240025f..57c1127cf7e 100644
--- a/plugins/notification-resources/src/components/People.svelte
+++ b/plugins/notification-resources/src/components/People.svelte
@@ -153,8 +153,8 @@
   }
 </script>
 
-<div class="clear-mins">
-  <Scroller>
+<div class="inbox-activity">
+  <Scroller noStretch>
     {#if loading}
       <Loading />
     {:else}
@@ -175,12 +175,3 @@
     {/if}
   </Scroller>
 </div>
-<!-- 
-<style lang="scss">
-  .container:focus-visible {
-    outline: none;
-  }
-  .container:focus {
-    border: 1px solid red;
-  }
-</style> -->
diff --git a/plugins/notification-resources/src/components/PeopleNotificationsView.svelte b/plugins/notification-resources/src/components/PeopleNotificationsView.svelte
index 6551d38146a..d0ee90dc43a 100644
--- a/plugins/notification-resources/src/components/PeopleNotificationsView.svelte
+++ b/plugins/notification-resources/src/components/PeopleNotificationsView.svelte
@@ -76,60 +76,56 @@
 
 {#if doc}
   <div
-    class="container cursor-pointer"
+    class="inbox-activity__container"
     on:keydown
     class:selected
     tabindex="-1"
     bind:this={div}
     on:click={() => dispatch('open', value._id)}
   >
-    <div class="notify" class:hidden={newTxes === 0} />
+    {#if newTxes > 0 && !selected}<div class="notify people" />{/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="clear-mins content bottom-divider" class:read={newTxes === 0}>
-      <div class="w-full">
-        <div class="flex-between mb-2">
-          <div class="flex-row-center flex-gap-2">
-            <Avatar avatar={employee?.avatar} size="small" />
-            {#if employee}
-              <span class="font-medium">{getName(employee)}</span>
-            {:else}
-              <span class="font-medium"><Label label={core.string.System} /></span>
-            {/if}
-            {#if newTxes > 0}
-              <div class="counter">
-                {newTxes}
-              </div>
-            {/if}
+    <div class="inbox-activity__content shrink clear-mins" class:read={newTxes === 0}>
+      <div class="flex-row-center gap-2">
+        <Avatar avatar={employee?.avatar} size="small" />
+        {#if employee}
+          <span class="font-medium">{getName(employee)}</span>
+        {:else}
+          <span class="font-medium"><Label label={core.string.System} /></span>
+        {/if}
+        {#if newTxes > 0}
+          <div class="counter people">
+            {newTxes}
           </div>
-          <div>
-            <ActionIcon
-              icon={ArrowRight}
-              size="medium"
-              action={() => {
-                dispatch('open', value._id)
-              }}
-            />
-          </div>
-        </div>
-        <div>
-          {#if presenter}
-            <svelte:component this={presenter} value={doc} inline />
-          {/if}
+        {/if}
+        <div class="arrow">
+          <ActionIcon
+            icon={ArrowRight}
+            size="medium"
+            action={() => {
+              dispatch('open', value._id)
+            }}
+          />
         </div>
-        <div class="flex-between mt-2">
-          {#if tx && firstItem}
-            <TxView {tx} {viewlets} objectId={firstItem.attachedTo} />
-          {/if}
-          <div class="time">
-            <TimeSince value={tx?.modifiedOn} />
-          </div>
+      </div>
+      <div class="clear-mins flex-no-shrink mt-4">
+        {#if presenter}
+          <svelte:component this={presenter} value={doc} inline />
+        {/if}
+      </div>
+      <div class="flex-between flex-baseline mt-3">
+        {#if tx && firstItem}
+          <TxView {tx} {viewlets} objectId={firstItem.attachedTo} />
+        {/if}
+        <div class="time">
+          <TimeSince value={tx?.modifiedOn} />
         </div>
       </div>
     </div>
   </div>
 {/if}
 
-<style lang="scss">
+<!-- <style lang="scss">
   .time {
     align-self: flex-end;
     margin-bottom: 0.25rem;
@@ -192,4 +188,4 @@
     background-color: var(--theme-calendar-today-bgcolor);
     border-radius: 50%;
   }
-</style>
+</style> -->
diff --git a/plugins/notification-resources/src/components/TxView.svelte b/plugins/notification-resources/src/components/TxView.svelte
index 3acb6c2afb3..4f7f2d96cc3 100644
--- a/plugins/notification-resources/src/components/TxView.svelte
+++ b/plugins/notification-resources/src/components/TxView.svelte
@@ -188,9 +188,9 @@
                   {#if !hasMessageType}
                     <span class="strong">
                       {#if value.isObjectSet}
-                        <ObjectPresenter value={value.set} inline />
+                        <ObjectPresenter value={value.set} inline accent />
                       {:else}
-                        <svelte:component this={m.presenter} value={value.set} inline />
+                        <svelte:component this={m.presenter} value={value.set} inline accent />
                       {/if}
                     </span>
                   {/if}
@@ -211,9 +211,9 @@
                   {#if !hasMessageType}
                     <div class="strong">
                       {#if value.isObjectSet}
-                        <ObjectPresenter value={value.set} inline />
+                        <ObjectPresenter value={value.set} inline accent />
                       {:else}
-                        <svelte:component this={m.presenter} value={value.set} inline />
+                        <svelte:component this={m.presenter} value={value.set} inline accent />
                       {/if}
                     </div>
                   {/if}
diff --git a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte
index 35ff0b37401..02ac62a4c8b 100644
--- a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte
@@ -22,21 +22,22 @@
 
   export let value: Applicant
   export let inline: boolean = false
-  export let disabled = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
 
   const client = getClient()
   const shortLabel = value && client.getHierarchy().getClass(value._class).shortLabel
 </script>
 
 {#if value && shortLabel}
-  <DocNavLink object={value} {inline} {disabled}>
+  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
     <div class="flex-presenter" class:inline-presenter={inline}>
       {#if !inline}
         <div class="icon">
           <Icon icon={recruit.icon.Application} size={'small'} />
         </div>
       {/if}
-      <span class="label nowrap">
+      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
         {#if shortLabel}{shortLabel}-{/if}{value.number}
       </span>
     </div>
diff --git a/plugins/recruit-resources/src/components/NotificationApplicantPresenter.svelte b/plugins/recruit-resources/src/components/NotificationApplicantPresenter.svelte
index 823f44349e8..233164cf27e 100644
--- a/plugins/recruit-resources/src/components/NotificationApplicantPresenter.svelte
+++ b/plugins/recruit-resources/src/components/NotificationApplicantPresenter.svelte
@@ -35,17 +35,15 @@
 </script>
 
 {#if value}
-  <div class="w-full clear-mins">
-    <div class="flex-presenter clear-mins inline-presenter mb-1">
-      <span class="font-medium mr-2">{title}</span>
+  <div class="flex-col">
+    <div class="flex-row-center crop-presenter">
+      <span class="font-medium mr-2 whitespace-nowrap clear-mins">{title}</span>
       <span class="overflow-label">
         {currentVacancy?.name}
       </span>
     </div>
-    <div>
-      <span class="overflow-label">
-        {candidate ? getName(candidate) : ''}
-      </span>
-    </div>
+    <span class="overflow-label mt-10px">
+      {candidate ? getName(candidate) : ''}
+    </span>
   </div>
 {/if}
diff --git a/plugins/recruit-resources/src/components/VacancyPresenter.svelte b/plugins/recruit-resources/src/components/VacancyPresenter.svelte
index 1eddc2fb2f5..752bc3d6133 100644
--- a/plugins/recruit-resources/src/components/VacancyPresenter.svelte
+++ b/plugins/recruit-resources/src/components/VacancyPresenter.svelte
@@ -24,7 +24,8 @@
 
   export let value: Vacancy
   export let inline: boolean = false
-  export let disabled = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
 
   const dispatch = createEventDispatcher()
   $: accentColor = getPlatformAvatarColorForTextDef(value.name, $themeStore.dark)
@@ -36,12 +37,19 @@
 </script>
 
 {#if value}
-  <DocNavLink {disabled} object={value} {inline} noUnderline={disabled} component={recruit.component.EditVacancy}>
+  <DocNavLink
+    {disabled}
+    object={value}
+    {inline}
+    {accent}
+    noUnderline={disabled}
+    component={recruit.component.EditVacancy}
+  >
     <div class="flex-presenter" class:inline-presenter={inline} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
       {#if !inline}
         <div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
       {/if}
-      <span class="label nowrap" class:no-underline={disabled}>{value.name}</span>
+      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
     </div>
   </DocNavLink>
 {/if}
diff --git a/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte b/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte
index 80f8d42f619..1b283ea9d61 100644
--- a/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte
+++ b/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte
@@ -22,6 +22,8 @@
 
   export let value: Review
   export let inline: boolean = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
 
   const client = getClient()
 
@@ -29,12 +31,14 @@
 </script>
 
 {#if value && label}
-  <DocNavLink object={value} {inline}>
+  <DocNavLink object={value} {inline} {disabled} {accent} noUnderline={disabled}>
     <div class="flex-presenter" class:inline-presenter={inline}>
       <div class="icon">
         <Icon icon={recruit.icon.Review} size={'small'} />
       </div>
-      <span class="label nowrap">{label}-{value.number}</span>
+      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
+        {label}-{value.number}
+      </span>
     </div>
   </DocNavLink>
 {/if}
diff --git a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
index f8e9ba735b5..475e36e5e65 100644
--- a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
@@ -25,19 +25,25 @@
   export let onClick: (() => void) | undefined = undefined
   export let disabled = false
   export let inline: boolean = false
+  export let accent: boolean = false
   export let noUnderline = false
   export let kind: 'list' | undefined = undefined
 </script>
 
 {#if value}
-  <DocNavLink object={value} {onClick} {disabled} {noUnderline} {inline} component={view.component.EditDoc}>
+  <DocNavLink object={value} {onClick} {disabled} {noUnderline} {inline} {accent} component={view.component.EditDoc}>
     <span class="flex-presenter" class:inline-presenter={inline} class:list={kind === 'list'}>
       {#if !inline && shouldShowAvatar}
         <div class="icon" use:tooltip={{ label: tracker.string.Component }}>
           <Icon icon={tracker.icon.Component} size={'small'} />
         </div>
       {/if}
-      <span title={value.label} class="label nowrap" class:no-underline={disabled || noUnderline}>
+      <span
+        title={value.label}
+        class="label nowrap"
+        class:no-underline={disabled || noUnderline}
+        class:fs-bold={accent}
+      >
         {value.label}
       </span>
     </span>
diff --git a/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte b/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
index 31988fb132e..daaa70ec856 100644
--- a/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
@@ -28,15 +28,15 @@
 </script>
 
 {#if value}
-  <div class="w-full clear-mins">
-    <div class="flex-presenter overflow-label clear-mins inline-presenter mb-1">
-      <span class="font-medium mr-2">{title}</span>
-      <span>
+  <div class="flex-col">
+    <div class="flex-row-center crop-presenter">
+      <span class="font-medium mr-2 whitespace-nowrap clear-mins">{title}</span>
+      <span class="overflow-label">
         {currentProject?.name}
       </span>
     </div>
-    <div class="overflow-label">
+    <span class="overflow-label mt-10px">
       {value.title}
-    </div>
+    </span>
   </div>
 {/if}
diff --git a/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte b/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte
index 6e40387413b..e9742f2a87e 100644
--- a/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte
@@ -24,6 +24,7 @@
   export let shouldShowAvatar = true
   export let disabled = false
   export let inline = false
+  export let accent: boolean = false
   export let onClick: (() => void) | undefined = undefined
 
   const dispatch = createEventDispatcher()
@@ -38,14 +39,14 @@
   })
 </script>
 
-<DocNavLink object={value} {disabled} {inline} {onClick}>
+<DocNavLink object={value} {disabled} {inline} {accent} noUnderline={disabled} {onClick}>
   <div class="flex-presenter" class:inline-presenter={inline}>
     {#if !inline && shouldShowAvatar}
       <div class="icon">
         <Icon icon={tracker.icon.Milestone} size="small" />
       </div>
     {/if}
-    <span title={value.label} class="overflow-label label">
+    <span title={value.label} class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>
       {value.label}
     </span>
   </div>
diff --git a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
index 2b9ac6503eb..9ef8053095d 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
@@ -18,7 +18,8 @@
   import tracker from '../../plugin'
 
   export let value: Project
-  export let inline = false
+  export let inline: boolean = false
+  export let accent: boolean = false
 </script>
 
 <div class="flex-presenter cursor-default" class:inline-presenter={inline}>
@@ -36,7 +37,7 @@
       size="small"
     />
   </div>
-  <span class="label no-underline nowrap">
+  <span class="label no-underline nowrap" class:fs-bold={accent}>
     {value.name}
   </span>
 </div>
diff --git a/plugins/view-resources/src/components/ObjectPresenter.svelte b/plugins/view-resources/src/components/ObjectPresenter.svelte
index 3de6a5ea9be..8bda56ad322 100644
--- a/plugins/view-resources/src/components/ObjectPresenter.svelte
+++ b/plugins/view-resources/src/components/ObjectPresenter.svelte
@@ -23,6 +23,7 @@
   export let value: Doc | RelatedDocument | undefined = undefined
   export let props: Record<string, any> = {}
   export let inline: boolean = true
+  export let accent: boolean = true
   export let shouldShowAvatar: boolean = true
   export let noUnderline: boolean = false
 
@@ -64,6 +65,7 @@
     value={doc}
     {...props}
     {inline}
+    {accent}
     {shouldShowAvatar}
     {noUnderline}
     on:accent-color