TSK-1324. Update popups and colors (#3145)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

plugins/tracker-resources/src/components/issues/IssuePresenter.svelte

@@ -81,7 +81,7 @@
     }
     .icon {
       margin-right: 0.5rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
 
     &.inline {
@@ -93,7 +93,7 @@
       }
       .select-text {
         font-weight: 500;
-        color: var(--accent-color);
+        color: var(--theme-caption-color);
       }
     }
   }

plugins/tracker-resources/src/components/issues/IssuePreview.svelte

@@ -97,7 +97,7 @@
             <MessageViewer message={issue.description} />
           </div>
         {:else}
-          <div class="ml-2 dark-color">
+          <div class="ml-2 content-dark-color">
             <Label label={tracker.string.NoDescription} />
           </div>
         {/if}

plugins/tracker-resources/src/components/issues/Move.svelte

@@ -60,7 +60,7 @@
   <div class="overflow-label fs-title">
     <Label label={tracker.string.MoveIssues} />
   </div>
-  <div class="content-accent-color mt-4 mb-4">
+  <div class="caption-color mt-4 mb-4">
     <Label label={tracker.string.MoveIssuesDescription} />
   </div>
   <div class="spaceSelect">

plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte

@@ -42,7 +42,7 @@
         </span>
       {/if}
       <span class="overflow-label ml-2">
-        <span class="content-accent-color">{title}</span>
+        <span class="caption-color">{title}</span>
         {value.title}
       </span>
     </div>

plugins/tracker-resources/src/components/issues/PriorityEditor.svelte

@@ -81,9 +81,7 @@
       </div>
       {#if shouldShowLabel}
         <span
-          class="{kind === 'list'
-            ? 'ml-2 text-md'
-            : 'ml-3 text-base'} overflow-label disabled fs-bold content-accent-color"
+          class="{kind === 'list' ? 'ml-2 text-md' : 'ml-3 text-base'} overflow-label disabled fs-bold content-color"
         >
           <Label label={issuePriorities[value.priority]?.label} />
         </span>

plugins/tracker-resources/src/components/issues/StatusEditor.svelte

@@ -121,9 +121,7 @@
       </div>
       {#if selectedStatusLabel}
         <span
-          class="{kind === 'list'
-            ? 'ml-1 text-md'
-            : 'ml-2 text-base'} overflow-label disabled fs-bold content-accent-color"
+          class="{kind === 'list' ? 'ml-1 text-md' : 'ml-2 text-base'} overflow-label disabled fs-bold content-color"
         >
           {selectedStatusLabel}
         </span>

plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte

@@ -55,14 +55,14 @@
     <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {projects} {disableHeader} />
   {:else}
     <div class="antiSection-empty solid flex-col mt-3">
-      <div class="flex-center content-accent-color">
+      <div class="flex-center content-color">
         <AddIssueDuo size={'large'} />
       </div>
-      <div class="text-sm dark-color" style:pointer-events="none">
+      <div class="text-sm content-dark-color" style:pointer-events="none">
         <Label label={tracker.string.RelatedIssuesNotFound} />
       </div>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div class="over-underline text-sm content-accent-color" on:click={() => dispatch('add-issue')}>
+      <div class="over-underline text-sm content-color" on:click={() => dispatch('add-issue')}>
         <Label label={tracker.string.NewRelatedIssue} />
       </div>
     </div>

plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte

@@ -51,7 +51,7 @@
       </span>
       {#if headerRemoval}
         <div in:fade|local={{ duration: 150 }} class="antiSection-header__header flex-between">
-          <span class="dark-color"><Label label={viewplg.string.NoGrouping} /></span>
+          <span class="content-dark-color"><Label label={viewplg.string.NoGrouping} /></span>
           <div class="buttons-group font-normal text-normal">
             {#if extraHeaders}
               {#each extraHeaders as extra}

plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte

@@ -124,7 +124,7 @@
   <svelte:fragment slot="buttons">
     <Button
       icon={IconAdd}
-      size={'small'}
+      size={'large'}
       on:click={() => {
         showPopup(
           TimeSpendReportPopup,

plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte

@@ -40,7 +40,7 @@
     {@const issue = issues[item]}
     {@const currentProject = projects.get(issue.space)}
     <div
-      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2 clear-mins"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
       on:mouseover={() => {
         listProvider.updateFocus(issue)
@@ -60,19 +60,22 @@
         </span>
       </div>
 
-      <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
-        <AssigneeBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={issue.assignee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-      <FixedColumn key={'estimation'} justify={'left'}>
-        <EstimationEditor value={issue} kind={'list'} />
-      </FixedColumn>
+      <div class="flex-row-center clear-mins gap-2 self-end flex-no-shrink" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
+          <AssigneeBox
+            width={'100%'}
+            kind={'transparent'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={issue.assignee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'estimation'} justify={'left'}>
+          <EstimationEditor value={issue} kind={'list'} />
+        </FixedColumn>
+      </div>
     </div>
   </svelte:fragment>
 </ListView>

plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte

@@ -75,7 +75,7 @@
         {/if}
       </span>
     {:else}
-      <span class="dark-color"><Label label={placeholder} /></span>
+      <span class="content-dark-color"><Label label={placeholder} /></span>
     {/if}
     <div class="add-action">
       <ActionIcon icon={IconAdd} size={'small'} action={addTimeReport} />
@@ -89,7 +89,7 @@
     {/if}
   </span>
 {:else}
-  <span class="dark-color"><Label label={placeholder} /></span>
+  <span class="content-dark-color"><Label label={placeholder} /></span>
 {/if}
 
 <style lang="scss">
@@ -98,7 +98,8 @@
     align-items: center;
     padding: 0 0.875rem;
     width: 100%;
-    height: 2rem;
+    height: 2.25rem;
+    color: var(--theme-caption-color);
     border: 1px solid transparent;
     border-radius: 0.25rem;
     cursor: pointer;
@@ -108,9 +109,9 @@
     }
 
     &:hover {
-      color: var(--caption-color);
-      background-color: var(--body-color);
-      border-color: var(--divider-color);
+      background-color: var(--theme-bg-color);
+      border-color: var(--theme-divider-color);
+
       .add-action {
         visibility: visible;
       }

plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte

@@ -15,13 +15,14 @@
 <script lang="ts">
   import { TimeReportDayType } from '@hcengineering/tracker'
   import { DropdownIntlItem, DropdownLabelsIntl } from '@hcengineering/ui'
-  import type { ButtonKind } from '@hcengineering/ui'
+  import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import TimeReportDayIcon from './TimeReportDayIcon.svelte'
 
   export let label = tracker.string.TimeReportDayTypeLabel
   export let selected: TimeReportDayType | undefined
   export let kind: ButtonKind = 'link-bordered'
+  export let size: ButtonSize = 'small'
 
   const workDaysDropdownItems: DropdownIntlItem[] = [
     {
@@ -37,6 +38,7 @@
 
 <DropdownLabelsIntl
   {kind}
+  {size}
   icon={TimeReportDayIcon}
   shouldUpdateUndefined={false}
   {label}

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte

@@ -132,18 +132,22 @@
     <UserBox
       _class={contact.class.Employee}
       label={contact.string.Employee}
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       bind:value={data.employee}
       showNavigate={false}
     />
     <TimeReportDayDropdown
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       bind:selected={selectedTimeReportDay}
       on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
     />
     <DatePresenter
       bind:value={data.date}
       editable
+      kind={'secondary'}
+      size={'large'}
       on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
     />
   </svelte:fragment>

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte

@@ -70,7 +70,7 @@
     {@const report = reports[item]}
     {@const currentProject = projects.get(toProjectId(report.space))}
     <div
-      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2 clear-mins"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
       on:mouseenter={() => {
         listProvider.updateFocus(report)
@@ -92,10 +92,11 @@
           </span>
         {/if}
       </div>
-      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+      <div class="flex-row-center clear-mins gap-2 self-end flex-no-shrink" class:p-text={twoRows}>
         <FixedColumn key={'timespend_assignee'} justify={'left'}>
           <UserBox
             width={'100%'}
+            kind={'transparent'}
             label={tracker.string.Assignee}
             _class={contact.class.Employee}
             value={report.employee}
@@ -107,7 +108,7 @@
           <TimePresenter value={report.value} />
         </FixedColumn>
         <FixedColumn key={'timespend_date'} justify={'left'}>
-          <DatePresenter value={report.date} />
+          <DatePresenter value={report.date} kind={'transparent'} size={'small'} />
         </FixedColumn>
       </div>
     </div></svelte:fragment