Enhance Profile Page - #15
Open
iamalexov wants to merge 7 commits into
Open
Conversation
Add Profile page and API integration
nicostuhlfauth
suggested changes
Jul 9, 2026
nicostuhlfauth
left a comment
nicostuhlfauth
left a comment
There was a problem hiding this comment.
Hey @iamalexov 👋
Thanks for requesting the review from me. I left you some comments inline, but more generic, there is an issue how you use CSS and structure your code. To improve:
- do not use any global CSS in the component CSS
- use CSS modules to make sure that the CSS only has an impact on the component it belongs to. See this quick tutorial.
- Extract components, that's what React is about. For example create an Input and a Button component, each with its own styles that can be reused on the pages. This keeps consistency. Another option is to move your Container into a component, so you can have the same margin and padding everywhere.
- Define your font sizes in a central place, not per component. You can also use components for that or, at least, have this one in your main css file.
Happy to sync this evening about it if needed.
Comment on lines
+1
to
+10
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| background: #f3f6fb; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } |
There was a problem hiding this comment.
These styles should not be defined here.
|
|
||
| .container { | ||
| width: 100%; | ||
| max-width: 100%; |
There was a problem hiding this comment.
You already set the width to 100%, so you can remove it.
Suggested change
| max-width: 100%; |
Comment on lines
+34
to
+49
| input[type="text"], | ||
| textarea { | ||
| width: 100%; | ||
| padding: 14px; | ||
| margin-bottom: 20px; | ||
| border: 2px solid #ddd; | ||
| border-radius: 10px; | ||
| font-size: 16px; | ||
| transition: .3s; | ||
| } | ||
|
|
||
| input[type="text"]:focus, | ||
| textarea:focus { | ||
| outline: none; | ||
| border-color: #2563eb; | ||
| } |
There was a problem hiding this comment.
Just as an example: These styles do not only change the styles of your input on the Profile page, but also on other pages, where any input is used.
| @@ -0,0 +1,9 @@ | |||
| import styles from "./Container.module.css"; | |||
|
|
|||
| export default function Container({ children, className = "" }) { | |||
There was a problem hiding this comment.
Suggested change
| export default function Container({ children, className = "" }) { | |
| export default function Container({ children }) { |
|
|
||
| export default function Container({ children, className = "" }) { | ||
| return ( | ||
| <div className={`${styles.container} ${className}`}> |
There was a problem hiding this comment.
Suggested change
| <div className={`${styles.container} ${className}`}> | |
| <div className={`${styles.container}`}> |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Implemented the Profile page with:
Added form validation and responsive styling.
Backend integration will be implemented in a future PR.