Fix #8497: Scale VPN menu button icon correctly (#8506)

brave · Nov 30, 2023 · 06a0f2c · 06a0f2c
1 parent 40fd7f6
commit 06a0f2c
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/Sources/Brave/Frontend/Browser/Toolbars/BottomToolbar/Menu/VPNMenuButton.swift b/Sources/Brave/Frontend/Browser/Toolbars/BottomToolbar/Menu/VPNMenuButton.swift
@@ -32,6 +32,8 @@ struct VPNMenuButton: View {
   @State private var isVPNStatusChanging: Bool = BraveVPN.reconnectPending
   @State private var isVPNEnabled = BraveVPN.isConnected
   @State private var isErrorShowing: Bool = false
+
+  @ScaledMetric private var iconSize: CGFloat = 32.0
 
   private var isVPNEnabledBinding: Binding<Bool> {
     Binding(
@@ -126,7 +128,7 @@ struct VPNMenuButton: View {
     HStack(spacing: 14) {
       Image(braveSystemName: retryStateActive ? "leo.warning.triangle-filled" : "leo.product.vpn")
         .font(.body)
-        .frame(width: 32, height: 32)
+        .frame(width: iconSize, height: iconSize)
         .foregroundColor(retryStateActive ? Color(.braveErrorLabel) : Color(.braveLabel))
         .background(
           RoundedRectangle(cornerRadius: 8, style: .continuous)