[Design] Update colors (follow-up) (#1436)

src/components/common/Audio.tsx

@@ -443,10 +443,10 @@ function renderWaveform(
     return undefined;
   }
 
-  const fillColor = theme === 'dark' ? '#494B75' : '#CBCBCB';
+  const fillColor = theme === 'dark' ? '#494A78' : '#ADD3F7';
-  const fillOwnColor = theme === 'dark' ? '#C0BBED' : '#B0DEA6';
+  const fillOwnColor = theme === 'dark' ? '#B7ABED' : '#AEDFA4';
-  const progressFillColor = theme === 'dark' ? '#868DF5' : '#54a3e6';
+  const progressFillColor = theme === 'dark' ? '#8774E1' : '#3390EC';
-  const progressFillOwnColor = theme === 'dark' ? '#FFFFFF' : '#53ad53';
+  const progressFillOwnColor = theme === 'dark' ? '#FFFFFF' : '#4FAE4E';
   const durationFactor = Math.min(duration / AVG_VOICE_DURATION, 1);
   const spikesCount = Math.round(MIN_SPIKES + (MAX_SPIKES - MIN_SPIKES) * durationFactor);
   const decodedWaveform = decodeWaveform(new Uint8Array(waveform));

src/components/left/LeftColumn.scss

@@ -8,7 +8,7 @@
 
 .left-header {
   height: var(--header-height);
-  padding: 0.375rem 1.25rem .5rem 0.8125rem;
+  padding: 0.375rem 1rem .5rem 0.8125rem;
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -24,10 +24,10 @@
 
   .SearchInput {
     margin-left: 0.875rem;
-    max-width: calc(100% - 3.625rem);
+    max-width: calc(100% - 3.25rem);
 
     @media (max-width: 600px) {
-      max-width: calc(100% - 3.375rem);
+      max-width: calc(100% - 3rem);
     }
   }
 

src/components/left/main/Chat.scss

@@ -80,10 +80,6 @@
   }
 
   .info {
-    .title, .subtitle {
-      padding-right: .125rem;
-    }
-
     .subtitle {
       margin-top: -.125rem;
     }

src/components/left/search/LeftSearch.scss

@@ -173,7 +173,7 @@
 
         &:focus,
         &:hover {
-          color: var(--color-links-hover);
+          text-decoration: underline;
         }
       }
 

src/components/mediaViewer/MediaViewerFooter.scss

@@ -94,7 +94,7 @@
 
     &:hover,
     &:focus {
-      color: var(--color-links-hover);
+      text-decoration: underline;
     }
   }
 }

src/components/middle/composer/Composer.scss

@@ -36,7 +36,6 @@
   > .Button {
     flex-shrink: 0;
     margin-left: .5rem;
-    color: var(--color-text-secondary);
 
     @media (max-width: 600px) {
       width: 2.875rem;
@@ -349,7 +348,7 @@
     text-decoration: none;
 
     &:hover, &:active, &:visited {
-      color: var(--color-links-hover) !important;
+      text-decoration: underline !important;
     }
   }
 

src/components/middle/composer/Composer.tsx

@@ -875,6 +875,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={buildClassName('bot-commands', isBotCommandMenuOpen && 'activated')}
               round
+              faded
               disabled={botCommands === undefined}
               color="translucent"
               onActivate={handleActivateBotCommandMenu}
@@ -887,6 +888,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <Button
               className={symbolMenuButtonClassName}
               round
+              faded
               color="translucent"
               onClick={isSymbolMenuOpen ? closeSymbolMenu : handleSymbolMenuOpen}
               ariaLabel="Choose emoji, sticker or GIF"
@@ -899,6 +901,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={isSymbolMenuOpen ? 'activated' : ''}
               round
+              faded
               color="translucent"
               onActivate={handleActivateSymbolMenu}
               ariaLabel="Choose emoji, sticker or GIF"
@@ -928,6 +931,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
           {withScheduledButton && (
             <Button
               round
+              faded
               className="scheduled-button"
               color="translucent"
               onClick={handleAllScheduledClick}
@@ -940,6 +944,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={isBotKeyboardOpen ? 'activated' : ''}
               round
+              faded
               color="translucent"
               onActivate={openBotKeyboard}
               ariaLabel="Open bot command keyboard"
@@ -951,6 +956,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
             <ResponsiveHoverButton
               className={isAttachMenuOpen ? 'activated' : ''}
               round
+              faded
               color="translucent"
               onActivate={openAttachMenu}
               ariaLabel="Add an attachment"

src/components/middle/message/Message.scss

@@ -108,7 +108,6 @@
     --color-code: var(--color-code-own);
     --color-code-bg: var(--color-code-own-bg);
     --color-links: var(--color-own-links);
-    --color-links-hover: var(--color-own-links);
     --meta-safe-area-base: 3.5rem;
     --deleting-translate-x: 50%;
     --color-text-green: var(--color-accent-own);
@@ -534,6 +533,7 @@
 
       .message-content.has-appendix {
         --border-bottom-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
     }
   }

src/components/middle/message/_message-content.scss

@@ -124,10 +124,10 @@
 
   .theme-dark .Message.own & {
     .text-entity-link {
-      text-decoration: underline;
+      text-decoration: underline !important;
 
       &:hover {
-        text-decoration: none;
+        text-decoration: none !important;
       }
     }
   }
@@ -717,14 +717,13 @@
 
 .text-entity-link {
   color: var(--color-links) !important;
-  text-decoration: none;
+  text-decoration: none !important;
   word-break: break-word;
   cursor: pointer;
   unicode-bidi: initial;
 
   &:hover, &:active, &:visited {
-    color: var(--color-links-hover) !important;
+    text-decoration: underline !important;
-    text-decoration: underline;
   }
 }
 

src/components/ui/ListItem.scss

@@ -151,7 +151,7 @@
     }
 
     .ListItem-button {
-      padding: .5625rem .6975rem .5625rem .5625rem;
+      padding: .5625rem;
     }
 
     .Avatar {

src/components/ui/SearchInput.scss

@@ -1,12 +1,11 @@
 .SearchInput {
   position: relative;
   width: 100%;
-  color: rgba(var(--color-text-secondary-rgb), 0.85);
+  color: rgba(var(--color-text-secondary-rgb), 0.5);
-  background-color: var(--color-background-search);
+  background-color: var(--color-chat-hover);
   border: 2px solid var(--color-chat-hover);
   border-radius: 1.375rem;
   transition: border-color 0.15s ease;
-  --color-placeholders: rgba(var(--color-text-secondary-rgb), 0.85);
 
   &.with-picker-item {
     display: flex;
@@ -46,7 +45,7 @@
     border-radius: 1.375rem;
     background-color: transparent !important;
     box-shadow: none !important;
-    padding: calc(0.4375rem - var(--border-width)) calc(2.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(2.625rem - var(--border-width));
+    padding: calc(0.4375rem - var(--border-width)) calc(2.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(2.75rem - var(--border-width));
 
     &::placeholder {
       color: var(--color-placeholders);
@@ -57,7 +56,7 @@
     position: absolute;
     top: .5rem;
     left: .75rem;
-    font-size: 1.5rem;
+    font-size: 1.375rem;
   }
 
   .Loading {

src/styles/_variables.scss

@@ -13,15 +13,15 @@
   @return rgb($bm-red, $bm-green, $bm-blue);
 }
 
-$color-primary: #268EE9;
+$color-primary: #3390EC;
 
-$color-links: #00468D;
+$color-links: #3390EC;
 
 $color-placeholders: #A2ACB4;
 
-$color-text-green: #45AF54;
+$color-text-green: #4FAE4E;
 $color-green: #00C73E;
-$color-light-green: #EDFFDF;
+$color-light-green: #EEFFDE;
 
 $color-error: #e53935;
 
@@ -41,7 +41,7 @@ $color-borders: #DADCE0;
 $color-dividers: #C8C6CC;
 $color-item-active: #ededed;
 $color-chat-hover: #f4f4f5;
-$color-chat-active: #5B90E0;
+$color-chat-active: #3390EC;
 $color-selection: #3993fb;
 
 // https://github.com/telegramdesktop/tdesktop/wiki/Theme-Reference#user-content-standard-color-constants
@@ -60,7 +60,6 @@ $color-user-8: #faa774;
   --color-background: #{$color-white};
   --color-background-selected: #f4f4f5;
   --color-background-secondary: #f4f4f5;
-  --color-background-search: #{$color-white};
   --color-background-secondary-accent: #E4E4E5;
   --color-background-own: #{$color-light-green};
   --color-background-own-selected: #{darken($color-light-green, 10%)};
@@ -103,9 +102,6 @@ $color-user-8: #faa774;
   --color-yellow: #{$color-yellow};
 
   --color-links: #{$color-links};
-  --color-links-hover: #{darken($color-links, 8%)};
-  --color-links-darker: #{darken($color-links, 15%)};
-  --color-links-darker-hover: #{darken($color-links, 23%)};
 
   --color-own-links: #{$color-white};
 
@@ -126,9 +122,9 @@ $color-user-8: #faa774;
   --color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)};
   --color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};
 
-  --color-background-own-apple: #E7FDCC;
+  --color-background-own-apple: #DCF8C5;
-  --color-reply-own-hover-apple: #d9f9c1;
+  --color-reply-own-hover-apple: #cbefb7;
-  --color-reply-own-active-apple: #d5edc2;
+  --color-reply-own-active-apple: #bae6a8;
 
   --color-white: #{$color-white};
   --color-gray: #{$color-gray};

src/styles/themes.json

@@ -1,17 +1,16 @@
 {
-  "--color-primary": ["#268EE9", "#8872DE"],
+  "--color-primary": ["#3390EC", "#8774E1"],
   "--color-primary-opacity": ["#50A2E980", "#8378DB80"],
   "--color-primary-shade": ["#4a95d6", "#7b71c6"],
   "--color-background": ["#FFFFFF", "#212121"],
-  "--color-background-search": ["#FFFFFF", "#0F0F0F"],
   "--color-background-secondary": ["#f4f4f5", "#0F0F0F"],
   "--color-background-secondary-accent": ["#E4E4E5", "#100f10"],
-  "--color-background-own": ["#EDFFDF", "#8872DE"],
+  "--color-background-own": ["#EEFFDE", "#8774E1"],
-  "--color-background-own-apple": ["#E7FDCC", "#8872DE"],
+  "--color-background-own-apple": ["#DCF8C5", "#8774E1"],
   "--color-background-selected": ["#F4F4F5", "#2C2C2C"],
   "--color-background-own-selected": ["#d0ffac", "#6549d4"],
   "--color-chat-hover": ["#F4F4F5", "#2C2C2C"],
-  "--color-chat-active": ["#4C90E6", "#8378DB"],
+  "--color-chat-active": ["#3390EC", "#8774E1"],
   "--color-item-active": ["#ededed", "#292929"],
   "--color-text": ["#000000", "#FFFFFF"],
   "--color-text-secondary": ["#707579", "#AAAAAA"],
@@ -19,24 +18,23 @@
   "--color-borders": ["#DADCE0", "#303030"],
   "--color-borders-input": ["#DADCE0", "#5B5B5A"],
   "--color-dividers": ["#C8C6CC", "#404040"],
-  "--color-links": ["#00468D", "#977CFB"],
+  "--color-links": ["#3390EC", "#8774E1"],
-  "--color-links-hover": ["#003264", "#7854fa"],
   "--color-gray": ["#C4C9CC", "#717579"],
   "--color-pinned": ["#C4C9CC", "#707579"],
   "--color-default-shadow": ["#72727240", "#1010109c"],
   "--color-light-shadow": ["#7272722B", "#00000040"],
-  "--color-green": ["#00C73E", "#8872DE"],
+  "--color-green": ["#00C73E", "#8774E1"],
   "--color-text-meta-colored": ["#4DCD5E", "#8378DB"],
   "--color-reply-hover": ["#F4F4F4", "#272727"],
   "--color-reply-active": ["#E8E9E9", "#2E2F2F"],
   "--color-reply-own-hover": ["#D9F5CE", "#7d6bca"],
-  "--color-reply-own-hover-apple": ["#d9f9c1", "#7d6bca"],
+  "--color-reply-own-hover-apple": ["#cbefb7", "#7d6bca"],
   "--color-reply-own-active": ["#C5ECBE", "#7264b6"],
-  "--color-reply-own-active-apple": ["#d5edc2", "#7264b6"],
+  "--color-reply-own-active-apple": ["#bae6a8", "#7264b6"],
   "--color-accent-own": ["#45AF54", "#FFFFFF"],
   "--color-message-meta-own": ["#4FAE4EFF", "#FFFFFF88"],
-  "--color-own-links": ["#19498A", "#FFFFFF"],
+  "--color-own-links": ["#3390EC", "#FFFFFF"],
-  "--color-code": ["#4a729a", "#93c4ef"],
+  "--color-code": ["#4a729a", "#8774E1"],
   "--color-code-own": ["#3c7940", "#FFFFFF"],
   "--color-code-bg": ["#70757914", "#ffffff26"],
   "--color-code-own-bg": ["#70757914", "#ffffff26"]