Composer: Fix icon colors; Middle Header: Rename Linked Channel button (#1442)

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

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;

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;

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;

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"

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)};

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"]
 }