hmn
/
hmn
4
Fork 9
Code Issues 59 Pull Requests Releases Activity

Buttons are dim and boring #74

New Issue
Closed
opened 2022-07-25 20:19:30 +00:00 by bvisness · 6 comments
bvisness commented 2022-07-25 20:19:30 +00:00
Owner
Copy Link

Take a look at this comment: #73 (comment)

@giggs implemented some different button styles that definitely look better, and I feel like our current button styles are generally just pretty dim. We should tweak our button styles globally to make them pop a little more. (Maybe not quite as much as the custom buttons from that comment? Not sure.)

One thing to be aware of is that the overall site color scheme changes depending on what project you're viewing. This is controlled by project.css, which you can find in our templates. It's likely that our button styles are split between global styles and project.css.

Take a look at this comment: https://git.handmade.network/hmn/hmn/pulls/73#issuecomment-1177 @giggs implemented some different button styles that definitely look better, and I feel like our current button styles are generally just pretty dim. We should tweak our button styles globally to make them pop a little more. (Maybe not quite as much as the custom buttons from that comment? Not sure.) One thing to be aware of is that the overall site color scheme changes depending on what project you're viewing. This is controlled by `project.css`, which you can find in our templates. It's likely that our button styles are split between global styles and `project.css`.
bvisness added the
good first issue
 label 2022-07-25 20:25:50 +00:00
bvisness commented 2022-07-26 18:42:23 +00:00
Author
Owner
Copy Link

Actually, our link text on the dark theme is actually just really dim. That's probably the bigger issue.

Actually, our link text on the dark theme is actually just really dim. That's probably the bigger issue.
giggs commented 2022-07-27 20:04:27 +00:00
Contributor
Copy Link

Actually, our link text on the dark theme is actually just really dim. That's probably the bigger issue.

For what it's worth I came to the same conclusion while trying different background colours for the button.

Unfortunately, I wasn't able to find where you guys define the link text on either theme.
I found --link-color but it's just a shade of grey and tweaking it doesn't seem to do much.

If you could let me know I'll try different colors and post screenshots

> Actually, our link text on the dark theme is actually just really dim. That's probably the bigger issue. For what it's worth I came to the same conclusion while trying different background colours for the button. Unfortunately, I wasn't able to find where you guys define the link text on either theme. I found --link-color but it's just a shade of grey and tweaking it doesn't seem to do much. If you could let me know I'll try different colors and post screenshots
bvisness commented 2022-07-29 16:03:14 +00:00
Author
Owner
Copy Link

The link color and various background colors are determined by the project color, and set and manipulated in the template for project.css: https://git.handmade.network/hmn/hmn/src/branch/master/src/templates/src/project.css

Other colors are set in SCSS via the following two files (for light and dark themes respectively):
https://git.handmade.network/hmn/hmn/src/branch/master/src/rawdata/scss/themes/light/_variables.scss
https://git.handmade.network/hmn/hmn/src/branch/master/src/rawdata/scss/themes/dark/_variables.scss

The link color and various background colors are determined by the project color, and set and manipulated in the template for project.css: https://git.handmade.network/hmn/hmn/src/branch/master/src/templates/src/project.css Other colors are set in SCSS via the following two files (for light and dark themes respectively): https://git.handmade.network/hmn/hmn/src/branch/master/src/rawdata/scss/themes/light/_variables.scss https://git.handmade.network/hmn/hmn/src/branch/master/src/rawdata/scss/themes/dark/_variables.scss
giggs commented 2022-07-30 13:50:48 +00:00
Contributor
Copy Link

Actually, our link text on the dark theme is actually just really dim. That's probably the bigger issue.

I found that what bothered me the most was that the button background was too light. I linked a screenshot of a simple change only to the dark theme that I think looks better.

Otherwise, regarding:

We should tweak our button styles globally to make them pop a little more. (Maybe not quite as much as the custom buttons from that comment? Not sure.)

I've made a style.css modification to have the theme color as the background for all buttons. I also linked a screenshot showing buttons for light, dark and project buttons.

Thoughts? Is there one worth shipping?

> Actually, our link text on the dark theme is actually just really dim. That's probably the bigger issue. I found that what bothered me the most was that the button background was too light. I linked a screenshot of a simple change only to the dark theme that I think looks better. Otherwise, regarding: > We should tweak our button styles globally to make them pop a little more. (Maybe not quite as much as the custom buttons from that comment? Not sure.) I've made a style.css modification to have the theme color as the background for all buttons. I also linked a screenshot showing buttons for light, dark and project buttons. Thoughts? Is there one worth shipping?
form button background change.PNG
16 KiB
theme color button.PNG
94 KiB
form button background change.PNG theme color button.PNG
bvisness commented 2022-08-02 01:33:41 +00:00
Author
Owner
Copy Link

So much better. I love having the project color on buttons, it livens them up so much. I think we'll want to ensure that buttons no longer have a border, and have some decent border radius, but then I say ship it.

Is there a light-theme equivalent we could do? Perhaps with a darker version of the project color?

If you want to put together a PR for the latter example, I'd be happy to look it over and get that merged.

So much better. I love having the project color on buttons, it livens them up so much. I think we'll want to ensure that buttons no longer have a border, and have some decent border radius, but then I say ship it. Is there a light-theme equivalent we could do? Perhaps with a darker version of the project color? If you want to put together a PR for the latter example, I'd be happy to look it over and get that merged.
bvisness commented 2022-08-16 13:01:37 +00:00
Author
Owner
Copy Link

Hey I think this is done! (#80)

Hey I think this is done! (#80)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
master
beta
live
nuke-scss
til
learning_jam
project-index-rework
feature/time_machine_page
no-thumbnail-yet
feature/visjam_2023_feed
moretwitch
snippet_edit
discord-tagging-for-real
stupid-broken-snippets
Labels
Clear labels   
admins only

Exclusively for the HMN admin team

  
bug

Something is not working

  
design

Aesthetics required

  
duplicate

This issue or pull request already exists

  
gimme feedback

We would like more community input on this

  
good first issue

   
hmmmm

The HMN team needs to think on this one

  
invalid

Something is wrong

  
reference

Hub for planning and discussion

  
wontfix

This won't be fixed

No Label
admins only
bug
design
duplicate
gimme feedback
good first issue
hmmmm
invalid
reference
wontfix
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: hmn/hmn#74
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?