Enhance buttons styling

[pawelru]

Feature description

As an example:
Convert this:

Into this:

Right now colourful and wide buttons are super eye-catching whereas this is the visualisation that should be the main point of interest. Please make it more "light" so that we would keep the hierarchy right.

Code of Conduct

• I agree to follow this project's Code of Conduct.

Contribution Guidelines

• I agree to follow this project's Contribution Guidelines.

Security Policy

• I agree to follow this project's Security Policy.

[Polkas]

This proposal is better for the users who already know this functionality. We have to be careful here.

[pawelru]

This proposal is better for the users who already know this functionality. We have to be careful here.

Yeah that's the goal. I think it's fair to assume that the teal app users would use it more than once few times therefore we can be less verbose explaining what a given button is doing. There is some learning and adaptation period required but after this it should be pretty straightforward. I do want to have a constant GUI throughout the lifecycle of that functionality - in particular not long labels for couple of months for adaptation and only then more minimal option.

[Polkas]

We have to remember that teal.reporter is design with the attitude of "a regular shiny user first".
I like your comment that as users are learning so the UI could change too.
Then we have to think about supporting two different UIs, the current more verbose and proposed by you.
It could be done very easily with an additional argument to the ui function of the module, like type = "verbose".

[pawelru]

We have to remember that teal.reporter is design with the attitude of "a regular shiny user first".

I like your comment that as users are learning so the UI could change too.

Then we have to think about supporting two different UIs, the current more verbose and proposed by you.

It could be done very easily with an additional argument to the ui function of the module, like type = "verbose".

Oh no! This is exactly something that I would like to avoid! We need to have one version only and the simpler the better.

[npaszty]

how about something like this

[Polkas]

This should be done by proper styling of the class for simpleReporter module, "simple-reporter-container" class.
WHen it is ready the simpleReporter should be applied to all of the repos:

• teal.modules.general
• teal.modules.clinical
• teal.modules.hermes
• teal.modules.osprey
• teal.modules.goshawk

we want to update in each module:

SRV:

# FROM
   teal.reporter::add_card_button_srv("addReportCard", reporter = reporter, card_fun = card_fun)
   teal.reporter::download_report_button_srv("downloadButton", reporter = reporter)
   teal.reporter::reset_report_button_srv("resetButton", reporter)
# TO
   teal.reporter::simple_reporter_srv("simple_reporter", reporter = reporter, card_fun = card_fun)

UI:

# FROM
     shiny::tags$div(
        teal.reporter::add_card_button_ui(ns("addReportCard")),
        teal.reporter::download_report_button_ui(ns("downloadButton")),
        teal.reporter::reset_report_button_ui(ns("resetButton"))
     ),
# TO
    teal.reporter::simple_reporter_ui(ns("simple_reporter"))

Remember to update then teal.code::get_chunks_object(parent_idx = 1L), to use idx = 2L

[gogonzo]

1. Change simple_reporter_module with the css rules (and each button module too if needed)
2. Replace add_card_button_srv, download_report_button_srv with simple_reporter_module_srv in each tlg-module

[mhallal1]

@Polkas updated the css of buttons is his PR
@mhallal1 updated all repos to use simple_reporter in his PRs

Proposition:

before_hover_fin.mov

Please check the PR https://github.com/insightsengineering/teal.reporter/pull the simple design was choosen and the dynamic labels generation is added.

[mhallal1]

@Polkas the second options looks good to me.