Skip to content

Fix issue #220 #301

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

Closed
wants to merge 3 commits into from
Closed

Fix issue #220 #301

wants to merge 3 commits into from

Conversation

twicoder
Copy link

Add some styles for

@@ -169,3 +169,21 @@ a {
color: inherit;
}
}

article > a {
color: #3078df;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. The colors you use here do not really much design specs (https://drive.google.com/open?id=0B3y3SEA9cIEkRWt2TVpXMDhQbTA)!
  2. Also, you should not put color codes directly to your custom styling. We have all proper colors defined as variables here: https://github.com/topcoder-platform/community-app/blob/develop/src/styles/_variables.scss#L43
    So, you just check what is the variable name for that color you need, and put you scss color: $tc-black; or whatever you need.

@twicoder
Copy link
Author

@birdofpreyru changed "$tc-dark-blue: #0a71e6;" to "$tc-dark-blue: #0b71e6;"

@birdofpreyru
Copy link
Collaborator

@twicoder I guess you have misunderstood me. You sure don't touch the values of variables in _variables.scss - they are the standard colors from Topcoder styleguide, being used all around, they should stay the same.

What I ment, is that when you write a custom styling for hrefs rather than doing

article > a:hover {
  color: #3078df;
  text-decoration: underline;
}

you use those variables, like (provided that you have @import "~styles/tc-styles"; on top of your .scss):

article > a:hover {
  color: $tc-dark-blue;
  text-decoration: underline;
}

Also I've just noticed that you attempted to put your custom styles into _reset.scss - this is also wrong. Inside /src/styles we have only the global styles and mixins. The actual styles for individual components are located along with the components code. In this very case you should modify this stylesheet, I believe: https://github.com/topcoder-platform/community-app/blob/develop/src/shared/components/challenge-detail/Specification/styles.scss
to ensure that links in the challenge specifications (if they don't have inline styling) match the design.

@twicoder
Copy link
Author

@birdofpreyru Changed scss file as suggested. Value #0b71e6 is from design specs.

@birdofpreyru
Copy link
Collaborator

@twicoder Btw, have you seen my last post in the challenge forum? I don't know what is your TC nickname to be able to pay for the Bug Hunt part of the challenge.

@twicoder
Copy link
Author

@birdofpreyru My TC nickname is renqingwei123, I have post it in the forum. Thanks!

@birdofpreyru
Copy link
Collaborator

@twicoder

  1. OK, this is correct use of standard colors. For regular link, though, you should just use the value of $tc-dark-blue: it is a bit different from design specs, but, I guess, it is just a misprint in specs.
  2. The problem is that your css modification does not really help: when I go to the URL of challenge in the issue ticket, scroll to the first blue link, and hover, it becomes black (very dark blue), it is different from specs.

@twicoder twicoder closed this Sep 2, 2017
@birdofpreyru birdofpreyru deleted the issue-220 branch October 7, 2017 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants