UBER-142: update buttons. Cleaning CSS. (#3482)

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

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

@@ -101,7 +101,7 @@
       {/if}
       <span class="overflow-label fs-bold caption-color">{title}</span>
     </div>
-    <Button icon={IconClose} kind="transparent" size="small" on:click={onRemove} />
+    <Button icon={IconClose} kind="ghost" size="small" on:click={onRemove} />
   </div>
 
   <div class="content flex-row-center flex-wrap gap-2 reverse">

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

@@ -80,10 +80,10 @@
   </div>
   <Scroller padding={'0.75rem 1.75rem 0'} noFade>
     <div class="flex-row-center gap-2 mb-2">
-      <StatusEditor value={issue} shouldShowLabel kind={'secondary'} />
-      <PriorityEditor value={issue} shouldShowLabel kind={'secondary'} />
+      <StatusEditor value={issue} shouldShowLabel kind={'regular'} />
+      <PriorityEditor value={issue} shouldShowLabel kind={'regular'} />
       {#if issue.assignee}
-        <AssigneeEditor object={issue} kind={'secondary'} />
+        <AssigneeEditor object={issue} kind={'regular'} />
       {/if}
     </div>
 

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

@@ -110,7 +110,7 @@
       <div class="buttons-divider" />
       <Button
         icon={asideShown ? IconDetailsFilled : IconDetails}
-        kind={'transparent'}
+        kind={'ghost'}
         size={'medium'}
         selected={asideShown}
         on:click={() => {

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

@@ -328,7 +328,7 @@
         <div class="tools gap-1">
           <Button
             icon={IconAdd}
-            kind={'transparent'}
+            kind={'ghost'}
             showTooltip={{ label: tracker.string.AddIssueTooltip, direction: 'left' }}
             on:click={() => {
               showPopup(CreateIssue, { space: currentSpace, [groupByKey]: state._id }, 'top')

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

@@ -253,7 +253,7 @@
       <span class="fs-title aligned-text">
         <Label label={tracker.string.MoveIssues} />
       </span>
-      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="ghost" on:click={() => dispatch('close')} />
     </div>
 
     <div>
@@ -266,7 +266,7 @@
           _class={currentSpace._class}
           label={hierarchy.getClass(tracker.class.Project).label}
           bind:space
-          kind={'secondary'}
+          kind={'regular'}
           size={'small'}
           component={ProjectPresenter}
           iconWithEmoji={tracker.component.IconWithEmoji}
@@ -309,7 +309,7 @@
       >
         <Label label={getEmbeddedLabel('<    Manage attributes')} />
       </span>
-      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="transparent" on:click={() => dispatch('close')} />
+      <Button icon={IconClose} iconProps={{ size: 'medium' }} kind="ghost" on:click={() => dispatch('close')} />
     </div>
     <div class="divider" />
 
@@ -378,7 +378,7 @@
         label={view.string.Move}
         size={'small'}
         disabled={docs[0]?.space === currentSpace?._id}
-        kind={'primary'}
+        kind={'accented'}
         on:click={moveAll}
         loading={processing}
       />

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

@@ -45,7 +45,7 @@
   <Button
     icon={IconClose}
     showTooltip={{ label: tracker.string.RemoveParent, direction: 'bottom' }}
-    kind={'transparent'}
+    kind={'ghost'}
     size={'small'}
     on:click={() => dispatch('close')}
   />

plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte

@@ -24,7 +24,7 @@
 
 <Button
   {icon}
-  kind={'transparent'}
+  kind={'ghost'}
   showTooltip={{ label: title, direction: 'bottom' }}
   on:click={() => copyTextToClipboard(text)}
 />

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -230,13 +230,13 @@
       {#if issueId}{issueId}{/if}
     </span>
     <svelte:fragment slot="utils">
-      <Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
+      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
       {#if issueId}
         <CopyToClipboard issueUrl={generateIssueShortLink(issueId)} {issueId} />
       {/if}
       <Button
         icon={setting.icon.Setting}
-        kind={'transparent'}
+        kind={'ghost'}
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()
@@ -251,7 +251,7 @@
         }}
       />
       <Button
-        kind={'transparent'}
+        kind={'ghost'}
         selected={showAllMixins}
         on:click={() => {
           showAllMixins = !showAllMixins

plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte

@@ -89,7 +89,7 @@
   {#if hasSubIssues}
     <Button
       width="min-content"
-      kind="transparent"
+      kind="ghost"
       on:click={() => {
         isCollapsed = !isCollapsed
       }}
@@ -102,12 +102,12 @@
   {/if}
   <div class="flex-row-center gap-2">
     {#if viewlet && hasSubIssues && viewOptions}
-      <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
+      <ViewletSettingButton bind:viewOptions {viewlet} kind={'ghost'} />
     {/if}
     {#if hasSubIssues}
       <Button
         icon={IconScaleFull}
-        kind={'transparent'}
+        kind={'ghost'}
         showTooltip={{ label: tracker.string.OpenSubIssues, direction: 'bottom' }}
         on:click={() => {
           const filter = createFilter(tracker.class.Issue, 'attachedTo', [issue._id])
@@ -130,7 +130,7 @@
       icon={hasSubIssues ? IconAdd : undefined}
       label={hasSubIssues ? undefined : tracker.string.AddSubIssues}
       labelParams={{ subIssues: 0 }}
-      kind={'transparent'}
+      kind={'ghost'}
       showTooltip={{ label: tracker.string.AddSubIssues, props: { subIssues: 1 }, direction: 'bottom' }}
       on:click={() => {
         isCollapsed = false

plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte

@@ -153,7 +153,7 @@
           <div class="flex-row-center content-color text-sm pointer-events-none">
             {#if !compactMode}
               <div class="mr-1-5">
-                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
+                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
               </div>
             {/if}
             {countComplete}/{subIssues.length}

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

@@ -133,7 +133,7 @@
           <div class="flex-row-center content-color text-sm pointer-events-none">
             {#if !compactMode}
               <div class="mr-1-5">
-                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} primary />
+                <ProgressCircle bind:value={countComplete} bind:max={subIssues.length} size={'small'} accented />
               </div>
             {/if}
             {countComplete}/{subIssues.length}

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

@@ -67,14 +67,14 @@
       {/if}
       <div class="flex-row-center gap-2">
         {#if viewlet && viewOptions}
-          <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
+          <ViewletSettingButton bind:viewOptions {viewlet} kind={'ghost'} />
         {/if}
         <Button
           id="add-sub-issue"
           icon={IconAdd}
           label={undefined}
           labelParams={{ subIssues: 0 }}
-          kind={'transparent'}
+          kind={'ghost'}
           on:click={createIssue}
         />
       </div>

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

@@ -19,7 +19,7 @@
   export let min: number = 0
   export let max: number = 100
   export let size: IconSize = 'small'
-  export let primary: boolean = false
+  export let accented: boolean = false
 
   export let color: string = 'var(--theme-progress-color)'
   export let greenColor: string = FernColor
@@ -50,7 +50,7 @@
       cy={8}
       r={7}
       class="progress-circle"
-      style:stroke={primary ? 'var(--primary-bg-color)' : color}
+      style:stroke={accented ? 'var(--primary-bg-color)' : color}
       style:opacity={dashOffset === 0 ? 0 : 1}
       style:transform={'rotate(-82deg)'}
       style:stroke-dasharray={lenghtC}

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

@@ -64,7 +64,7 @@
         <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
           <AssigneeBox
             width={'100%'}
-            kind={'transparent'}
+            kind={'ghost'}
             label={tracker.string.Assignee}
             _class={contact.class.Employee}
             value={issue.assignee}

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

@@ -133,13 +133,13 @@
     <UserBox
       _class={contact.class.Employee}
       label={contact.string.Employee}
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:value={data.employee}
       showNavigate={false}
     />
     <TimeReportDayDropdown
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       bind:selected={selectedTimeReportDay}
       on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
@@ -147,7 +147,7 @@
     <DatePresenter
       bind:value={data.date}
       editable
-      kind={'secondary'}
+      kind={'regular'}
       size={'large'}
       on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
     />

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

@@ -96,7 +96,7 @@
         <FixedColumn key={'timespend_assignee'} justify={'left'}>
           <UserBox
             width={'100%'}
-            kind={'transparent'}
+            kind={'ghost'}
             label={tracker.string.Assignee}
             _class={contact.class.Employee}
             value={report.employee}
@@ -108,7 +108,7 @@
           <TimePresenter value={report.value} />
         </FixedColumn>
         <FixedColumn key={'timespend_date'} justify={'left'}>
-          <DatePresenter value={report.date} kind={'transparent'} size={'small'} />
+          <DatePresenter value={report.date} kind={'ghost'} size={'small'} />
         </FixedColumn>
       </div>
     </div></svelte:fragment