Chore: Fixes icon size in button (#3555)

* Chore: Fixes icon size in button

* Changes normal button to woot button
This commit is contained in:
Nithin David Thomas 2021-12-14 17:37:25 +05:30 committed by GitHub
parent ac372f188d
commit c2191e48b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 87 additions and 71 deletions

View file

@ -8,7 +8,6 @@
color-scheme="secondary"
variant="smooth"
size="small"
:icon-size="14"
@click="toggleEmojiPicker"
/>
@ -27,7 +26,6 @@
:title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
icon="attach"
emoji="📎"
:icon-size="14"
color-scheme="secondary"
variant="smooth"
size="small"
@ -37,7 +35,6 @@
v-if="enableRichEditor && !isOnPrivateNote"
icon="quote"
emoji="🖊️"
:icon-size="16"
color-scheme="secondary"
variant="smooth"
size="small"

View file

@ -1,23 +1,23 @@
<template>
<div class="top-box">
<div class="mode-wrap button-group">
<button
class="button clear button--reply"
<woot-button
variant="clear"
class="button--reply"
:class="replyButtonClass"
@click="handleReplyClick"
>
<emoji-or-icon icon="" emoji="💬" />
{{ $t('CONVERSATION.REPLYBOX.REPLY') }}
</button>
</woot-button>
<button
class="button clear button--note"
<woot-button
class="button--note"
variant="clear"
:class="noteButtonClass"
@click="handleNoteClick"
>
<emoji-or-icon icon="" emoji="📝" />
{{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
</button>
</woot-button>
</div>
<div class="action-wrap">
<div v-if="isMessageLengthReachingThreshold" class="tabs-title">
@ -29,7 +29,6 @@
<woot-button
v-if="popoutReplyBox"
variant="clear"
size="large"
icon="dismiss"
color-scheme="secondary"
class-names="popout-button"
@ -38,7 +37,6 @@
<woot-button
v-else
variant="clear"
size="large"
icon="resize-large"
color-scheme="secondary"
class-names="popout-button"
@ -49,7 +47,6 @@
<script>
import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
import EmojiOrIcon from 'shared/components/EmojiOrIcon';
import {
hasPressedAltAndPKey,
hasPressedAltAndLKey,
@ -57,9 +54,6 @@ import {
import eventListenerMixins from 'shared/mixins/eventListenerMixins';
export default {
name: 'ReplyTopPanel',
components: {
EmojiOrIcon,
},
mixins: [eventListenerMixins],
props: {
mode: {
@ -189,11 +183,4 @@ export default {
color: var(--s-600);
}
}
.popout-button {
display: flex;
justify-content: flex-end;
height: auto;
padding-right: var(--space-normal);
}
</style>

View file

@ -22,7 +22,6 @@
<div class="filter-actions">
<woot-button
icon="add"
icon-size="16"
color-scheme="success"
variant="smooth"
size="small"

View file

@ -3,8 +3,7 @@
<woot-button
v-if="!currentChat.muted"
v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
variant="smooth"
size="small"
variant="clear"
color-scheme="secondary"
icon="speaker-mute"
@click="mute"
@ -12,16 +11,14 @@
<woot-button
v-else
v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
variant="smooth"
size="small"
variant="clear"
color-scheme="secondary"
icon="speaker-1"
@click="unmute"
/>
<woot-button
v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
variant="smooth"
size="small"
variant="clear"
color-scheme="secondary"
icon="share"
@click="toggleEmailActionsModal"
@ -93,8 +90,8 @@ export default {
.actions--container {
align-items: center;
.button {
margin-right: var(--space-small);
.resolve-actions {
margin-left: var(--space-small);
}
}