Update screenshots to new UI

[llrs-roche]

Pull Request

Fixes #1544

This updates the screenshots of the shiny apps shown on the bootstrap vignette.
The svg on teal/vignettes/images/teal-app-components-hover.svg used on the "Getting started with teal" are updated. In Inkscape they look good but on my browser the example doesn't:

I also deleted some images I couldn't find where were they shown (Not on blueprints or other).

I run devtools::build_article() to verify that the vignette is updated and looks good.

[github-actions]

Code Coverage Summary

Filename                          Stmts    Miss  Cover    Missing
------------------------------  -------  ------  -------  ----------------------------------------------------------------------------------------------------------------------------------------
R/checkmate.R                        24       0  100.00%
R/dummy_functions.R                  67      11  83.58%   46, 48, 90-98
R/include_css_js.R                   11      11  0.00%    12-37
R/init.R                            142      96  32.39%   137-158, 188-196, 206-231, 234-235, 242-251, 254-263, 266-275, 279-289, 291
R/landing_popup_module.R             34      34  0.00%    22-57
R/module_bookmark_manager.R         161     130  19.25%   47-68, 88-142, 147-148, 160, 207, 242-319
R/module_data_summary.R             177      10  94.35%   25-26, 40, 50, 205, 236-240
R/module_filter_data.R               64       2  96.88%   22-23
R/module_filter_manager.R           230      57  75.22%   56-62, 73-82, 90-95, 108-112, 117-118, 291-314, 340, 367, 379, 386-387
R/module_init_data.R                 74       6  91.89%   38-43
R/module_nested_tabs.R              366     215  41.26%   72-111, 138-323, 355, 473-476, 480-483, 487-490, 505, 539, 593-596
R/module_session_info.R              18       7  61.11%   35-41
R/module_snapshot_manager.R         216     146  32.41%   89-95, 104-113, 121-133, 152-153, 170-180, 184-199, 201-208, 215-230, 234-238, 240-246, 249-262, 265-273, 303-317, 320-331, 334-340, 354
R/module_teal_data.R                149      76  48.99%   43-149
R/module_teal_lockfile.R            131      69  47.33%   33-37, 45-57, 60-62, 76, 86-88, 92-96, 100-102, 110-119, 122, 124, 126-127, 142-146, 161-162, 177-186, 196-201
R/module_teal_with_splash.R          33      33  0.00%    24-61
R/module_teal.R                     163      57  65.03%   50-85, 103, 115-116, 157, 178-194, 196
R/module_transform_data.R           116       7  93.97%   20, 46, 130-134
R/modules.R                         297      53  82.15%   174-178, 233-236, 360-380, 388, 394, 571-577, 590-598, 613-628, 674, 687
R/reporter_previewer_module.R        19       2  89.47%   30, 34
R/show_rcode_modal.R                 31      31  0.00%    17-49
R/tdata.R                            14      14  0.00%    19-61
R/teal_data_module-eval_code.R       24       0  100.00%
R/teal_data_module-within.R           7       0  100.00%
R/teal_data_module.R                 20       0  100.00%
R/teal_data_utils.R                  10       0  100.00%
R/teal_modifiers.R                   71      71  0.00%    26-214
R/teal_reporter.R                    70       8  88.57%   69, 77-82, 131-132, 135, 152
R/teal_slices-store.R                29       0  100.00%
R/teal_slices.R                      63       0  100.00%
R/teal_transform_module.R            45       0  100.00%
R/TealAppDriver.R                   385     385  0.00%    57-772
R/utils.R                           250      38  84.80%   400-449
R/validate_inputs.R                  32       0  100.00%
R/validations.R                      58      37  36.21%   118-406
R/zzz.R                              15      11  26.67%   4-18
TOTAL                              3616    1617  55.28%

Diff against main

Filename      Stmts    Miss  Cover
----------  -------  ------  --------
TOTAL             0       0  +100.00%

Results for commit: c184349

Minimum allowed coverage is 80%

♻️ This comment has been updated with latest results

[github-actions]

Unit Tests Summary

  1 files   26 suites   1m 58s ⏱️
266 tests 216 ✅ 50 💤 0 ❌
454 runs  404 ✅ 50 💤 0 ❌

Results for commit c184349.

♻️ This comment has been updated with latest results.

[github-actions]

Unit Test Performance Difference

Test Suite	$Status$	Time on main	$±Time$	$±Tests$	$±Skipped$	$±Failures$	$±Errors$
module_teal	💚	$98.58$	$-1.09$	$0$	$0$	$0$	$0$

Additional test case details

Test Suite	$Status$	Time on main	$±Time$	Test Case
module_teal	💚	$7.19$	$-1.06$	summary_table_displays_MAE_dataset_added_in_transformators

Results for commit c786d6a

♻️ This comment has been updated with latest results.

[averissimo]

Great work in breaking down the Rmd and all the bs-* files seem nice 💯

I think the teal-app-components-***.svg files can be improved

[averissimo]

Is this extra space required?

Both here and in the other code chunks

[averissimo]

Without adding too much detail, I think we could either change "Header" to "Header & navigation"

Or add a new horizontal rectangle below "Header" with "Navigation & global Actions" (or use a better naming)

[averissimo]

Header font is different (old one was using "Helvetica", new seems to use a Serif font)

[averissimo]

The outer border is cut and doesn't fill the whole image and when hovering this artifact is noticeable.. Low priority, but noticeable

[averissimo]

At this moment I think it would be better to insert an embedded screenshot of the teal application instead of using SVG elements in the hover image.

If you still prefer using "pure" vectorial image, it looks different on the browser because you are saving the SVG with the font reference, it is not embedded.
To avoid this there are a couple of alternatives:

• You need to select the text and convert to path (but this defeats the purpose of using svg)
• Encode it in base64 as this link says
• Use a commonly available font

[averissimo]

The outer border is cut and doesn't fill the whole image and when hovering this artifact is noticeable.. Low priority, but noticeable edit: wrong file