Browse Source

Change the color of send/cancel button

master
Eduard Kuzmenko 3 years ago
parent
commit
05e2761860
  1. 2
      src/components/chat/input.ts
  2. 35
      src/scss/partials/_chat.scss

2
src/components/chat/input.ts

@ -668,7 +668,7 @@ export default class ChatInput { @@ -668,7 +668,7 @@ export default class ChatInput {
this.inlineHelper = new InlineHelper(this.rowsWrapper, this.autocompleteHelperController, this.chat, this.appUsersManager, this.appInlineBotsManager);
this.rowsWrapper.append(this.newMessageWrapper);
this.btnCancelRecord = ButtonIcon('delete danger btn-circle z-depth-1 btn-record-cancel');
this.btnCancelRecord = ButtonIcon('delete btn-circle z-depth-1 btn-record-cancel');
this.btnSendContainer = document.createElement('div');
this.btnSendContainer.classList.add('btn-send-container');

35
src/scss/partials/_chat.scss

@ -235,6 +235,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -235,6 +235,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
position: absolute;
right: 0;
top: 0;
background-color: var(--danger-color) !important;
// background-color: var(--surface-color) !important;
// here percents can be used since there are no other transforms
transform: translateX(calc(-100% + var(--padding-horizontal) * -1 + #{-$btn-send-margin}));
@ -320,15 +322,16 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -320,15 +322,16 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
.btn-send {
color: var(--secondary-text-color);
background-color: var(--primary-color) !important;
// color: var(--secondary-text-color);
z-index: 3;
.tgico-send {
color: var(--primary-color) !important;
}
// .tgico-send {
// color: var(--primary-color) !important;
// }
.tgico-check {
color: var(--primary-color) !important;
// color: var(--primary-color) !important;
height: 32px!important;
font-size: 2rem;
@ -337,16 +340,16 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -337,16 +340,16 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
}
.tgico-schedule {
background-color: var(--primary-color);
color: #fff;
border-radius: 50%;
width: 34px; // * same as for btn-icon in input
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
// .tgico-schedule {
// background-color: var(--primary-color);
// color: #fff;
// border-radius: 50%;
// width: 34px; // * same as for btn-icon in input
// height: 34px;
// display: flex;
// align-items: center;
// justify-content: center;
// }
&.send .tgico-send,
&.record .tgico-microphone,
@ -375,7 +378,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -375,7 +378,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.btn-send {
font-size: 1.5rem;
line-height: 1.5rem;
background-color: var(--surface-color) !important;
color: #fff !important;
}
.record-time {

Loading…
Cancel
Save