Set up color variables and types to ensure color consistency #83

Tammy-Ajoko · 2022-10-23T15:58:06Z

Summary

Fixes #82
Addresses #10

Set up color variables and types to ensure color consistency.
Refactored both the login and signup CSS files into a single CSS file.

List of changes proposed in this PR (pull-request)

Added a root containing color variables to the CSS file
Changed individual colors in the CSS file to assigned variable names.
Created a new CSS folder.
Refactored both login and signup CSS files into a single file.
Deleted old login and signup CSS files.

What should a reviewer concentrate their feedback on?

Color balance
Everything looks ok?
Let me know if there's any change that i can remove or add to make this functionality work optimally

@sandygudie @BatoolMM

sandygudie · 2022-10-23T21:45:17Z

Frontend/src/pages/login/login.css

+:root{
+    --black-20: rgb(20, 20, 20);
+    --gray-52: rgb(52, 52, 52);
+    --gray-72: rgb(72, 72, 72);
+    --gray-203: rgb(203, 213, 225);
+    --white-255: rgb(255, 255, 255);
+    --white-248: rgb(248, 250, 252);
+    --skyblue-190: hsl(190, 97%, 47%);
+    --darkblue-245: hsl(245, 95%, 22%);
+    --blue-208: hsl(208, 97%, 58%);
+}


Welldone @Tammy-Ajoko for this great work, i will suggest a few changes:

Rather than repeating this root color variables and the google font in each file(login and sign up), you could use
@import url(../../GlobalStyles.css); to import the global CSS file to each of the files

sandygudie · 2022-10-23T21:48:36Z

Frontend/src/GlobalStyles.css

+:root{
+    --black-20: rgb(20, 20, 20);
+    --gray-52: rgb(52, 52, 52);
+    --gray-72: rgb(72, 72, 72);
+    --gray-203: rgb(203, 213, 225);
+    --white-248: rgb(248,250,252);
+    --white-255: rgb(255, 255, 255);
+    --skyblue-190: hsl(190, 97%, 47%);
+    --darkblue-245: hsl(245, 95%, 22%);
+    --blue-208: hsl(208, 97%, 58%);
+}


Please use/add the color variables from the Figma design

@sandygudie I have added colors from the Figma file but if there are still any you feel I missed please let me know, it would be most helpful if you specify the exact section in which I didn't use the exact color.

sandygudie · 2022-10-23T22:02:22Z

@Tammy-Ajoko Also, (this is not from you)

I noticed that the existing login and sign-up pages have conflicting class names(for example container)
Also, the login CSS files and signup CSS files are basically the same code,
please can you refactor it to one CSS file for both login and sign-up pages
Do let me know if you need clarity on this
Thanks

Tammy-Ajoko · 2022-10-24T07:24:17Z

@sandygudie I noticed that and was going to make comment on that. I understand what you mean I would refactor it into 1 CSS file and let you know if I have any questions 😊

…_team2

Tammy-Ajoko · 2022-10-25T14:30:12Z

@sandygudie do I create a new pull request for the refactored CSS file or just update this one

Tammy-Ajoko

I added a new color variable to GlobalStyle.css
I refactored both the login and signup CSS files into a single CSS file

Tammy-Ajoko

Added new color variables

Frontend/src/pages/CSS/login-signup.css

sandygudie · 2022-11-02T08:48:35Z

Frontend/src/pages/signup/Signup.jsx

-import "./signup.css"
+import "../CSS/login-signup.css"


Regarding the login/signup CSS file, I will suggest this

Rename the "CSS" folder to "auth", this folder will be for everything authentication.

Move the login JSX file and signup JSX file to it.

update the path on the routing file.

Please do let me know if you need clarity

…-Saudi-Arabia/MOOCs into pr/83

netlify · 2022-11-10T15:30:58Z

✅ Deploy Preview for oscsa-moocs ready!

Name	Link
🔨 Latest commit	`c628836`
🔍 Latest deploy log	https://app.netlify.com/sites/oscsa-moocs/deploys/636d1f9abad4dd0009793e66
😎 Deploy Preview	https://deploy-preview-83--oscsa-moocs.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…Ajoko/dev_team2 Set up color variables and types to ensure color consistency

Set up color variables and types to ensure color consistency

98112a1

sandygudie requested changes Oct 23, 2022

View reviewed changes

sandygudie assigned Tammy-Ajoko Oct 23, 2022

sandygudie added outreachy MOOCs frond-end labels Oct 23, 2022

Tammy-Ajoko added 2 commits October 25, 2022 12:45

Merge branch 'Open-Science-Community-Saudi-Arabia:dev_team2' into dev…

62d31bc

…_team2

Refactored login and signup into a single CSS file

aca8ab3

Tammy-Ajoko commented Oct 25, 2022

View reviewed changes

updated color variables

eb4e790

Tammy-Ajoko commented Oct 25, 2022

View reviewed changes

sandygudie requested changes Nov 2, 2022

View reviewed changes

Merge branch 'dev_team2' of https://github.com/Open-Science-Community…

0c12df7

…-Saudi-Arabia/MOOCs into pr/83

reposition login and signup files

c628836

sandygudie self-requested a review November 10, 2022 15:59

sandygudie approved these changes Nov 10, 2022

View reviewed changes

sandygudie merged commit d36367b into Open-Science-Community-Saudi-Arabia:dev_team2 Nov 10, 2022

sandygudie mentioned this pull request Nov 17, 2022

[13/10/2022]: FRONTEND DEVELOPMENT FOR OSCSA MOOCs PLATFORM #10

Open

19 tasks

RealRichi3 pushed a commit to RealRichi3/MOOCs that referenced this pull request Feb 21, 2023

Merge pull request Open-Science-Community-Saudi-Arabia#83 from Tammy-…

9a669e9

…Ajoko/dev_team2 Set up color variables and types to ensure color consistency

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set up color variables and types to ensure color consistency #83

Set up color variables and types to ensure color consistency #83

Tammy-Ajoko commented Oct 23, 2022 •

edited

Loading

sandygudie Oct 23, 2022 •

edited

Loading

sandygudie Oct 23, 2022

Tammy-Ajoko Oct 25, 2022

sandygudie commented Oct 23, 2022 •

edited

Loading

Tammy-Ajoko commented Oct 24, 2022

Tammy-Ajoko commented Oct 25, 2022 •

edited

Loading

Tammy-Ajoko left a comment

Tammy-Ajoko left a comment

sandygudie Nov 2, 2022 •

edited

Loading

netlify bot commented Nov 10, 2022 •

edited

Loading

Set up color variables and types to ensure color consistency #83

Set up color variables and types to ensure color consistency #83

Conversation

Tammy-Ajoko commented Oct 23, 2022 • edited Loading

Summary

List of changes proposed in this PR (pull-request)

What should a reviewer concentrate their feedback on?

sandygudie Oct 23, 2022 • edited Loading

Choose a reason for hiding this comment

sandygudie Oct 23, 2022

Choose a reason for hiding this comment

Tammy-Ajoko Oct 25, 2022

Choose a reason for hiding this comment

sandygudie commented Oct 23, 2022 • edited Loading

Tammy-Ajoko commented Oct 24, 2022

Tammy-Ajoko commented Oct 25, 2022 • edited Loading

Tammy-Ajoko left a comment

Choose a reason for hiding this comment

Tammy-Ajoko left a comment

Choose a reason for hiding this comment

sandygudie Nov 2, 2022 • edited Loading

Choose a reason for hiding this comment

netlify bot commented Nov 10, 2022 • edited Loading

✅ Deploy Preview for oscsa-moocs ready!

Tammy-Ajoko commented Oct 23, 2022 •

edited

Loading

sandygudie Oct 23, 2022 •

edited

Loading

sandygudie commented Oct 23, 2022 •

edited

Loading

Tammy-Ajoko commented Oct 25, 2022 •

edited

Loading

sandygudie Nov 2, 2022 •

edited

Loading

netlify bot commented Nov 10, 2022 •

edited

Loading