Updated VPN toolbar button style

fix brave/brave-browser#30930
brave · Jun 9, 2023 · b65ca45 · b65ca45
1 parent 6f99c7b
commit b65ca45
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 36 deletions.
diff --git a/browser/ui/color/brave_color_id.h b/browser/ui/color/brave_color_id.h
@@ -66,8 +66,8 @@
 #if BUILDFLAG(ENABLE_BRAVE_VPN)
 #define BRAVE_VPN_COLOR_IDS                        \
     E_CPONLY(kColorBraveVpnButtonErrorBorder)      \
-    E_CPONLY(kColorBraveVpnButtonTextConnected)    \
-    E_CPONLY(kColorBraveVpnButtonTextDisconnected) \
+    E_CPONLY(kColorBraveVpnButtonBorder)           \
+    E_CPONLY(kColorBraveVpnButtonText)    \
     E_CPONLY(kColorBraveVpnButtonTextError)    \
     E_CPONLY(kColorBraveVpnButtonIconConnected)    \
     E_CPONLY(kColorBraveVpnButtonIconDisconnected) \

diff --git a/browser/ui/color/brave_color_mixer.cc b/browser/ui/color/brave_color_mixer.cc
@@ -60,7 +60,6 @@ SkColor PickColorContrastingToToolbar(const ui::ColorProviderManager::Key& key,
 }
 
 #if BUILDFLAG(ENABLE_BRAVE_VPN)
-// If |exception_for_red| is true, pick contrast color for red toolbar color.
 SkColor PickSimilarColorToToolbar(const ui::ColorProviderManager::Key& key,
                                   const ui::ColorMixer& mixer,
                                   SkColor light_theme_color,
@@ -82,36 +81,38 @@ void AddBraveVpnColorMixer(ui::ColorProvider* provider,
                            const ui::ColorProviderManager::Key& key) {
   ui::ColorMixer& mixer = provider->AddMixer();
 
-  mixer[kColorBraveVpnButtonTextConnected] = {
+  mixer[kColorBraveVpnButtonText] = {
       PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0x1C, 0x1E, 0x26),
                                     SkColorSetRGB(0xED, 0xEE, 0xF1))};
-  mixer[kColorBraveVpnButtonTextDisconnected] = {
+  mixer[kColorBraveVpnButtonTextError] = {
       PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0xDC, 0x1D, 0x3C),
                                     SkColorSetRGB(0xEB, 0x63, 0x7A))};
-  mixer[kColorBraveVpnButtonTextError] = {kColorBraveVpnButtonTextDisconnected};
-  mixer[kColorBraveVpnButtonErrorBorder] = {
-      kColorBraveVpnButtonTextDisconnected};
-  mixer[kColorBraveVpnButtonIconDisconnected] = {
-      kColorBraveVpnButtonTextDisconnected};
-  mixer[kColorBraveVpnButtonIconError] = {kColorBraveVpnButtonIconDisconnected};
+
+  mixer[kColorBraveVpnButtonBorder] = {PickSimilarColorToToolbar(
+      key, mixer, SkColorSetARGB(0x14, 0x13, 0x16, 0x20),
+      SkColorSetARGB(0x4D, 0x04, 0x04, 0x06))};
+  mixer[kColorBraveVpnButtonErrorBorder] = {kColorBraveVpnButtonTextError};
+
   mixer[kColorBraveVpnButtonIconConnected] = {SkColorSetRGB(0x3F, 0xA4, 0x50)};
+  mixer[kColorBraveVpnButtonIconDisconnected] = {PickColorContrastingToToolbar(
+      key, mixer, SkColorSetARGB(0x99, 0x0B, 0x16, 0x41),
+      SkColorSetARGB(0xCC, 0xB1, 0xB7, 0xCD))};
+  mixer[kColorBraveVpnButtonIconInner] = {PickSimilarColorToToolbar(
+      key, mixer, SK_ColorWHITE, SkColorSetARGB(0x33, 0x04, 0x04, 0x06))};
+  mixer[kColorBraveVpnButtonIconError] = {kColorBraveVpnButtonErrorBorder};
+  mixer[kColorBraveVpnButtonIconErrorInner] = {PickSimilarColorToToolbar(
+      key, mixer, SK_ColorWHITE, SkColorSetRGB(0x0F, 0x17, 0x2A))};
 
-  mixer[kColorBraveVpnButtonBackgroundNormal] = {PickSimilarColorToToolbar(
-      key, mixer, SkColorSetARGB(0x0D, 0x13, 0x16, 0x20),
-      SkColorSetARGB(0x59, 0x0A, 0x0B, 0x10))};
+  mixer[kColorBraveVpnButtonBackgroundNormal] = {kColorToolbar};
   mixer[kColorBraveVpnButtonBackgroundHover] = {PickSimilarColorToToolbar(
       key, mixer, SkColorSetARGB(0x14, 0x13, 0x16, 0x20),
-      SkColorSetARGB(0x80, 0x0A, 0x0B, 0x10))};
+      SkColorSetARGB(0x4D, 0x04, 0x04, 0x06))};
   mixer[kColorBraveVpnButtonErrorBackgroundNormal] = {PickSimilarColorToToolbar(
       key, mixer, SkColorSetARGB(0x31, 0xDC, 0x1D, 0x3C),
       SkColorSetARGB(0x33, 0xEB, 0x63, 0x7A))};
   mixer[kColorBraveVpnButtonErrorBackgroundHover] = {PickSimilarColorToToolbar(
       key, mixer, SkColorSetARGB(0x40, 0xDC, 0x1D, 0x3C),
       SkColorSetARGB(0x40, 0xEB, 0x63, 0x7A))};
-  mixer[kColorBraveVpnButtonIconInner] = {
-      PickSimilarColorToToolbar(key, mixer, SK_ColorWHITE, SK_ColorBLACK)};
-  mixer[kColorBraveVpnButtonIconErrorInner] = {PickSimilarColorToToolbar(
-      key, mixer, SK_ColorWHITE, SkColorSetRGB(0x0F, 0x17, 0x2A))};
 }
 #endif
 

diff --git a/browser/ui/views/toolbar/brave_vpn_button.cc b/browser/ui/views/toolbar/brave_vpn_button.cc
@@ -29,6 +29,7 @@
 #include "ui/base/models/simple_menu_model.h"
 #include "ui/compositor/layer.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/color_utils.h"
 #include "ui/gfx/geometry/rect_f.h"
 #include "ui/gfx/geometry/rrect_f.h"
 #include "ui/gfx/paint_vector_icon.h"
@@ -221,19 +222,16 @@ void BraveVPNButton::UpdateColorsAndInsets() {
   const bool is_connected = IsConnected();
   const gfx::Insets paint_insets =
       gfx::Insets((height() - GetLayoutConstant(LOCATION_BAR_HEIGHT)) / 2);
+  const auto bg_color =
+      cp->GetColor(is_connect_error ? kColorBraveVpnButtonErrorBackgroundNormal
+                                    : kColorBraveVpnButtonBackgroundNormal);
   SetBackground(views::CreateBackgroundFromPainter(
-      views::Painter::CreateSolidRoundRectPainter(
-          cp->GetColor(is_connect_error
-                           ? kColorBraveVpnButtonErrorBackgroundNormal
-                           : kColorBraveVpnButtonBackgroundNormal),
-          kButtonRadius, paint_insets)));
-  label()->SetBackgroundColor(
-      cp->GetColor(kColorBraveVpnButtonBackgroundNormal));
-
-  SetEnabledTextColors(
-      cp->GetColor(is_connected       ? kColorBraveVpnButtonTextConnected
-                   : is_connect_error ? kColorBraveVpnButtonTextError
-                                      : kColorBraveVpnButtonTextDisconnected));
+      views::Painter::CreateSolidRoundRectPainter(bg_color, kButtonRadius,
+                                                  paint_insets)));
+
+  SetEnabledTextColors(cp->GetColor(is_connect_error
+                                        ? kColorBraveVpnButtonTextError
+                                        : kColorBraveVpnButtonText));
 
   if (is_connect_error) {
     SetImage(
@@ -258,15 +256,19 @@ void BraveVPNButton::UpdateColorsAndInsets() {
         cp->GetColor(kColorBraveVpnButtonIconInner), 5 /*radi*/, 2 /*thick*/));
   }
 
+  // Compute highlight color and border in advance. If not, highlight color and
+  // border color are mixed as both have alpha value.
   // Use different ink drop hover color for each themes.
-  views::InkDrop::Get(this)->SetBaseColor(
+  views::InkDrop::Get(this)->SetBaseColor(color_utils::GetResultingPaintColor(
       cp->GetColor(is_connect_error ? kColorBraveVpnButtonErrorBackgroundHover
-                                    : kColorBraveVpnButtonBackgroundHover));
+                                    : kColorBraveVpnButtonBorder),
+      bg_color));
 
   // Draw border only for error state.
-  SetBorder(GetBorder(is_connect_error
-                          ? cp->GetColor(kColorBraveVpnButtonErrorBorder)
-                          : SK_ColorTRANSPARENT));
+  SetBorder(GetBorder(color_utils::GetResultingPaintColor(
+      cp->GetColor(is_connect_error ? kColorBraveVpnButtonErrorBorder
+                                    : kColorBraveVpnButtonBorder),
+      bg_color)));
 }
 
 std::u16string BraveVPNButton::GetTooltipText(const gfx::Point& p) const {