From 91c954dee5a14c4e327f3cc58ab78c159870dc00 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 16 Sep 2021 11:27:26 +0300
Subject: [PATCH] Composer: Fix icon colors; Middle Header: Rename Linked
 Channel button (#1442)

---
 src/components/middle/HeaderMenuContainer.tsx | 4 ++--
 src/components/middle/MiddleColumn.scss       | 2 +-
 src/components/middle/ScrollDownButton.scss   | 1 +
 src/components/middle/composer/Composer.scss  | 7 ++++++-
 src/components/middle/composer/Composer.tsx   | 5 -----
 src/styles/_variables.scss                    | 1 +
 src/styles/themes.json                        | 3 ++-
 7 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/middle/HeaderMenuContainer.tsx b/src/components/middle/HeaderMenuContainer.tsx
index 5cf4a8488..08b6d620b 100644
--- a/src/components/middle/HeaderMenuContainer.tsx
+++ b/src/components/middle/HeaderMenuContainer.tsx
@@ -191,10 +191,10 @@ const HeaderMenuContainer: FC<OwnProps & StateProps & DispatchProps> = ({
           )}
           {hasLinkedChat && (
             <MenuItem
-              icon="comments"
+              icon={isChannel ? 'comments' : 'channel'}
               onClick={handleLinkedChatClick}
             >
-              {lang('ViewDiscussion')}
+              {lang(isChannel ? 'ViewDiscussion' : 'lng_profile_view_channel')}
             </MenuItem>
           )}
           <MenuItem
diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss
index fb1479faf..f2968c7b5 100644
--- a/src/components/middle/MiddleColumn.scss
+++ b/src/components/middle/MiddleColumn.scss
@@ -146,7 +146,7 @@
     > .Button {
       opacity: 1;
       transform: scale(1);
-      transition: opacity var(--select-transition), transform var(--select-transition);
+      transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s, color 0.15s;
 
       body.animation-level-0 & {
         transition: none !important;
diff --git a/src/components/middle/ScrollDownButton.scss b/src/components/middle/ScrollDownButton.scss
index cabf515b8..796bd380f 100644
--- a/src/components/middle/ScrollDownButton.scss
+++ b/src/components/middle/ScrollDownButton.scss
@@ -38,6 +38,7 @@
 
     > .Button {
       box-shadow: 0 1px 2px var(--color-default-shadow);
+      color: var(--color-composer-button);
 
       i {
         font-size: 1.75rem;
diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss
index 92aed10de..3690a167e 100644
--- a/src/components/middle/composer/Composer.scss
+++ b/src/components/middle/composer/Composer.scss
@@ -36,6 +36,7 @@
   > .Button {
     flex-shrink: 0;
     margin-left: .5rem;
+    color: var(--color-composer-button);
 
     @media (max-width: 600px) {
       width: 2.875rem;
@@ -210,6 +211,10 @@
     padding: 0;
     align-self: flex-end;
 
+    &:not(.faded):not(.activated) {
+      color: var(--color-composer-button);
+    }
+
     + .Button {
       margin-left: -1rem;
     }
@@ -236,7 +241,7 @@
       content: '';
       position: absolute;
       top: .75rem;
-      right: .75rem;
+      right: .875rem;
       border: .1875rem solid var(--color-background);
       box-sizing: content-box;
       width: .5rem;
diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index 29a43b22a..f24bf2d5c 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -859,7 +859,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={buildClassName('bot-commands', isBotCommandMenuOpen && 'activated')}
               round
-              faded
               disabled={botCommands === undefined}
               color="translucent"
               onActivate={handleActivateBotCommandMenu}
@@ -872,7 +871,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <Button
               className={symbolMenuButtonClassName}
               round
-              faded
               color="translucent"
               onClick={isSymbolMenuOpen ? closeSymbolMenu : handleSymbolMenuOpen}
               ariaLabel="Choose emoji, sticker or GIF"
@@ -885,7 +883,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={isSymbolMenuOpen ? 'activated' : ''}
               round
-              faded
               color="translucent"
               onActivate={handleActivateSymbolMenu}
               ariaLabel="Choose emoji, sticker or GIF"
@@ -928,7 +925,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={isBotKeyboardOpen ? 'activated' : ''}
               round
-              faded
               color="translucent"
               onActivate={openBotKeyboard}
               ariaLabel="Open bot command keyboard"
@@ -940,7 +936,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={isAttachMenuOpen ? 'activated' : ''}
               round
-              faded
               color="translucent"
               onActivate={openAttachMenu}
               ariaLabel="Add an attachment"
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 1aadefd79..d995b44b4 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -83,6 +83,7 @@ $color-user-8: #faa774;
   --color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);
   --color-interactive-buffered: rgba(var(--color-text-secondary-rgb), 0.25); // Overlays underlying inactive element
   --color-interactive-element-hover: rgba(var(--color-text-secondary-rgb), 0.08);
+  --color-composer-button: #{$color-text-secondary}CC;
 
   --color-primary: #{$color-primary};
   --color-primary-rgb: #{toRGB($color-primary)};
diff --git a/src/styles/themes.json b/src/styles/themes.json
index cfbda054d..9610f2362 100644
--- a/src/styles/themes.json
+++ b/src/styles/themes.json
@@ -37,5 +37,6 @@
   "--color-code": ["#4a729a", "#8774E1"],
   "--color-code-own": ["#3c7940", "#FFFFFF"],
   "--color-code-bg": ["#70757914", "#ffffff26"],
-  "--color-code-own-bg": ["#70757914", "#ffffff26"]
+  "--color-code-own-bg": ["#70757914", "#ffffff26"],
+  "--color-composer-button": ["#707579CC", "#AAAAAACC"]
 }