compose: Fix close icon in top right area.

There are two tangled issues addressed here:
* We were weirdly using a scaled up copy of fa-angle-up, rather than
  fa-chevron-up, for a chevron up, for the expand/collapse widget.
* We were previously using × for the close icon, which had
  visual and scaling issues next to the fa-angle icon.

Fixes #20403.
This commit is contained in:
Adam Sah
2022-04-19 11:31:49 -04:00
committed by Tim Abbott
parent 2268cb8477
commit 299995bd3a
2 changed files with 6 additions and 5 deletions

View File

@@ -239,14 +239,15 @@
button {
background: transparent;
font-size: 20px;
font-weight: bold;
font-size: 15px;
font-weight: normal;
line-height: 20px;
opacity: 0.6;
border: 0;
padding: 0;
margin-left: 4px;
vertical-align: unset;
text-shadow: none;
&:hover {
opacity: 1;

View File

@@ -68,9 +68,9 @@
<div class="compose_table">
<div id="compose_top">
<div id="compose_top_right" class="order-2">
<button type="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand compose' }}" data-tippy-content="{{t 'Expand compose' }}"></button>
<button type="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse compose' }}" data-tippy-content="{{t 'Collapse compose' }}"></button>
<button type="button" class="close" id="compose_close" data-tooltip-template-id="compose_close_tooltip">&times;</button>
<button type="button" class="expand_composebox_button fa fa-chevron-up" aria-label="{{t 'Expand compose' }}" title="{{t 'Expand compose' }}"></button>
<button type="button" class="collapse_composebox_button fa fa-chevron-down" aria-label="{{t 'Collapse compose' }}" data-tippy-content="{{t 'Collapse compose' }}"></button>
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip"></button>
<template id="compose_close_tooltip">{{t 'Cancel compose' }} <span class="hotkey-hint">(Esc)</span></template>
</div>
<div id="stream-message" class="order-1">