#142 Fixed links which where were not properly visible in dark mode

[sungod12]

Pull Request Template

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -Fixed links which where were not visible in dark mode by setting background color to lighter version of black. -Changed link color in other pages which were not properly visible due to dark colored background. -Justified text in scholarship component.

Fixes # 142

Type of change

Please delete options that are not relevant.

• [x] Bug fix (non-breaking change which fixes an issue)

Checklist:

• [x] My contribution follows the style guidelines of this project
• [x] I have performed a self-review of my own contribution
• [x] My changes generate no new warnings
• [x] I have checked my code and corrected any misspellings

[nehakalbande]

Files are Conflicting, Please have a look over it

[sungod12]

I have removed conflicts.

[nehakalbande]

Conflicting files website/src/components/Footer/Footer.js website/src/components/Header/Header.js website/src/components/Inspirational/Inspirational.js website/src/components/Resources/resourcesComponent.js website/src/components/Scholarships/ScholarshipComponent.js

[nehakalbande]

Please remove the ss of your changes from the documents folder and send them here.

[sungod12]

Please remove the ss of your changes from the documents folder and send them here.

okay -Before changing background color

• After changing background color

-Before justifying text

-After justifying text

[nehakalbande]

Please remove the ss of your changes from the documents folder and send them here.

okay -Before changing background color

• After changing background color

-Before justifying text

-After justifying text

Can you change the name and links of the scholarship any other color, Black doesn't seem good

[sungod12]

Please remove the ss of your changes from the documents folder and send them here.

okay -Before changing background color

• After changing background color

-Before justifying text -After justifying text

Can you change the name and links of the scholarship any other color, Black doesn't seem good

You want me to change the name as well as color of the links?

[nehakalbande]

Please remove the ss of your changes from the documents folder and send them here.

okay -Before changing background color

• After changing background color

-Before justifying text -After justifying text

Can you change the name and links of the scholarship any other color, Black doesn't seem good

You want me to change the name as well as color of the links?

Yes

[sungod12]

Well the name seems good, I can change the color. Is that okay?

Please remove the ss of your changes from the documents folder and send them here.

okay -Before changing background color

• After changing background color

-Before justifying text -After justifying text

Can you change the name and links of the scholarship any other color, Black doesn't seem good

You want me to change the name as well as color of the links?

Yes

Well the name seems good, I can change the color. Is that okay?

[sungod12]

Color in light mode.

Color in dark Mode

Is this color okay?

[sungod12]

Also I have deleted the changes folder, so it will be commited to this. Thanks @shikha-16 @nehakalbande .

[shikha-16]

wait what is happening

[sungod12]

Hi @shikha-16 @nehakalbande ,I haven't yet commited the changed color.

[sungod12]

Hi @shikha-16 @nehakalbande ,I haven't yet commited the changed color.

I was waiting for approval, hence didn't commit the change.

[shikha-16]

Color in light mode.

Color in dark Mode

Is this color okay?

Hey, can you change the 'Generation Google Scholarship' color to white bold in dark mode and keep it black bold in light mode? Underline the text if it links to anywhere. Also, change the 'here' at the end of text as well.

[sungod12]

Yeah, sorry i merged by mistake. So

Color in light mode. Color in dark Mode Is this color okay?

Hey, can you change the 'Generation Google Scholarship' color to white bold in dark mode and keep it black bold in light mode? Underline the text if it links to anywhere. Also, change the 'here' at the end of text as well.

It was previously but @nehakalbande told me to change color as black doesn't look good.

[sungod12]

Yeah, sorry i merged by mistake. So

Color in light mode. Color in dark Mode Is this color okay?

Hey, can you change the 'Generation Google Scholarship' color to white bold in dark mode and keep it black bold in light mode? Underline the text if it links to anywhere. Also, change the 'here' at the end of text as well.

It was previously but @nehakalbande told me to change color as black doesn't look good.

Just decide among yourselves and let me know then, I will make changes accordingly. Also if possible, could you notify me on discord about the final decision instead of github.

[nehakalbande]

Yeah, sorry i merged by mistake. So

Color in light mode. Color in dark Mode Is this color okay?

Hey, can you change the 'Generation Google Scholarship' color to white bold in dark mode and keep it black bold in light mode? Underline the text if it links to anywhere. Also, change the 'here' at the end of text as well.

It was previously but @nehakalbande told me to change color as black doesn't look good.

Told you for dark mode... Not for light mode

[nehakalbande]

Color in light mode. Color in dark Mode Is this color okay?

Hey, can you change the 'Generation Google Scholarship' color to white bold in dark mode and keep it black bold in light mode? Underline the text if it links to anywhere. Also, change the 'here' at the end of text as well.

@sungod12 Change it like this

[sungod12]

Thats it,right?

[nehakalbande]

Thats it,right?

Yes, But do the same changes in other files as well organisations and other..

[sungod12]

Thats it,right?

Yes, But do the same changes in other files as well organisations and other..

you mean other links in other pages.okay.

[sungod12]

Thats it,right?

Yes, But do the same changes in other files as well organisations and other..

you mean other links in other pages.okay.

is this possible to add it as new issue because this was for particular page i.e, organization and now link color have to be changed for each and every page.

also as two of my commits got merged as one this could act as replacement for it.

update:I have changed the color using use effect hook and setinterval ,but there is slight flashing due to setinterval.If that is okay,i can merge or anybody wants to help they are free to do so.

[shikha-16]

Thats it,right?

Yes, But do the same changes in other files as well organisations and other..

you mean other links in other pages.okay.

is this possible to add it as new issue because this was for particular page i.e, organization and now link color have to be changed for each and every page.

also as two of my commits got merged as one this could act as replacement for it.

update:I have changed the color using use effect hook and setinterval ,but there is slight flashing due to setinterval.If that is okay,i can merge or anybody wants to help they are free to do so.

@nehakalbande

[nehakalbande]

Thats it,right?

Yes, But do the same changes in other files as well organisations and other..

you mean other links in other pages.okay.

is this possible to add it as new issue because this was for particular page i.e, organization and now link color have to be changed for each and every page.

also as two of my commits got merged as one this could act as replacement for it.

update:I have changed the color using use effect hook and setinterval ,but there is slight flashing due to setinterval.If that is okay,i can merge or anybody wants to help they are free to do so.

Can you send the ss of the set interval code and the color change in the website

[sungod12]

sure.I will send the gif along with code and short explanation.

[sungod12]

sure.I will send the gif along with code and short explanation.

//Used a state for storing theme and changing it dynamically
const [theme, setTheme] = useState("light");
  useEffect(() => {
    const interval = setInterval(() => {
      const temptheme = localStorage.getItem("theme"); //fetches the theme
      setTheme(temptheme); //sets the theme
      const names = [                           //array which contains the id of tags which needs to be changed on switching theme
        "scholarship-name-1",
        "scholarship-name-2",
        "scholarship-name-3",
        "scholarship-name-4",
        "scholarship-name-5",
        "scholarship-name-6",
        "scholarship-name-7",
      ];
      if (theme === "dark") {             /*checks the theme and if it is dark add class "dark" to the classList thereby changing
        names.forEach((val) => {            color of links*/
          document.getElementById(`${val}`).classList.add("dark");
          document.getElementById(`${val}`).classList.remove("light");
        });
      } else {
        names.forEach((val) => {
          document.getElementById(`${val}`).classList.add("light");
          document.getElementById(`${val}`).classList.remove("dark");
        });
      }
      return;
    }, 500);                  //checks for theme change every 500ms
  }, [theme]);                  //runs on theme state change.

https://imgflip.com/gif/5p648y

[sungod12]

This is what is occuring

[nehakalbande]

sure.I will send the gif along with code and short explanation.

//Used a state for storing theme and changing it dynamically
const [theme, setTheme] = useState("light");
  useEffect(() => {
    const interval = setInterval(() => {
      const temptheme = localStorage.getItem("theme"); //fetches the theme
      setTheme(temptheme); //sets the theme
      const names = [                           //array which contains the id of tags which needs to be changed on switching theme
        "scholarship-name-1",
        "scholarship-name-2",
        "scholarship-name-3",
        "scholarship-name-4",
        "scholarship-name-5",
        "scholarship-name-6",
        "scholarship-name-7",
      ];
      if (theme === "dark") {                          /*checks the theme and if it is dark add class "dark" to the classList thereby changing
        names.forEach((val) => {                         color of links*/
          document.getElementById(`${val}`).classList.add("dark");
          document.getElementById(`${val}`).classList.remove("light");
        });
      } else {
        names.forEach((val) => {
          document.getElementById(`${val}`).classList.add("light");
          document.getElementById(`${val}`).classList.remove("dark");
        });
      }
      return;
    }, 500);                  //checks for theme change every 500ms
  }, [theme]);                  //runs on theme state change.

Please use setTimeout to resolve this issue

[sungod12]

sure.I will send the gif along with code and short explanation.

//Used a state for storing theme and changing it dynamically
const [theme, setTheme] = useState("light");
  useEffect(() => {
    const interval = setInterval(() => {
      const temptheme = localStorage.getItem("theme"); //fetches the theme
      setTheme(temptheme); //sets the theme
      const names = [                           //array which contains the id of tags which needs to be changed on switching theme
        "scholarship-name-1",
        "scholarship-name-2",
        "scholarship-name-3",
        "scholarship-name-4",
        "scholarship-name-5",
        "scholarship-name-6",
        "scholarship-name-7",
      ];
      if (theme === "dark") {                          /*checks the theme and if it is dark add class "dark" to the classList thereby changing
        names.forEach((val) => {                         color of links*/
          document.getElementById(`${val}`).classList.add("dark");
          document.getElementById(`${val}`).classList.remove("light");
        });
      } else {
        names.forEach((val) => {
          document.getElementById(`${val}`).classList.add("light");
          document.getElementById(`${val}`).classList.remove("dark");
        });
      }
      return;
    }, 500);                  //checks for theme change every 500ms
  }, [theme]);                  //runs on theme state change.

Please use setTimeout to resolve this issue.

I had used setTimeout previously but it worked for first time and then didnt work ,I will try again.

[sungod12]

ahhh i solved the issue. Damn it, it was due to just one css property and played around with it and got the solution. No js necessary.

[sungod12]

Light Mode

Dark Mode

[sungod12]

Should I go with this change?. Please review @nehakalbande @shikha-16

[nehakalbande]

@sungod12 Great Please make a PR, So that we can review the code

[sungod12]

okay. I am making changes only in scholarship page, then make a pull request, in order to review and then do rest of pages or should I change it in other pages accordingly and then make a pull request?.

[nehakalbande]

okay. I am making changes only in scholarship page, then make a pull request, in order to review and then do rest of pages or should I change it in other pages accordingly and then make a pull request?.

Make changes in other pages as well,then make a PR

[sungod12]

okay.

[sungod12]

Pages I am not making change because they look okay in dark mode.

[sungod12]

Changed pages-

Dark Mode- Scholarships

Light Mode- Scholarships

Dark Mode- Events/Programs

Light Mode- Events/Programs

Dark Mode- Inspirations

Light Mode- Inspirations

Dark Mode- Guidelines

Light Mode- Guidelines

[nehakalbande]

Changed pages-

Dark Mode- Scholarships

Light Mode- Scholarships

Dark Mode- Events/Programs

Light Mode- Events/Programs

Dark Mode- Inspirations

Light Mode- Inspirations

Dark Mode- Guidelines

Light Mode- Guidelines

Please remove the changes done in Events/Programs Page. Some other changes has been done on that page

[sungod12]

okay. You should have told me previously.