Merge "Make draft comments more prominent"

polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
index 6f4d381..b2ae7f1 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
@@ -356,11 +356,13 @@
           flex: 1;
           overflow: hidden;
         }
-        .draftLabel,
         .draftTooltip {
-          color: var(--deemphasized-text-color);
+          font-weight: var(--font-weight-bold);
           display: inline;
         }
+        .draftTooltip gr-icon {
+          color: var(--info-foreground);
+        }
         .date {
           justify-content: flex-end;
           text-align: right;
@@ -526,6 +528,7 @@
   }
 
   private renderAuthor() {
+    if (isDraftOrUnsaved(this.comment)) return;
     if (isRobot(this.comment)) {
       const id = this.comment.robot_id;
       return html`<span class="robotName">${id}</span>`;
@@ -554,7 +557,7 @@
 
   private renderDraftLabel() {
     if (!isDraftOrUnsaved(this.comment)) return;
-    let label = 'DRAFT';
+    let label = 'Draft';
     let tooltip =
       'This draft is only visible to you. ' +
       "To publish drafts, click the 'Reply' or 'Start review' button " +
@@ -569,8 +572,8 @@
         has-tooltip
         title=${tooltip}
         max-width="20em"
-        show-icon
       >
+        <gr-icon filled icon="rate_review"></gr-icon>
         <span class="draftLabel">${label}</span>
       </gr-tooltip-content>
     `;

polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
index 8ab2099..8765d23 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
@@ -247,18 +247,14 @@
           <div class="container draft" id="container">
             <div class="header" id="header">
               <div class="headerLeft">
-                <gr-account-label
-                  class="draft"
-                  deselected=""
-                ></gr-account-label>
                 <gr-tooltip-content
                   class="draftTooltip"
                   has-tooltip=""
                   max-width="20em"
-                  show-icon=""
                   title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'a' key."
                 >
-                  <span class="draftLabel">DRAFT</span>
+                  <gr-icon filled icon="rate_review"></gr-icon>
+                  <span class="draftLabel">Draft</span>
                 </gr-tooltip-content>
               </div>
               <div class="headerMiddle"></div>
@@ -321,18 +317,14 @@
           <div class="container draft" id="container">
             <div class="header" id="header">
               <div class="headerLeft">
-                <gr-account-label
-                  class="draft"
-                  deselected=""
-                ></gr-account-label>
                 <gr-tooltip-content
                   class="draftTooltip"
                   has-tooltip=""
                   max-width="20em"
-                  show-icon=""
                   title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'a' key."
                 >
-                  <span class="draftLabel">DRAFT</span>
+                  <gr-icon filled icon="rate_review"></gr-icon>
+                  <span class="draftLabel">Draft</span>
                 </gr-tooltip-content>
               </div>
               <div class="headerMiddle"></div>