Some designing questions for a custom widget

[e36Alex (Alexander)]

Hello,

i need some help designing a custom widget. It would be great, if i could get some help here.

This is the actual version of my little widget:

uid: widget_lights
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Apr 20, 2021, 6:30:50 PM
component: f7-block
config: {}
slots:
  default:
    - component: f7-row
      config:
        style:
          gap: 10px
          margin-left: -10px
          margin-right: -10px
      slots:
        default:
          - component: oh-repeater
            config:
              for: item
              sourceType: itemsInGroup
              groupItem: Home_Licht
              fragment: true
              fetchMetadata: altTitle
            slots:
              default:
                - component: oh-button
                  config:
                    text: =loop.item.metadata.altTitle.config.title
                    action: group
                    actionGroupPopupItem: =loop.item.name
                    raised: true
                    style:
                      background: '=(loop.item.state === "ON") ? "#ffe57f" : "var(--f7-card-bg-color)"'
                      color: var(--f7-card-color)
                    class:
                      - col-50
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: lightbulb

Desktop:

Mobile:

1. Change order of icon
I would like to have the icon at the left side of the text. When i change the order of the components, the icon is shown outsite the button and i didnt find a text component that i can use.

2. Gap between rows
At the desktop view the gap between the rows is fine, but at mobile view the gap gets lost somehow and i dont have an idea how to handle that.

3. Size of the icon/button
At the desktop view the icon size looks fine, but at mobile view the icon touches the border of the button. I would like to get the button to the same height/styling like the list items above.
Can i reuse some classes e.g. for that?

4. Button active color in dark mode
For day mode i copied the color code from a card widget, so in dark mode it doesnt switch to the dark mode color like the card widgets. Can i reuse the class (where can i get it?) for the active state?

Thanks in advance for your help!