Align collection settings modal with penpot design

[kwerber]

Describe the bug

Currently the collection settings modal does not look exactly like the trufos penpot design. We should make the necessary adjustments so that it looks as close to the design as possible.

Here are the major differences that we should fix:

• The padding inside the tabs themselvs is too small (should be 10px top/down & 16px left/right)
• The background colors are inverted. The tab content should have the darker background, while the header should have the lighter one
• The background of the actual tab content should not have rounded corners
• When hovering over the secret checkbox, the pointer cursor should be used
• The color of the secret checkbox should be secondary and not blue
• The text and icons inside of the table cells should be colored secondary and not white
• The secrets Show/Hide button should not be visible, when the variable value is empty
• The Cancel button should not exist
• The Save button has the incorrect padding (should be 13px top/down & 20px left/right)
• The Save button should be part of the main tab content, meaning it should be placed on the darker background. There should not be any additional area below the main tab content (see screenshot below)

To Reproduce

1. Start trufos, click on the settings icon on the bottom left
2. Look at the collection settings modal that shows up
3. Compare it to the penpot design

Expected behavior

The implementation should look like the penpot design.

Screenshots/Video

Current implementation:

Intended look and feel from the penpot design:

Additional context

You can take a look at our penpot design here. You can get better access to the penpot design by clicking on this link and logging in with the username info@trufos.com and password password.