Change all pencil icons from 18px to 16px
The 18px pencil on the change page seemed a bit large. Generally we want
to consistently use either 20px or 16px icons and never 18px ones.
16px is set by using the `small` attribute on `<gr-icon>`.
Note that we are introducing some <div>s in <gr-button> slots. The
reason is that <gr-button> applies a flex layout to slotted children.
And that does not work well with inline children. It is much easier to
reason about the layout, if there is a dedicated block between flex
parent and inline child.
Screenshots
https://imgur.com/a/9Rgi99T
https://imgur.com/a/73bNmyQ (also filled the pencil here)
https://imgur.com/a/i4W6QCM
https://imgur.com/a/2X9u4Kr
Release-Notes: skip
Change-Id: Idad10184366d0fa747960aedeffa8ea72ef48ea7
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
index 61e16b0..163ec49 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
@@ -73,15 +73,14 @@
}
.addReviewer gr-icon {
color: inherit;
- font-size: 18px;
}
.controlsContainer {
display: inline-block;
}
gr-button.addReviewer {
- --gr-button-padding: 1px 0px;
vertical-align: top;
- top: 1px;
+ --gr-button-padding: var(--spacing-s);
+ --margin: calc(0px - var(--spacing-s));
}
gr-button {
line-height: var(--line-height-normal);
@@ -117,7 +116,10 @@
class="addReviewer"
@click=${this.handleAddTap}
title=${this.ccsOnly ? 'Add CC' : 'Add reviewer'}
- ><gr-icon icon="edit" filled></gr-icon>
+ >
+ <div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ </div>
</gr-button>
</div>
</div>
