4px, 8px, 16px, 24px, Full Rounded

On Invoice List view, the multi-select checkbox is smaller than the row checkbox, not sure why, but should be the same size:

Before:

After:

Proposed Changes:

From 1rem to 0.75rem.

.alert { padding: 0.75rem 1rem; }

From 1.5rem to 1rem.

.alert-dismissible .btn-close { padding: 1rem; }

The .lead weight is too thin.

Basic Inputs:

[TODO, select, other inputs that extend behind this]

Realized we wanted to add it to help distinguish the background, but it doesn't apply to the whole element if there's additional text, etc.. and I think we should probably just remove it. Was noticing this more as I audited all of the settings elements.

Need to dig into if there are any variants, but particularly...

From

padding: 1rem 0;

To

padding: 1.5rem 0;

Needs more love, and realizing there are quite a few things I've not done in keeping it up to date with the introduction of the Directory work, etc..

Going to spend some time making sure it's easier for other designers to pick up everything they'd need to keep things consistent.

Will bump the padding on our dropdown menus, looks nicer.

/* Custom space utils, as Bootstrap has a different spacing scale for > M */
.pt-l { padding-top: var(--btcpay-space-l); }
.pt-xl { padding-top: var(--btcpay-space-xl); }
.pb-l { padding-bottom: var(--btcpay-space-l); }
.pb-xl { padding-bottom: var(--btcpay-space-xl); }
.mt-l { margin-top: var(--btcpay-space-l); }  
.mt-xl { margin-top: var(--btcpay-space-xl); }
.mb-l { margin-bottom: var(--btcpay-space-l); }
.mb-xl { margin-bottom: var(--btcpay-space-xl); }

We should add one for (M)edium as well.

[TODO: post mocks]

• Improve table header styling; selected and unselected columns
• Main table action styling... From Action - Action - Action TO More + carot

More CSS variable updates, see the migration guide.

• Add helper text variant
• Better formatting

Current:

If it's too much work to adjust the component to not have the secondary background behind the icon, as our other similar inputs have that, we can leave for now until we can address that styling.

However, it'd be nice to have the background color match the other input forms, as well as the icon switch when filled.

Mock:

Expected behavior: should stay brand green.

Another instance of the off-color is the Time Selector in the Wallet Balance component.

[TODO: MOCKS]

They added a bunch of CSS custom properties, details here: https://blog.getbootstrap.com/2022/05/16/using-bootstrap-css-vars/

Another minor issue, not 100% sure where to post, but flagging for us.

This was recorded before the latest design system changes, but don't think it'll affect the transition times.

Seeing the 1.5rem more in context, i think we need to adjust it to be a little smaller at 1.25rem.

I'm not sure which shade we're using, didn't check in the inspector, but could be brought up 1-2 shades.

As reported by wouter.

Tracking here.

Mocks TODO.

• .dropdown-toggle-split left & right padding reduced to 1rem

See Invoices & Payment Requests:

Few examples of where it's off:

• In the time selector on the Dashboard, it's our accent green
• LNBank Wallet Title :hover

Will note more, just trying to track this.

To potentially help links stand out a bit more in the instances this occurs..

The autofill background changes to white in Dark Mode.

Need to do more auditing to see where else this kind of issue happens.

https://stackoverflow.com/questions/58263122/google-chrome-autofill-background-color-change

Updates:

• badge padding-right & left to 0.75rem from 0.5rem
• font-weight: 600

• Remove list-group full border, only bottom border
• Add "last-child" element to list-group to hide the bottom border

Will be updating, need to scrub through all of my notes, and potential categorize these.

cc @dennisreimann

• #9
• #10
• #11
• #12
• #13
• #15
• #14
• #16
• #17
• #18
• #19
• #20
• #21
• #22
• #23
• #24
• #32
• #33
• adding padding to the accordion inner elements
• Define the fully-rounded pill navigation component
• Adjust modal-dialogue padding top to 8rem? (more than current 1.75rem)
• Icon-only grey rounded border radius background on hover (will post examples)

See (#14) "Low" variant.

Could probably implement the same color on Dark Mode, don't want to invert the shadow, would look strange.

Debating if I should apply this to some of the other components as well, so this implementation could wait.

Example of implementation:

Currently the dropdown is quite small and squished, click the Invoice state dropdown and compare it to say the Export dropdown, they look different, and I mostly think this is in the font sizings .. regardless we should try to match the two and make all drop-downs consistent.

Current:

• Text-only button rounded border radius background on hover (will post examples)

We can leverage whatever the padding we currently have for the button sizes, but this is just a visual example.

Update

Simple change to add some more space to our heavy settings screen views.

[TODO - MOCKS]

• Give (?) a proper hover state as well

Will post the final assets + states.

Not 100% where the best place for this would be, so we can move to the main repo if we need to, but would be great to make this consistent with the other dropdown/select components.

Not a high priority, just flagging.

Ideally the text should adjust in either color or opacity, will update this ticket with mocks.

• Increase checkbox size & states

Still debating if I want the checkbox to sit vertically at the top or in the middle (like the switch component), a minor tweak we could decided upon when implementing ... but regardless.

The use cases are listed above, but that can be done at a later date, just getting these 4 variants added would be a good start.

• Add bold font-weight, if doesn't already exist
• Bold headers on all h1, h2, h3, h4, h5 section headers

There's favicon inconsistency across a few of our websites on Safari 14 MacOS:

• https://foundation.btcpayserver.org
• https://btcpayserver.org
• https://directory.btcpayserver.org
• https://docs.btcpayserver.org

It should be consistent with our design system guidelines.

Current:

Proposal: