Minor improvements to categories & changelog pages #1274

2024-10-10T04:44:59+08:00

arsenstorm commented

2024-10-10 04:44:59 +08:00

(Migrated from github.com)

Hey there!

I’m testing the hosted version of Maybe, and a few things bothered me regarding the UI.

The grey border around the badges for the categories feels wrong. I’ve updated this to match the colour of the badge instead.

Before:

After:

It also feels a bit wrong to see the name of the changelog update instead of the person who created the release.

Before:

After:

Hey there! I’m testing the hosted version of Maybe, and a few things bothered me regarding the UI. The grey border around the badges for the categories feels *wrong*. I’ve updated this to match the colour of the badge instead. Before: <img width="437" alt="Screenshot 2024-10-09 at 21 38 30" src="https://github.com/user-attachments/assets/5debadb1-ff80-483c-9e25-7e03b2c3d70f"> After: <img width="456" alt="Screenshot 2024-10-09 at 21 38 55" src="https://github.com/user-attachments/assets/d6a8ca68-b41b-4d7f-9f06-406306f36750"> It also feels a bit wrong to see the name of the changelog update instead of the person who created the release. Before: <img width="459" alt="Screenshot 2024-10-09 at 21 42 09" src="https://github.com/user-attachments/assets/df0e1eeb-083d-47e3-accb-32e83b015136"> After: <img width="439" alt="Screenshot 2024-10-09 at 21 41 31" src="https://github.com/user-attachments/assets/f438d91a-3260-412f-b134-c2a194f99dec">

zachgoll commented

2024-10-10 05:18:28 +08:00

(Migrated from github.com)

@arsenstorm thanks for the updates!

@justinfar will have to approve these as I'm not the best with design :)

@arsenstorm thanks for the updates! @justinfar will have to approve these as I'm not the best with design :)

arsenstorm commented

2024-10-10 05:34:13 +08:00

(Migrated from github.com)

Awesome; thank you!

On Wed, Oct 9 2024 at 10:18 PM, Zach Gollwitzer @.***>
wrote:

@arsenstorm https://github.com/arsenstorm thanks for the updates!

@justinfar https://github.com/justinfar will have to approve these as
I'm not the best with design :)

—
Reply to this email directly, view it on GitHub
https://github.com/maybe-finance/maybe/pull/1274#issuecomment-2403446571,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AG4XWZEOYDK2ZCSQLXNZ2R3Z2WMTVAVCNFSM6AAAAABPVLHGI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBTGQ2DMNJXGE
.
You are receiving this because you were mentioned.Message ID:
@.***>

Awesome; thank you! On Wed, Oct 9 2024 at 10:18 PM, Zach Gollwitzer ***@***.***> wrote: > @arsenstorm <https://github.com/arsenstorm> thanks for the updates! > > @justinfar <https://github.com/justinfar> will have to approve these as > I'm not the best with design :) > > — > Reply to this email directly, view it on GitHub > <https://github.com/maybe-finance/maybe/pull/1274#issuecomment-2403446571>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AG4XWZEOYDK2ZCSQLXNZ2R3Z2WMTVAVCNFSM6AAAAABPVLHGI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBTGQ2DMNJXGE> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

justinfar commented

2024-10-10 23:14:07 +08:00

(Migrated from github.com)

Hey @arsenstorm thanks so much for looking into this

Re changing the name to show the person who created the release, 100% agree

Re the border color, initially I had the alpha-black/25 that blended with the background which gave it a darkened category background color which is exactly what you're doing here (albeit slightly more subdued)

Figma handles borders/strokes differently in comparison to actual CSS so this probably got a bit lost in translation.

So overall agree on the change, only thing I'd change is the to make the border slightly lighter and perhaps change from 25% to 30% over here:

border-color: color-mix(in srgb, <%= category.color %> 25%, white);

If you have other UI bits that you think could be improved feel free to let us know :)

Hey @arsenstorm thanks so much for looking into this Re changing the name to show the person who created the release, 100% agree Re the border color, initially I had the `alpha-black/25` that blended with the background which gave it a darkened category background color which is exactly what you're doing here (albeit slightly more subdued) Figma handles borders/strokes differently in comparison to actual CSS so this probably got a bit lost in translation. So overall agree on the change, only thing I'd change is the to make the border slightly lighter and perhaps change from 25% to 30% over here: ```ruby border-color: color-mix(in srgb, <%= category.color %> 25%, white); ``` If you have other UI bits that you think could be improved feel free to let us know :)

❤️ 1

arsenstorm commented

2024-10-11 00:04:12 +08:00

(Migrated from github.com)

Ah I see

I think switching 25% -> 30% does make it slightly nicer

Another option is to make it borderless which would align better with the tags and merchants page; however, I personally feel like the badges on these pages would benefit more with a border (or a slightly darker background)

Ah I see I think switching 25% -> 30% does make it slightly nicer Another option is to make it borderless which would align better with the tags and merchants page; however, I personally feel like the badges on these pages would benefit more with a border (or a slightly darker background)

👍 1 ❤️ 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gavin/maybe#1274