Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: small but effective UI improvements (mostly for dark mode)

See original GitHub issue

I am completely new to grocy and have no experience with UI and design.
But maybe this qualifies me to give some feedback from a user perspective. 😄

recipes

When I first opened grocy I thought: “Other tools like Tandoor Recipes look much better.”

dark mode

Especially the dark mode (which I immediately activated) looks kind of outdated. I think it looks just a little to “washed”.

Here is my quick and dirty try to fix this:

I only changed background color, font color and red and green. It is based on https://material.io/design/color/dark-theme.html.

grocy_night_mode.css diff

3,4c3,4
<       color: #c1c1c1;
<       background-color: #333131;
---
>       color: #dddddd;
>       background-color: #121212;
12,13c12,13
<     color: rgba(255, 255, 255, .5);
<     border-color: rgba(255, 255, 255,.1);
---
>       color: rgba(255, 255, 255, .5);
>       border-color: rgba(255, 255, 255,.1);
25c25
<       color: #6c757d;
---
>       color: #246dad;
29c29
<       color: #c1c1c1;
---
>       color: #dddddd;
35c35
<       color: #c1c1c1;
---
>       color: #dddddd;
43c43
<       color: #c1c1c1 !important;
---
>       color: #dddddd !important;
47c47
<       border-color: #c1c1c1;
---
>       border-color: #dddddd;
60c60
<       color: #c1c1c1;
---
>       color: #dddddd;
66c66
<       color: #c1c1c1;
---
>       color: #dddddd;
72,74c72,74
<       color: #c1c1c1;
<       background-color: #6f1b23;
<       border-color: #6f1b23;
---
>       color: #dddddd;
>       background-color: #C62828;
>       border-color: #C62828;
78,80c78,80
<       color: #c1c1c1;
<       background-color: #17642a;
<       border-color: #17642a;
---
>       color: #dddddd;
>       background-color: #2E7D32;
>       border-color: #2E7D32;
87c87
<       color: #c1c1c1;
---
>       color: #dddddd;
94c94
<       background-color: #333131;
---
>       background-color: #121212;
103c103
<       background: #333131;
---
>       background: #121212;
108c108
<       background-color: #333131;
---
>       background-color: #121212;
137c137
<       background-color: #333131;
---
>       background-color: #121212;
143c143
<       background-color: #333131;
---
>       background-color: #121212;
147,149c147,149
<       color: #c1c1c1;
<       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23c1c1c1' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
<       background-color: #333131;
---
>       color: #dddddd;
>       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23dddddd' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
>       background-color: #121212;
154,155c154,155
<       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23c1c1c1' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
<       background-color: #333131;
---
>       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23dddddd' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
>       background-color: #121212;
161c161
<       background-color: #333131;
---
>       background-color: #121212;
165,166c165,166
<       color: #c1c1c1;
<       background-color: #333131;
---
>       color: #dddddd;
>       background-color: #121212;
170,171c170,171
<       color: #c1c1c1;
<       background-color: #333131;
---
>       color: #dddddd;
>       background-color: #121212;
175c175
<       background-color: #333131;
---
>       background-color: #121212;
188c188
<       background-color: #333131;
---
>       background-color: #121212;
194c194
<       background-color: #333131;
---
>       background-color: #121212;
199c199
<       background-color: #333131;
---
>       background-color: #121212;
205c205
<       background-color: #333131;
---
>       background-color: #121212;
209c209
<       background-color: #333131;
---
>       background-color: #121212;
213c213
<       background-color: #333131 !important;
---
>       background-color: #121212 !important;
220c220
<       background-color: #333131 !important;
---
>       background-color: #121212 !important;
226c226
<       background-color: #333131 !important;
---
>       background-color: #121212 !important;
231c231
<       background-color: #333131;
---
>       background-color: #121212;
245c245
<       color: #c1c1c1 !important;
---
>       color: #dddddd !important;
253c253
<       color: #c1c1c1 !important;
---
>       color: #dddddd !important;
270c270
<       background-color: #333131;
---
>       background-color: #121212;
274,275c274,275
<       color: #c1c1c1;
<       background-color: #333131;
---
>       color: #dddddd;
>       background-color: #121212;
279c279
<       background-color: #333131;
---
>       background-color: #121212;
283c283
<       background-color: #333131;
---
>       background-color: #121212;
288c288
<       background-color: #333131;
---
>       background-color: #121212;
292c292
<       background-color: #333131;
---
>       background-color: #121212;

table alignment

Another think that bothers me and looks not as professional as grocy is: The buttons in the stock table could be aligned better. I guess this is not trivial. But maybe some web developer knows some fancy way to fix this. 😇

too many (white) lines

Especially in the dark mode there are to many while lines/table borders. I think this is part of the reason why the dark mode does not look as clean as the light mode.

The same goes for the planer:

Maybe the lines just need to be a little thinner?

action buttons

The button on the top do not look nice.
In my opinion it looks “old” that the buttons only have border lines and no fill color.

I think this is because the lines work as “shadows” in light mode but in dark mode you need to use a different shade of black to “elevate” the buttons.

And it is hard to distinguish between enabled and disabled buttons. (light and dark mode)
A different background color (light grey?) could make these buttons look more “deactivated”.

search bars

In light mode it looks ok:

In dark mode it looks like the darker background behind the icon looks smaller in height than the text field.

GitHub fixed this by adding a border around the icon area and making the input field even darker.

The lines are also thinner.

inconsistent placement of buttons

Is there a reason, why the buttons for Save and Close are placed at different areas?

I would place them next to each other.
Common practice would be the bottom right, I guess.

This is especially annoying when you have to scroll, just to get to the save button.

filter buttons

I have a few notes:

Do we need the more saturated line on top of the buttons?
I think this does not fit the over all design. And it looks like some css gone wrong and did not cover the whole button.
Should the colors be represented in the table, too?
This works for grey, but the blue does not match at all and confused me. I have not checked red and yellow, yet.
This is too much text for just four buttons! You do not want to read this every time to find the correct button. (Yes, you will get used to it by time) We might not get rid of the text, but I would suggest to add icons in front of the text. Like in the menu on the left. People can recognize icons much faster, I think.