system/ui: network widget improvements (#35284)

* larger font size for confirmation dialog

* try this

* forget btn color

* text color

* font size

* caps

* Revert "caps"

This reverts commit a3e6cfbf05.

* too much

* fixme

* do that?

* keyboard: reset state on clear

system/ui/lib/button.py

@@ -8,6 +8,7 @@ class ButtonStyle(IntEnum):
   PRIMARY = 1  # For main actions
   DANGER = 2  # For critical actions, like reboot or delete
   TRANSPARENT = 3  # For buttons with transparent background and border
+  ACTION = 4
 
 
 class TextAlignment(IntEnum):
@@ -20,6 +21,8 @@ ICON_PADDING = 15
 DEFAULT_BUTTON_FONT_SIZE = 60
 BUTTON_ENABLED_TEXT_COLOR = rl.Color(228, 228, 228, 255)
 BUTTON_DISABLED_TEXT_COLOR = rl.Color(228, 228, 228, 51)
+ACTION_BUTTON_FONT_SIZE = 48
+ACTION_BUTTON_TEXT_COLOR = rl.Color(0, 0, 0, 255)
 
 
 BUTTON_BACKGROUND_COLORS = {
@@ -27,6 +30,7 @@ BUTTON_BACKGROUND_COLORS = {
   ButtonStyle.PRIMARY: rl.Color(70, 91, 234, 255),
   ButtonStyle.DANGER: rl.Color(255, 36, 36, 255),
   ButtonStyle.TRANSPARENT: rl.BLACK,
+  ButtonStyle.ACTION: rl.Color(189, 189, 189, 255),
 }
 
 BUTTON_PRESSED_BACKGROUND_COLORS = {
@@ -34,6 +38,7 @@ BUTTON_PRESSED_BACKGROUND_COLORS = {
   ButtonStyle.PRIMARY: rl.Color(48, 73, 244, 255),
   ButtonStyle.DANGER: rl.Color(255, 36, 36, 255),
   ButtonStyle.TRANSPARENT: rl.BLACK,
+  ButtonStyle.ACTION: rl.Color(130, 130, 130, 255),
 }
 
 
@@ -47,13 +52,16 @@ def gui_button(
   border_radius: int = 10,  # Corner rounding in pixels
   text_alignment: TextAlignment = TextAlignment.CENTER,
   text_padding: int = 20,  # Padding for left/right alignment
-  icon = None,
+  icon=None,
 ) -> int:
   result = 0
 
   if button_style in (ButtonStyle.PRIMARY, ButtonStyle.DANGER) and not is_enabled:
     button_style = ButtonStyle.NORMAL
 
+  if button_style == ButtonStyle.ACTION and font_size == DEFAULT_BUTTON_FONT_SIZE:
+    font_size = ACTION_BUTTON_FONT_SIZE
+
   # Set background color based on button type
   bg_color = BUTTON_BACKGROUND_COLORS[button_style]
   if is_enabled and rl.check_collision_point_rec(rl.get_mouse_position(), rect):
@@ -105,7 +113,7 @@ def gui_button(
 
   # Draw the button text if any
   if text:
-    text_color = BUTTON_ENABLED_TEXT_COLOR if is_enabled else BUTTON_DISABLED_TEXT_COLOR
+    text_color = ACTION_BUTTON_TEXT_COLOR if button_style == ButtonStyle.ACTION else BUTTON_ENABLED_TEXT_COLOR if is_enabled else BUTTON_DISABLED_TEXT_COLOR
     rl.draw_text_ex(font, text, text_pos, font_size, 0, text_color)
 
   return result

system/ui/widgets/confirm_dialog.py

@@ -34,6 +34,7 @@ def confirm_dialog(message: str, confirm_text: str, cancel_text: str = "Cancel")
   gui_text_box(
     text_rect,
     message,
+    font_size=88,
     alignment=rl.GuiTextAlignment.TEXT_ALIGN_CENTER,
     alignment_vertical=rl.GuiTextAlignmentVertical.TEXT_ALIGN_MIDDLE,
   )

system/ui/widgets/keyboard.py

@@ -77,6 +77,8 @@ class Keyboard:
     return self._input_box.text
 
   def clear(self):
+    self._layout_name = "lowercase"
+    self._caps_lock = False
     self._input_box.clear()
 
   def render(self, title: str, sub_title: str):

system/ui/widgets/network.py

@@ -3,7 +3,7 @@ from typing import Literal
 
 import pyray as rl
 from openpilot.system.ui.lib.application import gui_app
-from openpilot.system.ui.lib.button import gui_button
+from openpilot.system.ui.lib.button import ButtonStyle, gui_button
 from openpilot.system.ui.lib.label import gui_label
 from openpilot.system.ui.lib.scroll_panel import GuiScrollPanel
 from openpilot.system.ui.lib.wifi_manager import NetworkInfo, WifiManagerCallbacks, WifiManagerWrapper, SecurityType
@@ -134,7 +134,7 @@ class WifiManagerUI:
 
     if status_text:
       status_text_rect = rl.Rectangle(security_icon_rect.x - 410, rect.y, 410, ITEM_HEIGHT)
-      rl.gui_label(status_text_rect, status_text)
+      gui_label(status_text_rect, status_text, font_size=48, alignment=rl.GuiTextAlignment.TEXT_ALIGN_CENTER)
     else:
       # If the network is saved, show the "Forget" button
       if network.is_saved:
@@ -143,7 +143,7 @@ class WifiManagerUI:
           self.btn_width,
           80,
         )
-        if isinstance(self.state, StateIdle) and gui_button(forget_btn_rect, "Forget") and clicked:
+        if isinstance(self.state, StateIdle) and gui_button(forget_btn_rect, "Forget", button_style=ButtonStyle.ACTION) and clicked:
           self.state = StateShowForgetConfirm(network)
 
     self._draw_status_icon(security_icon_rect, network)
@@ -152,7 +152,7 @@ class WifiManagerUI:
     if isinstance(self.state, StateIdle) and rl.check_collision_point_rec(rl.get_mouse_position(), ssid_rect) and clicked:
       if not network.is_saved:
         self.state = StateNeedsAuth(network)
-      else:
+      elif not network.is_connected:
         self.connect_to_network(network)
 
   def _draw_status_icon(self, rect, network: NetworkInfo):