apps/managment/wipe: style btns and elements

src/apps/management/wipe_device.py

@@ -8,10 +8,13 @@ async def layout_wipe_device(ctx, msg):
     from ..common import storage
 
     await hold_to_confirm(ctx, Text(
-        'WIPE DEVICE',
+        'Wipe device',
         ui.ICON_WIPE,
         ui.NORMAL, 'Do you really want to', 'wipe the device?',
-        ui.NORMAL, '', 'All data will be lost.'))
+        ui.NORMAL, '', 'All data will be lost.',
+        icon_color=ui.RED),
+        button_style=ui.BTN_CANCEL,
+        loader_style=ui.LDR_DANGER)
 
     storage.wipe()
 

src/trezor/ui/__init__.py

@@ -112,7 +112,7 @@ def header(title: str,
            bg: int=BG,
            ifg: int=BG):
     if icon is not None:
-        display.icon(14, 18, res.load(icon), ifg, bg)
+        display.icon(14, 16, res.load(icon), ifg, bg)
     display.text(44, 35, title, BOLD, fg, bg)
 
 

src/trezor/ui/button.py

@@ -21,16 +21,12 @@ BORDER = const(4)  # border size in pixels
 
 class Button(Widget):
 
-    def __init__(self, area, content,
-                 normal_style=None,
-                 active_style=None,
-                 disabled_style=None,
-                 absolute=False):
+    def __init__(self, area, content, style=ui.BTN_KEY, absolute=False):
         self.area = area
         self.content = content
-        self.normal_style = normal_style or ui.BTN_KEY
-        self.active_style = active_style or ui.BTN_KEY_ACTIVE
-        self.disabled_style = disabled_style or ui.BTN_KEY_DISABLED
+        self.normal_style = style['normal'] or ui.BTN_KEY['normal']
+        self.active_style = style['active'] or ui.BTN_KEY['active']
+        self.disabled_style = style['disabled'] or ui.BTN_KEY['disabled']
         self.absolute = absolute
         self.state = BTN_DIRTY
 

src/trezor/ui/confirm.py

@@ -1,8 +1,7 @@
 from micropython import const
-from trezor import loop
-from trezor import ui, res
+from trezor import loop, res, ui
 from trezor.ui import Widget
-from trezor.ui.button import Button, BTN_CLICKED, BTN_STARTED, BTN_ACTIVE
+from trezor.ui.button import BTN_ACTIVE, BTN_CLICKED, BTN_STARTED, Button
 from trezor.ui.loader import Loader
 
 CONFIRMED = const(1)
@@ -16,16 +15,13 @@ class ConfirmDialog(Widget):
     def __init__(self, content, confirm=DEFAULT_CONFIRM, cancel=DEFAULT_CANCEL):
         self.content = content
         if cancel is not None:
-            self.confirm = Button(ui.grid(9, n_x=2), confirm,
-                                  normal_style=ui.BTN_CONFIRM,
-                                  active_style=ui.BTN_CONFIRM_ACTIVE)
-            self.cancel = Button(ui.grid(8, n_x=2), cancel,
-                                 normal_style=ui.BTN_CANCEL,
-                                 active_style=ui.BTN_CANCEL_ACTIVE)
+            self.confirm = Button(
+                ui.grid(9, n_x=2), confirm, style=ui.BTN_CONFIRM)
+            self.cancel = Button(
+                ui.grid(8, n_x=2), cancel, style=ui.BTN_CANCEL)
         else:
-            self.confirm = Button(ui.grid(4, n_x=1), confirm,
-                                  normal_style=ui.BTN_CONFIRM,
-                                  active_style=ui.BTN_CONFIRM_ACTIVE)
+            self.confirm = Button(
+                ui.grid(4, n_x=1), confirm, style=ui.BTN_CONFIRM)
             self.cancel = None
 
     def render(self):
@@ -50,12 +46,14 @@ _STOPPED = const(-2)
 
 class HoldToConfirmDialog(Widget):
 
-    def __init__(self, content, hold='Hold to confirm', *args, **kwargs):
+    def __init__(self,
+                 content,
+                 hold='Hold to confirm',
+                 button_style=ui.BTN_CONFIRM,
+                 loader_style=ui.LDR_DEFAULT):
         self.content = content
-        self.button = Button(ui.grid(4, n_x=1), hold,
-                             normal_style=ui.BTN_CONFIRM,
-                             active_style=ui.BTN_CONFIRM_ACTIVE)
-        self.loader = Loader(*args, **kwargs)
+        self.button = Button(ui.grid(4, n_x=1), hold, style=button_style)
+        self.loader = Loader(style=loader_style)
 
     def render(self):
         self.button.render()

src/trezor/ui/keyboard.py

@@ -6,10 +6,10 @@ from trezor.ui.button import Button, BTN_CLICKED, ICON
 
 def key_buttons():
     keys = ['abc', 'def', 'ghi', 'jkl', 'mno', 'pqr', 'stu', 'vwx', 'yz']
-    return [Button(ui.grid(i + 3, n_y=4), k,
-                   normal_style=ui.BTN_KEY,
-                   active_style=ui.BTN_KEY_ACTIVE,
-                   disabled_style=ui.BTN_KEY_DISABLED) for i, k in enumerate(keys)]
+    return [
+        Button(ui.grid(i + 3, n_y=4), k, style=ui.BTN_KEY)
+        for i, k in enumerate(keys)
+    ]
 
 
 def compute_mask(text: str) -> int:
@@ -30,19 +30,19 @@ class Input(Button):
         self.pending = False
 
     def edit(self, content: str, word: str, pending: bool):
-        self.content = content
         self.word = word
+        self.content = content
         self.pending = pending
         self.taint()
         if content == word:  # confirm button
             self.enable()
-            self.normal_style = ui.BTN_CONFIRM
-            self.active_style = ui.BTN_CONFIRM_ACTIVE
+            self.normal_style = ui.BTN_CONFIRM['normal']
+            self.active_style = ui.BTN_CONFIRM['active']
             self.icon = ui.ICON_CONFIRM
         elif word:  # auto-complete button
             self.enable()
-            self.normal_style = ui.BTN_KEY
-            self.active_style = ui.BTN_KEY_ACTIVE
+            self.normal_style = ui.BTN_KEY['normal']
+            self.active_style = ui.BTN_KEY['active']
             self.icon = ui.ICON_CLICK
         else:  # disabled button
             self.disable()
@@ -83,8 +83,7 @@ class MnemonicKeyboard(ui.Widget):
         self.input = Input(ui.grid(1, n_x=4, n_y=4, cells_x=3), '', '')
         self.back = Button(ui.grid(0, n_x=4, n_y=4),
                            res.load(ui.ICON_BACK),
-                           normal_style=ui.BTN_CLEAR,
-                           active_style=ui.BTN_CLEAR_ACTIVE)
+                           style=ui.BTN_CLEAR)
         self.keys = key_buttons()
         self.pbutton = None  # pending key button
         self.pindex = 0  # index of current pending char in pbutton

src/trezor/ui/loader.py

@@ -7,11 +7,11 @@ from trezor import res
 
 class Loader(ui.Widget):
 
-    def __init__(self, target_ms=1000, normal_style=None, active_style=None):
+    def __init__(self, target_ms=1000, style=ui.LDR_DEFAULT):
         self.target_ms = target_ms
         self.start_ticks_ms = None
-        self.normal_style = normal_style or ui.LDR_DEFAULT
-        self.active_style = active_style or ui.LDR_DEFAULT_ACTIVE
+        self.normal_style = style['normal'] or ui.LDR_DEFAULT['normal']
+        self.active_style = style['active'] or ui.LDR_DEFAULT['active']
 
     def start(self):
         self.start_ticks_ms = utime.ticks_ms()

src/trezor/ui/style.py

@@ -60,100 +60,152 @@ ICON_SWIPE    = 'trezor/res/swipedown.toig'
 
 # buttons
 BTN_DEFAULT = {
-    'bg-color': BG,
-    'fg-color': FG,
-    'text-style': NORMAL,
-    'border-color': BG,
-    'radius': RADIUS,
-}
-BTN_DEFAULT_ACTIVE = {
-    'bg-color': FG,
-    'fg-color': BG,
-    'text-style': BOLD,
-    'border-color': FG,
-    'radius': RADIUS,
-}
-BTN_DEFAULT_DISABLED = {
-    'bg-color': BG,
-    'fg-color': GREY,
-    'text-style': NORMAL,
-    'border-color': BG,
-    'radius': RADIUS,
+    'normal': {
+        'bg-color': BG,
+        'fg-color': FG,
+        'text-style': NORMAL,
+        'border-color': BG,
+        'radius': RADIUS,
+    },
+    'active': {
+        'bg-color': FG,
+        'fg-color': BG,
+        'text-style': BOLD,
+        'border-color': FG,
+        'radius': RADIUS,
+    },
+    'disabled': {
+        'bg-color': BG,
+        'fg-color': GREY,
+        'text-style': NORMAL,
+        'border-color': BG,
+        'radius': RADIUS,
+    }
 }
+
 BTN_CANCEL = {
-    'bg-color': RED,
-    'fg-color': FG,
-    'text-style': BOLD,
-    'border-color': BG,
-    'radius': RADIUS,
-}
-BTN_CANCEL_ACTIVE = {
-    'bg-color': FG,
-    'fg-color': RED,
-    'text-style': BOLD,
-    'border-color': FG,
-    'radius': RADIUS,
+    'normal': {
+        'bg-color': RED,
+        'fg-color': FG,
+        'text-style': BOLD,
+        'border-color': BG,
+        'radius': RADIUS,
+    },
+    'active': {
+        'bg-color': FG,
+        'fg-color': RED,
+        'text-style': BOLD,
+        'border-color': FG,
+        'radius': RADIUS,
+    },
+    'disabled': {
+        'bg-color': BG,
+        'fg-color': GREY,
+        'text-style': NORMAL,
+        'border-color': BG,
+        'radius': RADIUS,
+    }
 }
+
 BTN_CONFIRM = {
-    'bg-color': GREEN,
-    'fg-color': FG,
-    'text-style': BOLD,
-    'border-color': BG,
-    'radius': RADIUS,
-}
-BTN_CONFIRM_ACTIVE = {
-    'bg-color': FG,
-    'fg-color': GREEN,
-    'text-style': BOLD,
-    'border-color': FG,
-    'radius': RADIUS,
+    'normal': {
+        'bg-color': GREEN,
+        'fg-color': FG,
+        'text-style': BOLD,
+        'border-color': BG,
+        'radius': RADIUS,
+    },
+    'active': {
+        'bg-color': FG,
+        'fg-color': GREEN,
+        'text-style': BOLD,
+        'border-color': FG,
+        'radius': RADIUS,
+    },
+    'disabled': {
+        'bg-color': BG,
+        'fg-color': GREY,
+        'text-style': NORMAL,
+        'border-color': BG,
+        'radius': RADIUS,
+    }
 }
+
 BTN_CLEAR = {
-    'bg-color': ORANGE,
-    'fg-color': FG,
-    'text-style': NORMAL,
-    'border-color': BG,
-    'radius': RADIUS,
-}
-BTN_CLEAR_ACTIVE = {
-    'bg-color': BG,
-    'fg-color': GREY,
-    'text-style': NORMAL,
-    'border-color': BG,
-    'radius': RADIUS,
+    'normal': {
+        'bg-color': ORANGE,
+        'fg-color': FG,
+        'text-style': NORMAL,
+        'border-color': BG,
+        'radius': RADIUS,
+    },
+    'active': {
+        'bg-color': BG,
+        'fg-color': GREY,
+        'text-style': NORMAL,
+        'border-color': BG,
+        'radius': RADIUS,
+    },
+    'disabled': {
+        'bg-color': BG,
+        'fg-color': GREY,
+        'text-style': MONO,
+        'border-color': BG,
+        'radius': RADIUS,
+    }
 }
+
 BTN_KEY = {
-    'bg-color': BLACKISH,
-    'fg-color': FG,
-    'text-style': MONO,
-    'border-color': BG,
-    'radius': RADIUS,
-}
-BTN_KEY_ACTIVE = {
-    'bg-color': FG,
-    'fg-color': BLACKISH,
-    'text-style': MONO,
-    'border-color': FG,
-    'radius': RADIUS,
-}
-BTN_KEY_DISABLED = {
-    'bg-color': BG,
-    'fg-color': GREY,
-    'text-style': MONO,
-    'border-color': BG,
-    'radius': RADIUS,
+    'normal': {
+        'bg-color': BLACKISH,
+        'fg-color': FG,
+        'text-style': MONO,
+        'border-color': BG,
+        'radius': RADIUS,
+    },
+    'active': {
+        'bg-color': FG,
+        'fg-color': BLACKISH,
+        'text-style': MONO,
+        'border-color': FG,
+        'radius': RADIUS,
+    },
+    'disabled': {
+        'bg-color': BG,
+        'fg-color': GREY,
+        'text-style': MONO,
+        'border-color': BG,
+        'radius': RADIUS,
+    }
 }
 
 # loader
 LDR_DEFAULT = {
-    'bg-color': BG,
-    'fg-color': GREEN,
-    'icon': None,
-    'icon-fg-color': None,
+    'normal': {
+        'bg-color': BG,
+        'fg-color': GREEN,
+        'icon': None,
+        'icon-fg-color': None,
+    },
+    'active': {
+        'bg-color': BG,
+        'fg-color': GREEN,
+        'icon': ICON_SEND,
+        'icon-fg-color': WHITE,
+    }
 }
-LDR_DEFAULT_ACTIVE = {
-    'bg-color': BG,
-    'fg-color': GREEN,
-    'icon': ICON_SEND,
-    'icon-fg-color': WHITE,
+
+LDR_DANGER = {
+    'normal': {
+        'bg-color': BG,
+        'fg-color': RED,
+        'icon': None,
+        'icon-fg-color': None,
+    },
+    'active': {
+        'bg-color': BG,
+        'fg-color': RED,
+        'icon': ICON_SEND,
+        'icon-fg-color': WHITE,
+    }
 }