Enhance the code structure and UI of the network information #333
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
✅ Deploy Preview for voluble-rugelach-5a3809 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
d2fong
reviewed
Nov 18, 2024
| "build:netlify": "BUILD=netlify REACT_APP_GIT_COMMIT=$(git rev-parse HEAD) REACT_APP_BUILD_TIMESTAMP=$(git show -s --format=%cI HEAD) webpack --mode production", | ||
| "dev": "REACT_APP_GIT_COMMIT=$(git rev-parse --short HEAD) REACT_APP_BUILD_TIMESTAMP=$(git show -s --format=%cI HEAD) webpack serve --open --mode development", | ||
| "dev": "set \"REACT_APP_GIT_COMMIT=%COMMIT_HASH%\" && set \"REACT_APP_BUILD_TIMESTAMP=%BUILD_TIMESTAMP%\" && webpack serve --open --mode development", |
There was a problem hiding this comment.
Could you explain the reasoning for changing these scripts?
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.
Addressed Issue:
The user interface of network information lacked clear visual hierarchy, making it difficult for users to scan information quickly when wanting to know more about the network.
What has been reengineered
I have enhanced the visual hierarchy with better typography, consistent spacing, and section dividers. Every section has their own information, so I decided to use table to separate the information for better readability. To improve the responsiveness of the tables, I have introduced alternating row colors and hover effects for tables to improve scanability. Also, I have adjusted layout and spacing of the network information for better responsiveness.
Reengineering Strategy or Approach
I have used partial reengineering in enhancing the user interface of the network information, improving the readability of network information without affecting its functionalities.
The Impact of Change
Clearer visual hierarchy improves readability and makes the panel more user-friendly, making user easy to differentiate between different sections of the network information. Also, improved table design and responsive layout ensure a consistent experience on all screen sizes, allowing user to quickly get the information they want about the network.
Below is the image of the network information before and after reengineering:
Before
After
