Improve change summary chips. Following UX mocks following changes are made: - Drafts are grey - Drafts are positioned last - Drafts changed icon to rate_review - Icon for resolved threads is filled Screenshot: https://imgur.com/a/JOxPbFB Release-Notes: skip Google-Bug-Id: b/187487742 Change-Id: I976b739b04e6284a52f31733d96c63c68e025df9

diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
index bdaf918..f8c8e50 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts

@@ -548,12 +548,13 @@
                 countResolvedComments,
                 countUnresolvedComments
               )}
-              ${this.renderMentionChip()} ${this.renderDraftChip()}
+              ${this.renderMentionChip()}
               ${this.renderUnresolvedCommentsChip(
                 countUnresolvedComments,
                 unresolvedAuthors
               )}
               ${this.renderResolvedCommentsChip(countResolvedComments)}
+              ${this.renderDraftChip()}
             </td>
           </tr>
           ${this.renderChecksSummary()}
@@ -592,9 +593,10 @@
   private renderDraftChip() {
     if (!this.draftCount) return nothing;
     return html` <gr-summary-chip
-      styleType=${SummaryChipStyles.WARNING}
+      styleType=${SummaryChipStyles.CHECK}
       category=${CommentTabState.DRAFTS}
-      icon="edit"
+      icon="rate_review"
+      iconFilled
     >
       ${pluralize(this.draftCount, 'draft')}</gr-summary-chip
     >`;
@@ -624,6 +626,7 @@
       styleType=${SummaryChipStyles.CHECK}
       category=${CommentTabState.SHOW_ALL}
       icon="mark_chat_read"
+      iconFilled
       >${countResolvedComments} resolved</gr-summary-chip
     >`;
   }

diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts
index 016b727..7ca44e5 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts

@@ -48,23 +48,25 @@
             <tr>
               <td class="key">Comments</td>
               <td class="value">
-                <gr-summary-chip
-                  category="drafts"
-                  icon="edit"
-                  styletype="warning"
-                >
-                  3 drafts
-                </gr-summary-chip>
                 <gr-summary-chip category="unresolved" styletype="warning">
                   1 unresolved
                 </gr-summary-chip>
                 <gr-summary-chip
                   category="show all"
                   icon="mark_chat_read"
+                  iconFilled
                   styletype="check"
                 >
                   1 resolved
                 </gr-summary-chip>
+                <gr-summary-chip
+                  category="drafts"
+                  icon="rate_review"
+                  iconFilled
+                  styletype="check"
+                >
+                  3 drafts
+                </gr-summary-chip>
               </td>
             </tr>
           </tbody>

diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts
index 4ac8790..fee77c7 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts

@@ -25,6 +25,9 @@
   @property()
   icon = '';
 
+  @property({type: Boolean})
+  iconFilled = false;
+
   @property()
   styleType = SummaryChipStyles.UNDEFINED;
 
@@ -91,7 +94,8 @@
   override render() {
     const chipClass = `summaryChip font-small ${this.styleType}`;
     return html`<button class=${chipClass} @click=${this.handleClick}>
-      ${this.icon && html`<gr-icon icon=${this.icon}></gr-icon>`}
+      ${this.icon &&
+      html`<gr-icon .filled=${this.iconFilled} icon=${this.icon}></gr-icon>`}
       <slot></slot>
     </button>`;
   }