[Design] Update colors (#1435)

src/components/common/ProfileInfo.scss

@@ -44,12 +44,12 @@
   .photo-dash {
     flex: 1 1 auto;
     background-color: var(--color-white);
-    opacity: .5;
+    opacity: .25;
     border-radius: .125rem;
     margin: 0 .125rem;
 
     &.current {
-      opacity: 1;
+      opacity: .75;
     }
   }
 

src/components/middle/composer/Composer.scss

@@ -32,6 +32,7 @@
   > .Button {
     flex-shrink: 0;
     margin-left: .5rem;
+    color: var(--color-text-secondary);
 
     @media (max-width: 600px) {
       width: 2.875rem;

src/components/middle/composer/Composer.tsx

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

src/components/ui/SearchInput.scss

@@ -1,11 +1,12 @@
 .SearchInput {
   position: relative;
   width: 100%;
-  color: rgba(var(--color-text-secondary-rgb), 0.5);
+  color: rgba(var(--color-text-secondary-rgb), 0.85);
-  background-color: var(--color-chat-hover);
+  background-color: var(--color-background-search);
   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;

src/styles/_variables.scss

@@ -13,15 +13,15 @@
   @return rgb($bm-red, $bm-green, $bm-blue);
 }
 
-$color-primary: #50a2e9;
+$color-primary: #268EE9;
 
-$color-links: #52a1ef;
+$color-links: #00468D;
 
 $color-placeholders: #A2ACB4;
 
-$color-text-green: #4fae4e;
+$color-text-green: #45AF54;
-$color-green: #4dcd5e;
+$color-green: #00C73E;
-$color-light-green: #eefedf;
+$color-light-green: #EDFFDF;
 
 $color-error: #e53935;
 
@@ -60,6 +60,7 @@ $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%)};

src/styles/themes.json

@@ -1,14 +1,15 @@
 {
-  "--color-primary": ["#50A2E9", "#8378DB"],
+  "--color-primary": ["#268EE9", "#8872DE"],
   "--color-primary-opacity": ["#50A2E980", "#8378DB80"],
   "--color-primary-shade": ["#4a95d6", "#7b71c6"],
   "--color-background": ["#FFFFFF", "#212121"],
-  "--color-background-secondary": ["#f4f4f5", "#121212"],
+  "--color-background-search": ["#FFFFFF", "#0F0F0F"],
+  "--color-background-secondary": ["#f4f4f5", "#0F0F0F"],
   "--color-background-secondary-accent": ["#E4E4E5", "#100f10"],
-  "--color-background-own": ["#EEFEDF", "#8378DB"],
+  "--color-background-own": ["#EDFFDF", "#8872DE"],
-  "--color-background-own-apple": ["#E7FDCC", "#8378DB"],
+  "--color-background-own-apple": ["#E7FDCC", "#8872DE"],
   "--color-background-selected": ["#F4F4F5", "#2C2C2C"],
-  "--color-background-own-selected": ["#d4fcae", "#7b71c6"],
+  "--color-background-own-selected": ["#d0ffac", "#6549d4"],
   "--color-chat-hover": ["#F4F4F5", "#2C2C2C"],
   "--color-chat-active": ["#4C90E6", "#8378DB"],
   "--color-item-active": ["#ededed", "#292929"],
@@ -18,23 +19,23 @@
   "--color-borders": ["#DADCE0", "#303030"],
   "--color-borders-input": ["#DADCE0", "#5B5B5A"],
   "--color-dividers": ["#C8C6CC", "#404040"],
-  "--color-links": ["#52A1EF", "#868DF6"],
+  "--color-links": ["#00468D", "#977CFB"],
-  "--color-links-hover": ["#2d8dec", "#6b5fcc"],
+  "--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": ["#4DCD5E", "#8378DB"],
+  "--color-green": ["#00C73E", "#8872DE"],
   "--color-text-meta-colored": ["#4DCD5E", "#8378DB"],
   "--color-reply-hover": ["#F4F4F4", "#272727"],
   "--color-reply-active": ["#E8E9E9", "#2E2F2F"],
-  "--color-reply-own-hover": ["#DBF4CE", "#6458bc"],
+  "--color-reply-own-hover": ["#D9F5CE", "#7d6bca"],
-  "--color-reply-own-hover-apple": ["#d9f9c1", "#6458bc"],
+  "--color-reply-own-hover-apple": ["#d9f9c1", "#7d6bca"],
-  "--color-reply-own-active": ["#C8EBBC", "#4F4A9F"],
+  "--color-reply-own-active": ["#C5ECBE", "#7264b6"],
-  "--color-reply-own-active-apple": ["#d5edc2", "#4F4A9F"],
+  "--color-reply-own-active-apple": ["#d5edc2", "#7264b6"],
-  "--color-accent-own": ["#4FAE4E", "#FFFFFF"],
+  "--color-accent-own": ["#45AF54", "#FFFFFF"],
   "--color-message-meta-own": ["#4FAE4EFF", "#FFFFFF88"],
-  "--color-own-links": ["#52A1EF", "#FFFFFF"],
+  "--color-own-links": ["#19498A", "#FFFFFF"],
   "--color-code": ["#4a729a", "#93c4ef"],
   "--color-code-own": ["#3c7940", "#FFFFFF"],
   "--color-code-bg": ["#70757914", "#ffffff26"],