New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search Results Path is too dark and doesn't contrast. I added @text-color-se... #22

Merged
merged 3 commits into from May 30, 2014

Conversation

Projects
None yet
2 participants
@brucevang

The Search Results path is too dark and blends in with the rest of the search results. I added a lighter color in @text-color-search-results-path so that it's easier to read and scan.

brucevang
Search Results Path is too dark doesn't contrast. I added @text-color…
…-search-results-path variable and made the text lighter to read.
@brucevang

This comment has been minimized.

Show comment
Hide comment
@brucevang

brucevang May 23, 2014

Before: When you search, the File Path text blends in with the actual code and is hard to read.
before-change

After: The path text is now lighter and stands out. This makes it it easier to read and scan.
after-change

Before: When you search, the File Path text blends in with the actual code and is hard to read.
before-change

After: The path text is now lighter and stands out. This makes it it easier to read and scan.
after-change

@benogle

This comment has been minimized.

Show comment
Hide comment
@benogle

benogle May 27, 2014

Contributor

I'd like to keep non-standard variables out of ui-variables in the themes so they dont get used in packages.

How about using @text-color-highlight instead?

Contributor

benogle commented May 27, 2014

I'd like to keep non-standard variables out of ui-variables in the themes so they dont get used in packages.

How about using @text-color-highlight instead?

@brucevang

This comment has been minimized.

Show comment
Hide comment
@brucevang

brucevang May 28, 2014

I'm not really sure where else to put the variable for #E9E9E9. I put it at the top of text.less but then it would be the only variable on that page. Any ideas?

@text-color-highight is #FFF and I think it contrasts too much. The color is too bright and it takes the user's focus away from the search string which is really what they should be looking at first.

Ideal UX
Step 1 - Where is my Searched String?
Step 2 - Is this the right code?
Step 3 - What is the file path name?

With the color being #FFF, the UX actually changes priorities.
Step 1 - What is the file path name?
Step 2 - Show the Search String.
Step 3 - Is this the right code?

The search results page also has a darker background than the editor page so I think there needs to be a darker text-highlight color than #FFF.

Here is a screenshot with #FFF.
screen shot 2014-05-27 at 9 02 11 pm

Here is another screenshot with the color #E9E9E9. Now there's a balance between the colors and less of an emphasis on the File Path Name which I believe is the tertiary information.
screen shot 2014-05-27 at 9 05 40 pm

I'm not really sure where else to put the variable for #E9E9E9. I put it at the top of text.less but then it would be the only variable on that page. Any ideas?

@text-color-highight is #FFF and I think it contrasts too much. The color is too bright and it takes the user's focus away from the search string which is really what they should be looking at first.

Ideal UX
Step 1 - Where is my Searched String?
Step 2 - Is this the right code?
Step 3 - What is the file path name?

With the color being #FFF, the UX actually changes priorities.
Step 1 - What is the file path name?
Step 2 - Show the Search String.
Step 3 - Is this the right code?

The search results page also has a darker background than the editor page so I think there needs to be a darker text-highlight color than #FFF.

Here is a screenshot with #FFF.
screen shot 2014-05-27 at 9 02 11 pm

Here is another screenshot with the color #E9E9E9. Now there's a balance between the colors and less of an emphasis on the File Path Name which I believe is the tertiary information.
screen shot 2014-05-27 at 9 05 40 pm

@benogle

This comment has been minimized.

Show comment
Hide comment
@benogle

benogle May 30, 2014

Contributor

How about using a transformation function on the @text-color-highlight then? Like darken()

Contributor

benogle commented May 30, 2014

How about using a transformation function on the @text-color-highlight then? Like darken()

@brucevang

This comment has been minimized.

Show comment
Hide comment
@brucevang

brucevang May 30, 2014

I removed the new variable and used the darken() function. Thanks!

I removed the new variable and used the darken() function. Thanks!

benogle added a commit that referenced this pull request May 30, 2014

Merge pull request #22 from brucevang/master
Search Results Path is too dark and doesn't contrast. I added @text-color-se...

@benogle benogle merged commit a5cd76f into atom:master May 30, 2014

@benogle

This comment has been minimized.

Show comment
Hide comment
@benogle

benogle May 30, 2014

Contributor

It should be in the next release 0.101.0. Thanks!

Contributor

benogle commented May 30, 2014

It should be in the next release 0.101.0. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment