btcpayserver / btcpayserver-design Goto Github PK

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

The .lead weight is too thin.

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

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

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

More CSS variable updates, see the migration guide.

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

• Give (?) a proper hover state as well

Will post the final assets + states.

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

Current:

Proposal:

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

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.

• Add helper text variant
• Better formatting

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.

[TODO: MOCKS]

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

See Invoices & Payment Requests:

[TODO - MOCKS]

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.

As reported by wouter.

Tracking here.

Mocks TODO.

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

/* 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.

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

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.

Update

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)

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:

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

• 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.

Updates:

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

Expected behavior: should stay brand green.

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

From

padding: 1rem 0;

To

padding: 1.5rem 0;

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:

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

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.

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; }

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:

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.

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.

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

I was noticing this on the App, I think we should kill the top and bottom borders on the modals, and if we need to segment content further, we can add sectioned backgrounds, etc..

Simple change to whoever gets to it.

Basic Inputs:

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

• 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.

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

[TODO: post mocks]

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