feat: CF-400: dark mode improvements #1003
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… under the TermPlanner tab
… tooltip, also moved the button for import and export tooltip to common styles
…ng, fixed it to be #333 color instead
…text a bit brighter and made a styled component for it
|
https://ant.design/docs/react/customize-theme
|
…e I merge in the latest changes since the graph was changed
…e the graph dark mode, so I merged dev into this branch
…bel now changes on hover (non-dark mode feature)
…ks more visible in dark mode
Dasyure
changed the title
leonardo-fan
suggested changes
Apr 4, 2023
There was a problem hiding this comment.
Really great job with all the changes! Looks good, just some small comments regarding unused class names.
Also had a bit of a test and there are some remaining dark mode things that I saw (refer to videos/images below). Since there are a few dependencies on this pr right now - definitely don't feel pressured to get these improvements done now. Let me know if you still want to do them, otherwise I'll put the further fixes in the backlog
Screen.Recording.2023-04-04.at.7.01.41.pm.mov
Screen.Recording.2023-04-04.at.7.00.52.pm.mov
Screen.Recording.2023-04-04.at.6.56.07.pm.mov
Screen.Recording.2023-04-04.at.6.55.03.pm.mov
Screen.Recording.2023-04-04.at.6.53.08.pm.mov
|
@leonardo-fan Thanks for pointing those out, I'm happy to finish off the dark mode features I forgot to cover. The only issue is there are a 3 other PRs which are dependent on this. Should I just wait for all 4 PRs to be merged in and then fix all the issues afterward in one go? |
refer to https://csesoc.atlassian.net/jira/software/projects/CF/boards/12/backlog?selectedIssue=CF-426 for further dark mode fixes after this PR is merged in |
leonardo-fan
approved these changes
Apr 11, 2023
ollibowers
added a commit
that referenced
this pull request
Mar 29, 2024
* chore(deps): update dependency eslint to v8.36.0 (#957) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @testing-library/dom to v8.20.0 (#961) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: olli <80164276+ollibowers@users.noreply.github.com> * chore(deps): update `renovate` config Group minor, patches together. * chore(deps): update mikefarah/yq action to v4.32.2 (#978) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): lock file maintenance (#945) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update weekly patch updates (#944) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): group `mypy` * feat(frontend): cache course descriptions (#1004) * cache `GET /courses/*` requests * put types in `src/types` * rename the cache ref variables * chore(deps): update mypy to v1 (major) (#1029) * chore(deps): update mypy to v1 * update tuple[int, int] -> tuple[int, optional[int]] for mypy --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: imagine-hussain <hussain.nwz000@gmail.com> * chore(deps): update dependency @testing-library/dom to v9 (#1020) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @testing-library/react to v14 (#1021) * chore(deps): update dependency @testing-library/react to v14 * chore(fe-test): use act, fix degree search test --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Leonardo Fan <leonardofan2000@gmail.com> * chore(deps): update dependency eslint-plugin-simple-import-sort to v10 (#1022) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency jsdom to v21 (#1023) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency typescript to v5 (#1028) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @ant-design/colors to v7 (#1030) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @ant-design/icons to v5 (#1031) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency framer-motion to v10 (#1040) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat: CF-400: dark mode improvements (#1003) * feat: dark mode functionality added for editMarkModal's input and button elements * feat: dark mode improvement for editMarkModal's cancel button * feat: dark mode improvements for OptionHeader icons underneath the 'Term Planner' tab * feat: dark mode added for the select menu in the settingsMenu tooltip under the TermPlanner tab * feat: dark mode added to SettingMenu's DatePicker element * feat: dark mode for export button done + editModalMark bug fixed * fix: making sure the css for the select element in settingsMenu does not affect other select elements * feat: dark mode improvement for popconfirm for unplan wanring, import tooltip, also moved the button for import and export tooltip to common styles * feat: dark mode scrollbar added * feat: dark mode scrollbar on courseSelector menu had ugly white padding, fixed it to be #333 color instead * fix: href in courseSelector not very readable in dark mode, made the text a bit brighter and made a styled component for it * feat: dark mode added for search bar * feat: dark mode added for remove planner button * fix: forgot to add the new styles.ts file * feat: progressBar's text color and trailing color fixed * feat: dividing line in courseDescription changed from white to a dark grey * feat: bug icon turned into dark mode * feat: dark mode added for quick add and remove buttons in course menu * feat: courseProgression progress bar trailing color changed to dark grey * feat: progress on dark mode for graph, need to save this commit before I merge in the latest changes since the graph was changed * feat: dark mode for graph complete (nodes, arrows, hover states) + label now changes on hover (non-dark mode feature) * feat: buttons on graphical selector are dark mode * feat: saving progress on converting courseDescription panel to dark mode * feat: dark mode added to the sidebar * feat: sidebardrawer color changed, box shadow added to tabs so it looks more visible in dark mode * feat: new images added in help menu in course selector, dark mode versions added too * feat: TermPlanner's help menu tooltips now have dark mode pics and gifs --------- Co-authored-by: Daysure <sandeep.das@student.unsw.edu.au> * feat: CF-423: additional styling on course node hover (#1034) * feat: dark mode functionality added for editMarkModal's input and button elements * feat: dark mode improvement for editMarkModal's cancel button * feat: dark mode improvements for OptionHeader icons underneath the 'Term Planner' tab * feat: dark mode added for the select menu in the settingsMenu tooltip under the TermPlanner tab * feat: dark mode added to SettingMenu's DatePicker element * feat: dark mode for export button done + editModalMark bug fixed * fix: making sure the css for the select element in settingsMenu does not affect other select elements * feat: dark mode improvement for popconfirm for unplan wanring, import tooltip, also moved the button for import and export tooltip to common styles * feat: dark mode scrollbar added * feat: dark mode scrollbar on courseSelector menu had ugly white padding, fixed it to be #333 color instead * fix: href in courseSelector not very readable in dark mode, made the text a bit brighter and made a styled component for it * feat: dark mode added for search bar * feat: dark mode added for remove planner button * fix: forgot to add the new styles.ts file * feat: progressBar's text color and trailing color fixed * feat: dividing line in courseDescription changed from white to a dark grey * feat: bug icon turned into dark mode * feat: dark mode added for quick add and remove buttons in course menu * feat: courseProgression progress bar trailing color changed to dark grey * feat: progress on dark mode for graph, need to save this commit before I merge in the latest changes since the graph was changed * feat: dark mode for graph complete (nodes, arrows, hover states) + label now changes on hover (non-dark mode feature) * feat: buttons on graphical selector are dark mode * feat: saving progress on converting courseDescription panel to dark mode * feat: dark mode added to the sidebar * feat: sidebardrawer color changed, box shadow added to tabs so it looks more visible in dark mode * feat: new images added in help menu in course selector, dark mode versions added too * feat: TermPlanner's help menu tooltips now have dark mode pics and gifs * feat: highlight adjacent nodes and edges on hover * feat: highlight adjacent nodes opacity updated * refactor: graph.ts, changing function names and object names to be more readable: * feat: implemented a function that checks if a course is a prereq based on GraphData without calling the backend * fix: two graphs get rendered if you switch tabs fast enough * feat: created a function to store a hashmap of prereqs for later use for node styling * fix: updated the function that checks for coursePrerequisite Other options are: 1. Rely on GraphData, however it gets laggy when you hover over too many nodes 2. API call - would get slow with multiple requests 3. CourseEdge info gets stored into a hashmap at initialisation, so checking for prereqs is fast afterwards * refactor: graph.ts function and object names made more readable * refactor: rewriting the returns and using spread operator to reduce repetition in graph.ts * feat: highlight prerequisite nodes on hover * refactor: splitting functions up as they were getting too long * fix: if the dark mode button is toggled on and off, it repaints the canvas more than one time * feat: highlighted incoming edge if it's a prerequisite as well * feat: forgot to add pics into the HelpMenu for the new graphical selector hover node feature --------- Co-authored-by: Daysure <sandeep.das@student.unsw.edu.au> Co-authored-by: Leonardo Fan <leonardofan2000@gmail.com> * chore(deps): update dependency mypy to v1.2.0 (#1049) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): remove react-svg as not used (#1044) * chore(deps): group `vite` * chore(deps): update dependency requests to v2.31.0 [security] (#1055) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Make course menu bar resizeable (#1042) * hotfix: fix the type err in the run script * feat: CF-356: unlocked course nodes added to graphical selector (#1035) Different course node stylings added for the following states: - course node is added to the planner - course node is unlocked (i.e. meets the prereqs for that course) - course node that is locked https://csesoc.atlassian.net/browse/CF-356 --------- Co-authored-by: Daysure <sandeep.das@student.unsw.edu.au> Co-authored-by: Leonardo Fan <leonardofan2000@gmail.com> * fix(deps): update weekly minor updates (#1050) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): bump tough-cookie from 4.1.2 to 4.1.3 in /frontend (#1065) Bumps [tough-cookie](https://github.com/salesforce/tough-cookie) from 4.1.2 to 4.1.3. - [Release notes](https://github.com/salesforce/tough-cookie/releases) - [Changelog](https://github.com/salesforce/tough-cookie/blob/master/CHANGELOG.md) - [Commits](salesforce/tough-cookie@v4.1.2...v4.1.3) --- updated-dependencies: - dependency-name: tough-cookie dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: CF-421: adding or removing courses now reflect in the graphical selector (#1037) * feat: dark mode functionality added for editMarkModal's input and button elements * feat: dark mode improvement for editMarkModal's cancel button * feat: dark mode improvements for OptionHeader icons underneath the 'Term Planner' tab * feat: dark mode added for the select menu in the settingsMenu tooltip under the TermPlanner tab * feat: dark mode added to SettingMenu's DatePicker element * feat: dark mode for export button done + editModalMark bug fixed * fix: making sure the css for the select element in settingsMenu does not affect other select elements * feat: dark mode improvement for popconfirm for unplan wanring, import tooltip, also moved the button for import and export tooltip to common styles * feat: dark mode scrollbar added * feat: dark mode scrollbar on courseSelector menu had ugly white padding, fixed it to be #333 color instead * fix: href in courseSelector not very readable in dark mode, made the text a bit brighter and made a styled component for it * feat: dark mode added for search bar * feat: dark mode added for remove planner button * fix: forgot to add the new styles.ts file * feat: progressBar's text color and trailing color fixed * feat: dividing line in courseDescription changed from white to a dark grey * feat: bug icon turned into dark mode * feat: dark mode added for quick add and remove buttons in course menu * feat: courseProgression progress bar trailing color changed to dark grey * feat: progress on dark mode for graph, need to save this commit before I merge in the latest changes since the graph was changed * feat: dark mode for graph complete (nodes, arrows, hover states) + label now changes on hover (non-dark mode feature) * feat: buttons on graphical selector are dark mode * feat: saving progress on converting courseDescription panel to dark mode * feat: dark mode added to the sidebar * feat: sidebardrawer color changed, box shadow added to tabs so it looks more visible in dark mode * feat: new images added in help menu in course selector, dark mode versions added too * feat: TermPlanner's help menu tooltips now have dark mode pics and gifs * feat: highlight adjacent nodes and edges on hover * feat: highlight adjacent nodes opacity updated * refactor: graph.ts, changing function names and object names to be more readable: * feat: implemented a function that checks if a course is a prereq based on GraphData without calling the backend * fix: two graphs get rendered if you switch tabs fast enough * feat: created a function to store a hashmap of prereqs for later use for node styling * fix: updated the function that checks for coursePrerequisite Other options are: 1. Rely on GraphData, however it gets laggy when you hover over too many nodes 2. API call - would get slow with multiple requests 3. CourseEdge info gets stored into a hashmap at initialisation, so checking for prereqs is fast afterwards * refactor: graph.ts function and object names made more readable * refactor: rewriting the returns and using spread operator to reduce repetition in graph.ts * feat: highlight prerequisite nodes on hover * refactor: splitting functions up as they were getting too long * fix: if the dark mode button is toggled on and off, it repaints the canvas more than one time * feat: highlighted incoming edge if it's a prerequisite as well * feat: forgot to add pics into the HelpMenu for the new graphical selector hover node feature * feat: unlocked course nodes are now distinct from planned and locked courses feat: HelpMenu pictures were also updated * fix: adding and removing courses in graphical selector, updates the node in the graph without re-render refactor: graph.ts duplicate function removed * fix: endArrow opacity of graph was not changing on hover * fix: instead of using courseSlicer, used axios request to update unlocked nodes after adding to planner --------- Co-authored-by: Daysure <sandeep.das@student.unsw.edu.au> * fix: CF-425: cleaning graph loading screen (#1039) * feat: dark mode functionality added for editMarkModal's input and button elements * feat: dark mode improvement for editMarkModal's cancel button * feat: dark mode improvements for OptionHeader icons underneath the 'Term Planner' tab * feat: dark mode added for the select menu in the settingsMenu tooltip under the TermPlanner tab * feat: dark mode added to SettingMenu's DatePicker element * feat: dark mode for export button done + editModalMark bug fixed * fix: making sure the css for the select element in settingsMenu does not affect other select elements * feat: dark mode improvement for popconfirm for unplan wanring, import tooltip, also moved the button for import and export tooltip to common styles * feat: dark mode scrollbar added * feat: dark mode scrollbar on courseSelector menu had ugly white padding, fixed it to be #333 color instead * fix: href in courseSelector not very readable in dark mode, made the text a bit brighter and made a styled component for it * feat: dark mode added for search bar * feat: dark mode added for remove planner button * fix: forgot to add the new styles.ts file * feat: progressBar's text color and trailing color fixed * feat: dividing line in courseDescription changed from white to a dark grey * feat: bug icon turned into dark mode * feat: dark mode added for quick add and remove buttons in course menu * feat: courseProgression progress bar trailing color changed to dark grey * feat: progress on dark mode for graph, need to save this commit before I merge in the latest changes since the graph was changed * feat: dark mode for graph complete (nodes, arrows, hover states) + label now changes on hover (non-dark mode feature) * feat: buttons on graphical selector are dark mode * feat: saving progress on converting courseDescription panel to dark mode * feat: dark mode added to the sidebar * feat: sidebardrawer color changed, box shadow added to tabs so it looks more visible in dark mode * feat: new images added in help menu in course selector, dark mode versions added too * feat: TermPlanner's help menu tooltips now have dark mode pics and gifs * feat: highlight adjacent nodes and edges on hover * feat: highlight adjacent nodes opacity updated * refactor: graph.ts, changing function names and object names to be more readable: * feat: implemented a function that checks if a course is a prereq based on GraphData without calling the backend * fix: two graphs get rendered if you switch tabs fast enough * feat: created a function to store a hashmap of prereqs for later use for node styling * fix: updated the function that checks for coursePrerequisite Other options are: 1. Rely on GraphData, however it gets laggy when you hover over too many nodes 2. API call - would get slow with multiple requests 3. CourseEdge info gets stored into a hashmap at initialisation, so checking for prereqs is fast afterwards * refactor: graph.ts function and object names made more readable * refactor: rewriting the returns and using spread operator to reduce repetition in graph.ts * feat: highlight prerequisite nodes on hover * refactor: splitting functions up as they were getting too long * fix: if the dark mode button is toggled on and off, it repaints the canvas more than one time * feat: highlighted incoming edge if it's a prerequisite as well * feat: forgot to add pics into the HelpMenu for the new graphical selector hover node feature * feat: unlocked course nodes are now distinct from planned and locked courses feat: HelpMenu pictures were also updated * fix: adding and removing courses in graphical selector, updates the node in the graph without re-render refactor: graph.ts duplicate function removed * fix: endArrow opacity of graph was not changing on hover * fix: instead of using courseSlicer, used axios request to update unlocked nodes after adding to planner * fix: searchbar hidden while graph loads fix: random course node that pops up is hidden now feat: show all courses toggle has a loading screen now too * docs: forgot to update comment which I copy pasted in * fix: no-non-null-assertion warning fixed in graph.ts --------- Co-authored-by: Daysure <sandeep.das@student.unsw.edu.au> * feat(frontend): add option to ignore course in progression checks (#1059) * Add option to ignore course in progression checks * Fix progression check page * Remove eslint-disable * Address PR comments * feat: CTF Challenge for 2023 Projects Fair (#1081) Added CTF challenge for the 2023 Projects Fair. More information on https://levelup-ctf.csesoc.app/ --------- Co-authored-by: Bahnschrift <kbeckett@outlook.com.au> Co-authored-by: Leonardo Fan <leonardofan2000@gmail.com> * chore: fix CD manfiest branch * chore: fix CD manfiest pull branch * in the arena trying stuff (#1082) * hotfix(ctf): fixing even terms (#1083) * hotfix(ctf): ensure that even check term starts evens * hotfix(ctf): ensure that even check term starts evens * mypy * minor comment * chore(deps): update dependency python-dotenv to v1 (#1026) * chore(deps): update ci-actions (#1070) * chore(deps): update dependency types-paramiko to v3 (#1027) * chore(deps): update dependency eslint-config-prettier to v9 (#1085) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * data/2024_handbook_migration (#1091) * change LIVE_YEAR to 2024 * add 2023 to archive data * update 2024 programs * update 2024 specialisations - NEED TO FIX any_level * update courses * update conditions to 2024 and manual fixes * finalise data-fix * some autotests fix * rerun datafix with new handbook in DB * fix indirect unlock test * more validation test fixes * CI but shorter ignore times * mypy * skip test_validation * fix get_followups * fix: commented out ctf code (#1096) * feat: Add devsoc logo and replace most csesoc references (#1097) * feat: Add devsoc logo and replace most csesoc references * fix: changed all csesoc styled component names * feat: add UNSW branding --------- Co-authored-by: ollibowers <80164276+ollibowers@users.noreply.github.com> * fix: moved UNSW to front of label (#1098) * feat: the devsocening (#1100) * chore: update CODEOWNERS for 2024 devsoc (#1102) * chore: update CODEOWNERS for 2024 devsoc * feat: a notification for our ongoing subcommittee recruitment (#1103) * feat: recruitment notification on page load * fix: made the notification only appear every 23 hours * add sponsors to landing page (#1104) * add sponsors to landing page * fix: add more gap between the sponsors --------- Co-authored-by: ollibowers <80164276+ollibowers@users.noreply.github.com> * feat/contribution notif+branding (#1107) * fix: Update Devsoc branding in footer * feat: open source contribution notification * fix: update branding and features * changed notification icon from smile to megaphone * fix compilation errors * fix small issue * fix: some frontend bugs - no longer refetches on focus loss - primary colour is now brighter - term planner loads when zero courses * small fixes * add tokeignore to stop the lines of code thingo from crashing so much * fix: graph styles not resetting properly * fix: bad effect dependency in CourseMenu causing infinite recalls and added a memo * fix: added key props to tabs and course attributes * fix: tried to get progression checker as best as i could * fix: progression checker button styles * fix: term boxes shrinking and refresh bug on term planner page * fix: brought back the export/import planner menus but commented out --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: olli <80164276+ollibowers@users.noreply.github.com> Co-authored-by: Jared L <48422312+lhjt@users.noreply.github.com> Co-authored-by: Martin <martin.knezevic1@gmail.com> Co-authored-by: imagine-hussain <hussain.nwz000@gmail.com> Co-authored-by: Leonardo Fan <leonardofan2000@gmail.com> Co-authored-by: Sandeep Das <65163571+Dasyure@users.noreply.github.com> Co-authored-by: Daysure <sandeep.das@student.unsw.edu.au> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lucas <me@lhvy.dev> Co-authored-by: imagine-hussain <93496985+imagine-hussain@users.noreply.github.com> Co-authored-by: Bahnschrift <kbeckett@outlook.com.au> Co-authored-by: sachk <sk@sachk.com> Co-authored-by: Bob Chen <83627389+3bobchen@users.noreply.github.com> Co-authored-by: sacha <sachakorban@gmail.com> Co-authored-by: Jeremy Le <112688727+jeremyle56@users.noreply.github.com> Co-authored-by: Peter Derias <peter.derias@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@leonardo-fan this was what I was talking about in my standup from Wednesday. This draft PR contains a few commits but the ones in question involve the settingsMenu's select dropdown and datePicker, inside SettingsMenu.tsx. I added pictures on the jira ticket of the end product if you're interested.
https://csesoc.atlassian.net/jira/software/projects/CF/boards/12/?selectedIssue=CF-400
What I tried to do:
What I ended up doing:
Concern: